HTML-skjemaer. Eksempel: Enkelt HTML-skjema

God dag, fans av webutvikling og de som ønsker å lage sin egen nettside. Før det var alle publikasjonene mine viet til de grunnleggende elementene i språket, måter å lage ulike innholdsobjekter på, deres formatering, strukturering, etc. Etter å ha mestret de tidligere emnene, kan du allerede lage en ganske god nettside. Den vil imidlertid være ufullstendig uten dagens emne: "Opprette skjemaer i html."

Denne delen av språket er veldig viktig. Vær derfor spesielt oppmerksom på å studere den, ellers vil ikke nettressursen du opprettet bli utgitt i produksjon. Dermed vil du, etter å ha lest artikkelen, lære hva du trenger å bruke skjemaer til, hvilke tagger de brukes til å lage, og du vil også kunne prøve spesifikke eksempler på praksis. La oss komme i gang!

Hva er en form og hvordan fungerer den?

Skjema– dette er et av de viktigste objektene, som er ment for utveksling av informasjonsdata mellom serveren og brukeren.

Enkelt sagt, hvis du ønsker å opprette en nettbutikk med muligheten til å bestille produkter på nettstedet, be om registrering på en nettressurs og jobbe med kontoer, eller gi kunder tilbakemelding med bedriftsledere, så klarer du deg ikke uten skjemaer.

Skjemaet angis vha spesielt element html språk

.

Merk at kodedokumentet kan inneholde flere merkedeklarasjoner , men bare én forespørsel kan sendes til serveren for å behandle dataene. Det er derfor informasjonen som brukeren skriver inn i feltene som er oppgitt for dette refererer til ulike former, bør ikke være avhengig. Det er heller ikke tillatt å hekke former i hverandre.

For de som er utålmodige og ivrige etter å ta en rask titt på koderepresentasjonen, har jeg lagt ved et enkelt eksempel på bruk av et panel med tekstfelt for et passord med en knapp:

1 2 3 4 5 6 7 8 9 10 11 12 Eksempel

Eksempel

Det er kanskje ikke helt klart nå hva og hvordan som samhandler i dette lille programmet, men jeg garanterer at etter å ha lest hele artikkelen vil du kunne lage applikasjoner som er mye mer komplekse.

Sender data til serversiden

For å sende den innskrevne (eller valgte) informasjonen i en dialogboks, må du bruke standardmekanismen - Send inn-knapp.

Koden for en slik metode ser slik ut:

Når du kjører den presenterte linjen, vises en knapp med inskripsjonen: "Send inn".

En annen måte å sende data til serversiden på er å trykke Enter-tasten i dialogboksen.

Etter å ha bekreftet sendingen av den angitte informasjonen, kommer den ikke umiddelbart til serveren. Først behandles den av nettleseren, noe som resulterer i formen "navn=verdi".

Attributtparameteren er ansvarlig for navnet type stikkord , og for verdien - dataene som er lagt inn av brukeren. Deretter sendes den konverterte strengen til behandleren, som oftest er spesifisert i attributtet handling element

.

Handlingsparameteren i seg selv er ikke nødvendig, og i noen tilfeller er den ikke nødvendig i det hele tatt. For eksempel, hvis en side er skrevet med php eller js, skjer behandling på den gjeldende siden og koblinger er ikke nødvendig.

