Sensitiv form html. Flere valg fra rullegardinmenyen
Skjemaer er laget for å sende data fra brukeren til webserveren. Skjemaer i HTML kan bestå av tekstfelt og tekstområder, avmerkingsbokser og alternativknapper og nedtrekkslister. Alt dette er formelementer. Hvert element tjener til å formidle en viss mening til nettstedet.
I kjernen er et HTML-skjema en nettside der du ser områder for å legge inn informasjonen din. Etter at du har fylt ut skjemaet og klikker på send, pakkes informasjonen fra skjemaet og sendes til webserveren for behandling av et serversideskript (behandlerfil). Etter behandling returneres en annen nettside til deg som svar. Følgende figur viser tydelig hvordan skjemaet fungerer:
Det er ikke noe vanskelig med å lage HTML-skjemaer. Den enkleste måten å få en ide om skjemaer på er å analysere litt HTML-kode og deretter se hvordan det fungerer. Følgende eksempel viser syntaksen for å lage et enkelt HTML-skjema:
Eksempel: Enkelt HTML-skjema
- Prøv selv"
Min første form:
Navn:
Etternavn:
Element
Skjemaer settes inn på nettsider ved hjelp av elementet . Den gir en beholder for alt skjemainnhold, inkludert elementer som tekstfelt og knapper, så vel som andre tagger HTML-språk. Den kan imidlertid ikke inneholde et annet element
.
For å sende skjemaet til serveren, bruk "Send"-knappen, samme resultat vil oppnås hvis du trykker på "Enter"-tasten i skjemaet. Hvis "Send"-knappen ikke finnes på skjemaet, kan "Enter"-tasten brukes til å sende inn.
De fleste elementattributter påvirke behandlingen av skjemaet, ikke utformingen. De vanligste er handling Og metode. Egenskap handling inneholder URL-en som informasjonen i skjemaet vil bli sendt til for behandling av serveren. Egenskap metode er HTTP-metoden som nettlesere må bruke for å sende inn skjemadata.
Element
Nesten alle skjemafelt opprettes ved hjelp av elementet (fra engelsk input - input). Utseende element endres avhengig av verdien av attributtet type:
Her er noen attributtverdier type:
Tast inn tekst og passord
En av de mest enkle typer skjemaelementer er et tekstfelt designet for å skrive inn tekst fra én linje. Denne typen tekstinntasting er satt som standard, og derfor er det enlinjefeltet som vises hvis du glemmer å spesifisere attributtet type. For å legge til et én-linjes tekstinntastingsfelt i et skjema, bør du inne i elementet registrere attributtet type med tekstverdi:
Inntastingsfeltet for passord er en type vanlig tekstfelt. Den støtter de samme attributtene som et enkeltlinjes tekstfelt. Egenskap Navn angir navnet på passordfeltet som skal sendes til serveren sammen med passordet som er angitt av brukeren. For å opprette et passordfelt må du sette passordattributtet til type(passord (engelsk) - passord):
Et eksempel på å lage et skjema med et passordfelt:
Eksempel: Passordfelt
- Prøv selv"
Din pålogging:
Passord:
Du kan bruke attributtet sammen med dette attributtet makslengde, hvis verdi avgjør maksimalt beløp tegn som kan skrives inn denne linjen. Du kan også angi lengden på inndatafeltet ved å bruke attributtet størrelse. Som standard begrenser de fleste nettlesere bredden på et tekstfelt til 20 tegn. For å kontrollere bredden på nye skjemaelementer, i stedet for et attributt størrelse, anbefaler vi å bruke Cascading Style Sheets (CSS).
Egenskap verdi angir verdien som vises som standard i tekstfeltet når skjemaet lastes. Ved å legge inn en standardverdi i feltet kan du forklare brukeren nøyaktig hvilke data og i hvilket format du ønsker at brukeren skal legge inn her. Dette er som en prøve, fordi det er mye mer praktisk for brukeren å fylle ut skjemaet, se et eksempel foran seg.
Brytere (radio)
Element type radio oppretter brytere som bruker det logiske "ELLER"-prinsippet, som lar deg velge bare én av flere verdier: hvis du velger én posisjon, blir alle andre inaktive. Den grunnleggende syntaksen til et veksleelement er:
Egenskap Navn for brytere er nødvendig og spiller viktig rolle ved å kombinere flere alternativknappelementer til en gruppe. For å kombinere brytere til en gruppe, må du stille inn samme verdi Egenskap Navn Og annen betydning Egenskap verdi. Egenskap verdi angir verdien for den valgte alternativknappen som skal sendes til serveren. Verdien av hvert alternativknappelement må være unikt i gruppen slik at serveren vet hvilket svaralternativ brukeren valgte.
Attributte tilstedeværelse krysset av(fra engelsk - installert) ved bryterelementet indikerer hvilke av de foreslåtte alternativene som skal velges som standard når du laster inn siden, om nødvendig. Dette attributtet kan bare angis for ett alternativknappelement fra gruppen:
- Prøv selv"
Hvor gammel er du?
- Under 18
- fra 18 til 24
- fra 25 til 35
- mer enn 35
handlingsattributtet.
Hoved for element er et attributt handling, som spesifiserer databehandleren for skjemaet. En databehandler er en fil som beskriver hva du skal gjøre med skjemadata. Resultatet av denne behandlingen er en ny HTML-side som returneres til nettleseren. Med andre ord, i attributtet handling angir URL-banen til en behandlerfil på serveren (noen ganger kalt en skriptside) for behandling av skjemaet. Syntaksen er som følger:
Behandlingsfilen ligger på serveren mytestserver.com i mappen navnemappe og navnet på serverskriptet som skal behandle dataene - obrabotchik.php. Alle dataene du skrev inn i skjemaet på nettsiden vil bli overført til ham. .php-utvidelsen indikerer at det angitte skjemaet behandles av et skript skrevet i PHP. Selve behandleren kan skrives på et annet språk, for eksempel kan det være skriptspråket Python, Ruby, etc.
Det anbefales alltid å angi attributtverdien handling. Hvis skjemaet skal sende verdier til samme side der det er plassert, oppgi en tom streng som verdien av handlingsattributtet: action="".
metodeattributt
Egenskap metode spesifiserer hvordan informasjon skal overføres til serveren. Skjemainnsendingsmetoden du velger avhenger av dataene du vil sende inn med skjemaet. Mengden av disse dataene spiller en stor rolle her. De mest populære er to metoder for å overføre skjemaets kildedata fra nettleseren til serveren: FÅ Og POST. Metoden kan settes til hvilken som helst du velger, og hvis du ikke spesifiserer den, vil standarden bli brukt FÅ. La oss vurdere bruken av hver av dem.
POST metode
Metode POST pakker danner data og sender dem til serveren uten at brukeren merker det, siden dataene finnes i meldingens brødtekst. Nettleser, når du bruker metoden POST sender en forespørsel til serveren som består av spesielle overskrifter etterfulgt av skjemadata. Siden innholdet i denne forespørselen kun er tilgjengelig for serveren, vil metoden POST brukes til å overføre konfidensielle data som passord, detaljer bankkort og annen personlig informasjon om brukere. Metode POST også egnet for å sende store mengder informasjon, siden i motsetning til metoden FÅ, den har ingen begrensninger på antall overførte tegn.
GET-metoden
Som du allerede vet, er hovedoppgaven til en nettleser å motta nettsider fra serveren. Så når du bruker metoden FÅ, henter nettleseren ganske enkelt nettsiden som den alltid gjør. Metode FÅ bryter også skjemadata, men legger dem til på slutten av URL-en før forespørselen sendes til serveren. For å forstå hvordan metoden fungerer FÅ, la oss se det i aksjon. Åpne det første eksemplet fra denne leksjonen (Eksempel: Enkelt HTML-skjema) i Notisblokk (for eksempel Notisblokk++) og gjør en liten endring i HTML-koden:
Avslutningsbrikken er påkrevd.
WAI ARIA
Standard rolleverdi: form
Gyldige rolleverdier:
- ingen
- presentasjon
- Søk
Attributter
- accept-charset - Angir kodingen der serveren kan akseptere og behandle data.
- handling – Adressen til programmet eller dokumentet som behandler skjemadataene.
- autofullføring – Aktiverer autofullføring av skjemafelt.
- enctype - Måten skjemadataene er kodet på.
- metode - HTTP-protokollmetode.
- navn – Navnet på skjemaet.
- novalidate - Avbryter den innebygde valideringen av skjemadata for korrekt inndata.
- target - Navnet på vinduet eller rammen der behandleren skal laste det returnerte resultatet.
aksept-tegnsett
Angir kodingen som serveren kan akseptere og behandle skjemadata i.
Syntaks
Verdier
Kodingsnavn, for eksempel Windows-1251, UTF-8, etc.
Standardverdi
Kodingssettet for siden.
handling
Angir behandleren som skjemadata får tilgang til når de sendes til serveren. Behandleren kan være et serverprogram eller et HTML-dokument som inkluderer serverskript (for eksempel Parser). Etter at behandleren har utført handlinger på skjemadataene, returnerer den et nytt HTML-dokument.
Hvis handlingsattributtet mangler, blir gjeldende side lastet inn på nytt, og alle skjemaelementer returneres til standardverdiene.
Syntaks
Verdier
Verdien tas som full eller relativ vei til serverfilen.
Standardverdi
autofullfør
Kontrollerer automatisk utfylling av skjemafelt. Verdien kan overstyres av autofullfør-attributtet spesifikke elementer skjemaer.
Autofyll utføres av nettleseren, som husker verdiene som ble skrevet første gang du angir den, og deretter erstatter dem når du skriver den inn igjen i skjemafeltene. I dette tilfellet kan autofullføring deaktiveres i nettleserinnstillingene og kan ikke endres i dette tilfellet ved å bruke autofullføringsattributtet.
Når du skriver inn de første bokstavene i teksten, vises en liste over tidligere lagrede verdier, der du kan velge det du trenger.
Syntaks
Verdier
- på – Aktiverer autofyll av skjema.
- av - Deaktiverer autofyll. Denne verdien brukes vanligvis for å forhindre at nettleseren lagrer viktige data (passord, bankkortnumre), samt sjelden inntastede eller unike data (captcha).
Standardverdi
enctype
Bestemmer hvordan skjemadata kodes når de sendes til serveren. Vanligvis er det ikke nødvendig å angi enctype-attributtet; dataene blir forstått ganske riktig på serversiden. Men hvis du bruker et filinnsendingsfelt (input type="file"), bør du definere enctype-attributtet som multipart/form-data .
Syntaks
Verdier
- application/x-www-form-urlencoded - Mellomrom erstattes med +, tegn som russiske bokstaver er kodet med sine heksadesimale verdier (for eksempel %D0%90%D0%BD%D1%8F i stedet for Anya).
- multipart/form-data - Data er ikke kodet. Denne verdien brukes ved sending av filer.
- tekst/vanlig - Mellomrom erstattes med et +-tegn, bokstaver og andre tegn er ikke kodet.
Standardverdi
application/x-www-form-urlencoded
metode
Metodeattributtet forteller serveren om forespørselsmetoden.
Syntaks
Verdier
Verdien av metodeattributtet skiller mellom store og små bokstaver. Det er to metoder - hent og post.
- get - Denne metoden er en av de vanligste og er designet for å få den nødvendige informasjonen og overføre data i adressefeltet. Navn=verdi-par blir deretter lagt til adressen etter spørsmålstegnet og atskilt med et og-tegnet (&-symbol). Det praktiske med å bruke get-metoden er at adressen med alle parameterne kan brukes gjentatte ganger, for eksempel lagre den i nettleserens bokmerker, og du kan også endre parameterverdiene direkte i adressefeltet.
- post - Postmetoden sender data til serveren i en nettleserforespørsel. Dette lar deg sende stor kvantitet data enn det som er tilgjengelig for get-metoden, siden post ikke har en grense på 4 KB. Store volumer data brukes i fora, e-posttjenester, utfylling av en database, ved sending av filer osv.
Standardverdi
Navn
Definerer unikt navn skjemaer. Vanligvis brukes navnet på skjemaet for å få tilgang til elementene gjennom skript.
Syntaks
Verdier
Navnet er et sett med tegn, inkludert tall og bokstaver. JavaScript skiller mellom store og små bokstaver, så når du får tilgang til et skjema med navn gjennom skript, bruk samme stavemåte som navnattributtet.
Standardverdi
novalidate
Avbryter den innebygde verifiseringen av data som er lagt inn av brukeren i skjemaet for korrekthet. Denne kontrollen utføres automatisk av nettleseren når skjemaet sendes til serveren og skjer for felt , , samt om det er et mønster eller påkrevd attributt.
Syntaks
Verdier
Standardverdi
Som standard er dette attributtet deaktivert.
mål
Etter at skjemabehandleren mottar dataene, returnerer den resultatet som et HTML-dokument. Du kan definere rammen som den resulterende nettsiden skal lastes inn i. For å gjøre dette, bruk target-attributtet; navnet på rammen er spesifisert som verdien. Hvis målet ikke er satt, vises det returnerte resultatet i gjeldende fane.
Syntaks
Verdier
Verdien er navnet på rammen spesifisert av elementets navnattributt