For en bedre forståelse av hele bildet av nettstedets funksjon, vil jeg legge til at på serveren behandles data på andre språk. Dermed anses serversidespråk for å være: Python, php, C-lignende språk (C#, C, etc.), Java og andre.

Nå vil jeg gjerne stoppe opp og snakke mer om elementet . Hvis du forklarer på enkelt språk, Det nødvendig for å lage tekstfelt, alternativknapper, forskjellige knapper, skjulte felt, avmerkingsbokser og andre objekter.

Taggen trenger ikke å være sammenkoblet med , men hvis du trenger å behandle brukerposter eller legge dem inn, for eksempel i en database, kan du ikke klare deg uten en beholder.

Hovedattributtene til dette språkelementet hypertekstmarkering er:

  • Tekst– oppretter et tekstfelt;
  • Sende inn– oppretter en knapp for å sende data til serveren;
  • Bilde– er ansvarlig for knappen med bildet;
  • Nullstille– setter en knapp for å tømme skjemaet;
  • Passord– setter et tekstfelt spesifikt for passord;
  • Avmerkingsboks– ansvarlig for felt med avmerkingsbokser;
  • Radio– ansvarlig for felt med valg av ett element;
  • Knapp– oppretter en knapp;
  • Skjult– brukes til skjulte felt;
  • Fil– angir feltet som er ansvarlig for sending av filer.

Metoder for å overføre informasjon

Det er 2 måter å overføre brukerdata til serversiden på: Få Og Post. Disse metodene utfører samme handling, men de skiller seg betydelig fra hverandre. Derfor, før vi nevner noen av dem, la oss bli kjent med funksjonene deres.

Post Få
Størrelse på overførte dokumenter Begrenset til serversiden. Maksimalt – 4 KB.
Hvordan sendt informasjon vises Bare tilgjengelig når den vises gjennom nettleserutvidelser eller andre spesielle programvareprodukter. Umiddelbart tilgjengelig for alle.
Bruke bokmerker Det er ingen måte å legge til i bokmerker, siden forespørsler ikke gjentas (alle sider lenker til én adresse). Enhver side med en forespørsel kan lagres som bokmerker og returneres til den senere.
Buffer Basert på forrige avsnitt er alle forespørsler på én side. Hver side kan bufres separat.
Hensikt Brukes til videresending store filer(bøker, bilder, videoer osv.), meldinger, kommentarer. Flott for å søke etter forespurte verdier på en nettressurs eller for å sende korte tekstmeldinger.

For å indikere hvilken av de to dataoverføringsmetodene nettleseren skal bruke, i elementet bruk den angitte parameteren metode(For eksempel, method="post").

La oss se på det andre eksemplet. La oss lage et skjema der du må skrive inn dine personlige data (for- og etternavn, fødselsdato) og opprette et passord. Etterpå sender vi alt dette til serveren ved hjelp av metoden Post.

POST metode

Skriv inn din personlige informasjon!

For eksempel, for å legge inn en dato, er det brytere for nummeret til hver parameter (dag, måned og år), samt et rullegardinpanel med selve kalenderen for enkelhets skyld.

Opprette et registreringspanel

Grunnleggende tagger og attributter er dekket. Det er derfor det er på tide å lage et fullverdig registreringsskjema ved å bruke css-stilmarkering og validere de angitte dataene. Selvfølgelig vil vi ikke kunne se serveren fungere med dem, men designet og viktige detaljer vi vil gi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Registrering
registrering på siden

Navn:

Etternavn:

E-post:

Passord:

Gjenta passord:

Registrering

registrering på siden

For etterfølgende korrekt arbeid i vår tjeneste, vennligst oppgi korrekte data!

Navn:

Etternavn:

E-post:

Passord:

Gjenta passord:

Jeg råder deg til å spare denne koden programmer i et dokument med .html-utvidelsen og utf-8-koding, og åpne sistnevnte i et nettleservindu. Du vil se et registreringspanel i all sin prakt med felt for inntasting av fornavn, etternavn, e-post og gjentatt passord. Legg merke til at når du starter siden, blir markøren umiddelbart plassert i det første tekstfeltet. Denne teknikken oppnås gjennom attributtet autofokus.

Begynn å fylle ut feltene, la ett være uendret, og klikk på "Registrer"-knappen. Som du allerede har lagt merke til, vil ikke skjemaet sendes inn, siden hvert element < input> attributt spesifisert nødvendig. Den setter de merkede feltene som obligatoriske.

En til interessant poeng er en typeangivelse type="e-post", som dukket opp i . Ved bruk av denne typen felt kontrolleres automatisk den angitte informasjonen for korrekthet. Ved feil sendes ikke skjemaet til serveren.

Så utgivelsen har nådd slutten. I den prøvde jeg å samle maksimalt beløp viktig og relevant kunnskap om skjemaer. Jeg håper det var nyttig for deg! Jeg ville vært veldig takknemlig hvis du slutter deg til abonnentene mine og forteller vennene dine om bloggen.

Ha det!

Med vennlig hilsen, Roman Chueshov

Lese: 333 ganger

HTML-skjemaer er kontroller som brukes til å samle informasjon fra besøkende på nettstedet.

Nettskjemaer består av en samling tekstfelt, knapper, lister og andre kontroller som aktiveres med et museklikk. Teknisk sett sender skjemaer data fra brukeren til en ekstern server.

For å motta og behandle skjemadata, webprogrammeringsspråk som f.eks PHP, Perl.

Før bruken av HTML5 var nettskjemaer en samling av flere elementer , avsluttes med en knapp . Det tok mye arbeid å style skjemaer på tvers av forskjellige nettlesere. I tillegg krevde skjemaene JavaScript for å validere inndata og manglet spesifikke inndatafelttyper for å spesifisere daglig informasjon som datoer, e-postadresser og URL-er.

HTML5-skjemaer løst de fleste av disse vanlige problemene takket være tilstedeværelsen av nye attributter, som ga muligheten til å endre utseende formelementer pga CSS3.

Ris. 1. Forbedrede nettskjemaer med HTML5

Opprette et HTML5-skjema

1. Element

Grunnlaget for enhver form er elementet .... Det krever ingen inndata siden det er en beholder som holder alle skjemakontrollene sammen - Enger. Attributtene til dette elementet inneholder informasjon som er felles for alle skjemafelt, så felt som er logisk kombinert må inkluderes i ett skjema.

Tabell 1. Tag-attributter
Egenskap Betydning/beskrivelse
aksept-tegnsett Attributtverdien er et mellomrom atskilt liste over tegnkodinger, som vil bli brukt til å sende inn skjemaet, for eksempel, .
handling Obligatorisk attributt, som spesifiserer url-en til skjemabehandleren på serveren som dataene sendes til. Det er en fil (for eksempel action.php) som beskriver hva som må gjøres med skjemadataene. Hvis attributtverdien ikke er spesifisert, vil skjemaelementene få standardverdiene etter at siden er lastet inn på nytt.
Hvis alt arbeidet skal gjøres på klientsiden av JavaScript-skript, kan du spesifisere verdien # for handlingsattributtet.
Du kan også sørge for at skjemaet fylt ut av den besøkende sendes til deg på e-post. For å gjøre dette må du skrive inn følgende:
autofullfør

enctype Brukes til å indikere MIME-type data sendt sammen med skjemaet, for eksempel enctype="multipart/form-data" . Spesifisert kun i tilfelle av method="post" .
application/x-www-form-urlencoded - standard innholdstype, indikerer at dataene som overføres representerer en liste over URL-kodet danne variabler. Mellomromstegn (ASCII 32) vil bli kodet som + , og et spesialtegn som ! vil bli kodet i heksadesimal som %21 ​​.
multipart/form-data - brukes til å sende inn skjemaer som inneholder filer, ikke-ASCII-data og binære data, består av flere deler, som hver representerer innholdet i et eget skjemaelement.
text/plain - indikerer at ren (ikke html) tekst blir overført.
metode Angir hvordan skjemadata sendes inn.
Get-metoden sender data til serveren gjennom nettleserens adresselinje. Når du genererer en forespørsel til serveren, danner alle variabler og deres verdier en sekvens som www.anysite.ru/form.php?var1=1&var2=2 . Er variabelnavn og verdier lagt til serveradressen etter skiltet? og er atskilt med &. Alle Spesielle symboler og ikke-latinske bokstaver er kodet i formatet %nn, erstattes mellomrommet med +. Denne metoden bør brukes hvis du ikke overfører store mengder informasjon. Hvis du skal sende en fil sammen med skjemaet, vil ikke denne metoden fungere.
Postmetoden brukes til å sende store mengder data, samt konfidensiell informasjon og passord. Dataene som sendes ved hjelp av denne metoden er ikke synlige i URL-overskriften fordi de finnes i meldingens brødtekst.
Navn Settene skjemanavn, som vil bli brukt for å få tilgang til skjemaelementer via skript, for eksempel name="opros" .
novalidate Deaktiverer validering i knappen for innsending av skjema. Attributtet brukes uten å spesifisere en verdi
mål Angir vinduet som informasjonen skal sendes til:
_blank - nytt vindu
_selv - samme ramme
_parent — overordnet ramme (hvis den eksisterer, hvis ikke, så til den gjeldende)
_øverste vindu toppnivå i forhold til denne rammen. Hvis anropet ikke kommer fra en barneramme, så til samme ramme.

2. Gruppering av skjemaelementer

Element

...
designet for å gruppere elementer relatert til hverandre, og dermed dele formen inn i logiske fragmenter.

Hver gruppe med elementer kan navngis ved hjelp av elementet , som kommer rett etter taggen

. Gruppenavnet vises i øvre venstre kantlinje
. For eksempel hvis i et element
Kontaktinformasjon lagres:

Kontaktinformasjon


Ris. 2. Gruppering av skjemaelementer ved hjelp av

Tabell 2. Tag-attributter
Egenskap Betydning/beskrivelse
funksjonshemmet Hvis attributtet er til stede, er en gruppe relaterte skjemaelementer plassert inne i beholderen
, deaktivert for utfylling og redigering. Brukes til å begrense tilgangen til visse skjemafelt som inneholder tidligere innlagte data. Attributtet brukes uten å spesifisere en verdi -
.
form
i samme dokument. Angir en eller flere skjemaer den tilhører denne gruppen elementer. På dette øyeblikket attributtet støttes ikke av noen nettleser.
Navn Definerer Navn, som vil bli brukt til å referere til elementer i JavaScript, eller for å referere til skjemadata etter at skjemaet er fylt ut og sendt inn. Det er analogt med id-attributtet.

3. Opprett skjemafelt

Element oppretter de fleste skjemafelt. Et elements attributter varierer avhengig av hvilken type felt elementet brukes til å lage.

Ved å bruke CSS-stiler kan du endre skriftstørrelse, skrifttype, farge og andre tekstegenskaper, samt legge til kantlinjer, bakgrunnsfarge og bakgrunnsbilde. Bredden på feltet er spesifisert av width-egenskapen.

Tabell 3. Tag-attributter
Egenskap Betydning/beskrivelse
aksepterer Bestemmer hvilken type fil som kan sendes til serveren. Angitt kun for . Mulige verdier:
file_extension - lar nedlasting av filer fra spesifisert utvidelse, for eksempel aksept=".gif" , aksepter=".pdf" , aksepter=".doc"
audio/* - tillater nedlasting av lydfiler
video/* - tillater nedlasting av videofiler
image/* - lar innlasting av bilder
media_type - indikerer medietypen til de nedlastede filene.
alt Definerer alternativ tekst for bilder, kun angitt for .
autofullfør Ansvarlig for å huske verdiene som er lagt inn i tekstfeltet og automatisk erstatte dem neste gang du skriver dem inn:
på - betyr at feltet ikke er beskyttet og verdien kan lagres og hentes,
av - deaktiverer autofyll for skjemafelt.
autofokus Lar deg forsikre deg om at et eller annet inndatafelt allerede har fokus (har blitt valgt) i den innlastede formen, og er klar til å angi en verdi.
krysset av Attributtet sjekker om standardavmerkingsboksen er merket av ved sideinnlasting for felt som type="checkbox" og type="radio" .
funksjonshemmet
form Attributtverdien må være lik elementets id-attributt i samme dokument. Identifiserer ett eller flere skjemaer som dette skjemafeltet tilhører.
formasjon Spesifiserer nettadressen til filen som skal behandle dataene som legges inn i feltene når skjemaet sendes inn. Angis bare for feltene type="submit" og type="image" . Attributtet overstyrer verdien av handlingsattributtet til selve skjemaet.
formenctype Bestemmer hvordan skjemafeltdata skal kodes når de sendes til serveren. Overstyrer verdien til skjemaets enctype-attributt. Angis bare for feltene type="submit" og type="image" . Alternativer:
application/-x-www-form-urlencoded er standardverdien. Alle tegn kodes før sending (mellomrom erstattes med +-tegnet, spesialtegn konverteres til ASCII HEX-verdier)
multipart/form-data - tegn er ikke kodet
tekst/vanlig - mellomrom erstattes med +-symbolet, og spesialtegn er ikke kodet.
formmetode Attributtet spesifiserer metoden nettleseren vil bruke for å sende inn skjemadata til serveren. Angis bare for feltene type="submit" og type="image" . Overstyrer verdien av skjemaets metodeattributt. Alternativer:
get er standardverdien. Dataene fra skjemaet (navn/verdi-par) legges til url-en og sendes til serveren: URL?navn=verdi&navn=verdi
post - skjemadata sendes som en http-forespørsel.
formnovalidate Spesifiserer at skjemafeltdata ikke skal valideres når skjemaet sendes inn. Overstyrer verdien av skjemaets novalidate-attributt. Kan brukes uten å spesifisere en attributtverdi.
formatmål Bestemmer hvor svaret mottatt etter innsending av skjemaet skal vises. Angis bare for feltene type="submit" og type="image" . Overstyrer verdien av skjemaets målattributt.


_parent – ​​laster svaret inn i den overordnede rammen
_top – laster svaret i fullskjerm
rammenavn – laster svaret inn i en ramme med det angitte navnet.
høyde Attributtverdien inneholder antall piksler uten å spesifisere en måleenhet. Angir høyden på et skjemafelt av typen type="image" , for eksempel, . Det anbefales å stille inn både høyde og bredde på feltet samtidig.
liste Er en referanse til et element , inneholder sin id . Lar deg gi brukeren flere alternativer å velge mellom når han begynner å skrive inn en verdi i det tilsvarende feltet.
maks Lar deg begrense akseptabel numerisk dataregistrering maksimal verdi, kan attributtverdien inneholde et heltall eller et brøktall. Det anbefales å bruke dette attributtet sammen med min-attributtet. Fungerer med følgende typer felt: nummer, område, dato, datoklokkeslett, datoklokkelokalt, måned, klokkeslett og uke.
maks lengde Attributtet spesifiserer maksimalt antall tegn som legges inn i feltet. Standardverdien er 524288 tegn.
min Lar deg begrense tillatt numerisk inndata til en minimumsverdi.
flere Lar brukeren angi flere attributtverdier, atskilt med komma. Gjelder filer og e-postadresser. Spesifisert uten attributtverdi.
Navn Angir navnet som skal brukes for å få tilgang til elementet , for eksempel i tabeller css-stiler. Det er analogt med id-attributtet.
mønster Lar deg bestemme bruken vanlig uttrykk syntaksen til dataene som må tillates å legges inn i et bestemt felt. For eksempel, pattern="(3)-(3)" — firkantede parenteser angi rekkevidden av gyldige tegn, i i dette tilfellet- noen små bokstaver, nummer inn krøllete regulering indikerer at tre små bokstaver kreves, etterfulgt av en bindestrek, deretter tre tall fra 0 til 9.
plassholder Inneholder teksten som vises i inntastingsfeltet før den fylles ut (oftest er dette et verktøytips).
skrivebeskyttet Tillater ikke brukeren å endre verdiene til skjemaelementer; valg og kopiering av tekst er fortsatt tilgjengelig. Spesifisert uten attributtverdi.
nødvendig Viser en melding som indikerer at dette feltet er obligatorisk. Hvis brukeren prøver å sende inn skjemaet uten å angi ønsket verdi i dette feltet, vil en advarsel vises på skjermen. Spesifisert uten attributtverdi.
størrelse Angir den synlige bredden av feltet i tegn. Standardverdien er 20. Fungerer med følgende felttyper: tekst, søk, tel, url, e-post og passord.
src Angir nettadressen til bildet som brukes som innsendingsknapp for skjema. Angitt kun for feltet .
steg Brukes for elementer som krever input numeriske verdier, indikerer mengden som skal øke eller redusere verdier under justering av område (trinn).
type knapp - oppretter en knapp.
avkrysningsboks – gjør et inndatafelt til en avkrysningsboks som kan krysses av eller fjernes, f.eks.
jeg har en bil
farge - Genererer fargepaletter i støttende nettlesere, slik at brukere kan velge fargeverdier i heksadesimalt format.
dato — lar deg angi en dato i formatet dd.mm.åååå.
Fødselsdag:
datetime-local - lar deg angi dato og klokkeslett atskilt med store bokstaver Engelsk brev T etter mønsteret dd.mm.åååå tt:mm.
Fødselsdag - dag og tid:
e-post – Nettlesere som støtter dette attributtet vil forvente at brukeren legger inn data som samsvarer med syntaksen til e-postadresser.
E-post:
fil - lar deg laste ned filer fra brukerens datamaskin.
Velg Fil:
skjult - Skjuler kontrollen, som ikke vises av nettleseren og hindrer brukeren i å endre standardverdiene.
bilde - oppretter en knapp, slik at du kan sette inn et bilde i stedet for tekst på knappen.
måned – Lar brukeren angi år og månedsnummer ved å bruke mønsteret åååå-mm.
tall - beregnet for å legge inn heltallsverdier. Attributtene min , maks og trinn spesifiserer henholdsvis øvre, nedre grenser og trinn mellom verdier. Disse attributtene antas for alle elementer som har numeriske indikatorer. Standardverdiene deres avhenger av elementtypen.
Vennligst oppgi mengde (fra 1 til 5):
passord - oppretter tekstfelt i skjemaet, mens tegnene som er skrevet inn av brukeren erstattes med stjerner, kuler eller andre, installert av nettleseren ikoner.
Oppgi passord:
radio - lager en bryter - en kontroll i form av en liten sirkel som kan slås av eller på.
Vegetarisk:
rekkevidde - lar deg lage et grensesnittelement som en glidebryter, min / maks - lar deg angi utvalgsområdet
tilbakestill - oppretter en knapp som sletter skjemafelt for brukerangitte data.
søk - betegner et søkefelt, som standard er inndatafeltet rektangulært i form.
Søk:
send - lager en standardknapp som aktiveres med et museklikk. Knappen samler informasjon fra skjemaet og sender det til behandling.
tekst - Oppretter tekstfelt på et skjema, og skriver ut et enkeltlinjes tekstfelt for tekstinntasting.
tid - lar deg legge inn tid i 24-timers format ved å bruke tt:mm-mønsteret. I støttende nettlesere vises det som en kontroll som nummerfelt input med en verdi som kan endres med musen, og lar bare tidsverdier legges inn.
Spesifiser tid:
url – feltet er ment for å spesifisere URL-er.
Hjemmeside:
uke - Det tilsvarende pekerverktøyet lar brukeren velge én uke i året, hvoretter det vil gi datainntasting i nn-åååå-format. Avhengig av år kan antall uker være 52 eller 53.
Spesifiser uke:
verdi Bestemmer teksten som vises på en knapp, i et felt eller i tilknyttet tekst. Ikke spesifisert for felt av typen fil.
bredde Attributtverdien inneholder antall piksler. Lar deg angi bredden på skjemafeltene.

4. Tekstinntastingsfelt

Element brukes i stedet for element når du skal lage store tekstfelt. Teksten som vises som den opprinnelige verdien er plassert inne i taggen. Feltedimensjonene settes ved hjelp av attributtene cols - horisontale dimensjoner, rader - vertikale dimensjoner. Felthøyden kan stilles inn høyde eiendom. Alle størrelser beregnes basert på størrelsen på ett tegn i en monospace-font.

Tabell 4. Tag-attributter

7. Knapper

Element oppretter klikkbare knapper. I motsetning til opprettede knapper ( , , , ), inne i elementet .

Knapper lar brukere sende inn data til et skjema, slette skjemainnhold eller utføre andre handlinger. Du kan lage rammer, endre bakgrunnen og justere tekst på en knapp.

Tabell 9. Tag-attributter
Egenskap Betydning/beskrivelse
autofokus Setter fokus på knappen når siden lastes inn.
funksjonshemmet Deaktiverer knappen, slik at den ikke kan klikkes.
form Indikerer ett eller flere skjemaer som denne knappen tilhører. Attributtverdien er identifikatoren til det tilsvarende skjemaet.
formasjon Attributtverdien inneholder URL-en til skjemadatabehandleren som sendes når knappen klikkes. Bare for knapptype type="submit" . Overstyrer verdien til handlingsattributtet som er spesifisert for elementet .
formenctype Angir kodingstypen for skjemadata før de sendes til serveren når knapper som type="submit" klikkes. Overstyrer verdien til enctype-attributtet spesifisert for elementet . Mulige verdier:
application/x-www-form-urlencoded er standardverdien. Alle tegn vil bli kodet før sending.
multipart/form-data - tegn er ikke kodet. Brukes når filer lastes opp ved hjelp av et skjema.
tekst/vanlig - tegn er ikke kodet, og mellomrom erstattes med +-symbolet.
formmetode Attributtet spesifiserer metoden nettleseren skal bruke for å sende inn skjemaet. Overstyrer verdien til metodeattributtet som er spesifisert for elementet . Spesifisert kun for knapper av typen "submit". Mulige verdier:
get - data fra skjemaet (navn/verdi-par) legges til url og sendes til serveren. Denne metoden har begrensninger på størrelsen på dataene som sendes og er ikke egnet for sending av passord og konfidensiell informasjon.
post - data fra skjemaet legges til som en http-forespørsel. Metoden er mer pålitelig og sikker enn få og har ingen størrelsesbegrensninger.
formnovalidate Attributtet spesifiserer at skjemadata ikke skal valideres ved innsending. Spesifisert kun for knapper av typen "submit".
formatmål Attributtet spesifiserer i hvilket vindu resultatet skal vises etter innsending av skjemaet. Spesifisert kun for knapper av typen "submit". Overstyrer verdien til målattributtet som er spesifisert for elementet .
_blank - laster svaret inn i et nytt vindu/fane
_self - laster svaret inn i samme vindu (standard)
_parent – ​​laster svaret inn i den overordnede rammen
_top - laster svaret i fullskjerm
rammenavn - laster svaret inn i en ramme med det angitte navnet.
Navn Angir navnet på knappen, attributtverdien er tekst. Brukes til å lenke til skjemadata etter at skjemaet er sendt inn, eller til å lenke til denne knappen(knapper) i JavaScript.
type Definerer knappetypen. Mulige verdier:
knapp - klikkbar knapp
reset — tilbakestillingsknapp, returnerer den opprinnelige verdien
send - knapp for å sende inn skjemadata.
verdi Angir standardverdien som sendes når knappen klikkes.

8. Avmerkingsbokser og alternativknapper i skjemaer

Avmerkingsbokser i skjemaer settes ved hjelp av konstruksjonen , og bryteren - ved hjelp av .

Avmerkingsbokser, i motsetning til alternativknapper, kan settes til flere i én form. Hvis det avmerkede attributtet er spesifisert for avmerkingsbokser, vil avmerkingsboksene på de tilsvarende skjemafeltene allerede være valgt når siden lastes inn.

Element

stikkord (fra engelsk form- form) installerer et skjema på en nettside.

Skjemaet er beregnet for datautveksling mellom bruker og server. Anvendelsesområdet for skjemaer er ikke begrenset til å sende data til serveren; ved å bruke klientskript kan du få tilgang til ethvert element i skjemaet, endre det og bruke det etter eget skjønn.

Et dokument kan inneholde et hvilket som helst antall skjemaer, men bare ett skjema kan sendes til serveren om gangen. Av denne grunn må skjemadata være uavhengige av hverandre.

For å sende inn skjemaet til serveren, bruk Send-knappen, det samme kan oppnås ved å trykke på Enter-tasten i skjemaet. Hvis Send-knappen ikke er til stede på skjemaet, simulerer Enter-tasten bruken.

Når skjemaet sendes til serveren, overføres kontrollen av dataene til programmet spesifisert av elementets handlingsattributt . Nettleseren forbereder først informasjonen i form av et "navn=verdi"-par, hvor navnet bestemmes av elementets navnattributt , og verdien angis av brukeren eller satt til standard skjemafelt. Hvis GET-metoden brukes til å sende data, kan adresselinjen ha følgende form.

Http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Parametrene er oppført etter spørsmålstegn, spesifisert etter adressen til serverprogrammet og er atskilt med et og-tegn (&). Russiske bokstaver konverteres til heksadesimal representasjon (i formen %HH, der HH er heksadesimal kode for en ASCII-tegnverdi), erstattes mellomrommet med et pluss (+).

Tillatt inne i beholderen plasser andre elementer, mens selve skjemaet ikke vises på noen måte på nettsiden, er bare elementene inni det synlige.

Syntaks

...

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, nåværende side laster på nytt, og returnerer alle skjemaelementer 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, tall bankkort), samt sjelden innlagte 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 å innhente nødvendig informasjon og overføre data til 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 mer data enn det som er tilgjengelig få metode, siden innlegget ikke har en grense på 4Kb. 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