En trin-for-trin guide til at komme i gang med HTML-formularer

Oversigt

HTML-formularer er påkrævet, når du vil indsamle nogle data fra den person, der besøger dit websted. For eksempel, når du registrerer / logger ind på applikationer som Uber, Netflix eller Facebook, indtaster du oplysninger som navn , e-mail og adgangskode gennem HTML- formularer .

Nu lærer vi alle de nødvendige elementer til oprettelse af en formular.

BEMÆRK: Jeg har allerede tilføjet Styling ved hjælp af CSS, og så vil mine elementer se anderledes ud, men de fungerer nøjagtigt på samme måde.

Hvis du vil få dine elementer til at ligne mine, kan du finde min CSS-fil i nedenstående links:

Brugerdefineret CSS: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Normaliser CSS:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Formelement

Dette er det første element, som vi vil lære. Dette element indpakker alle de andre elementer, der kommer inden i vores form. Dette er formelementet.

Vores formular sender ikke dataene nogen steder, fordi de ikke er forbundet til en server. For at forbinde vores formular til en server og behandle vores data kan vi bruge ethvert sprog på serversiden som Node, Python, Ruby eller PHP. Den del af behandlingen af ​​dataene involverer to vigtige attributter, der er knyttet til formelementet. Lad os se på disse attributter.

Egenskaber:

  1. handling: Handlingsattributten er webadressen (URL) til et program, der behandler de oplysninger, der indsendes af vores formular.
  2. metode: Det er HTTP-metoden, som browseren bruger til at indsende formularen, de mulige værdier er POST og GET.
  • POST - Data fra formularens brødtekst sendes til serveren.
  • GET - Data sendes inde i URL'en, og parametre adskilles med et spørgsmålstegn.
Bemærk: Du kan ikke have indlejrede formularer i en anden form . Det betyder, at du ikke kan have et element inde i et andet element.

Inputelement

Inputelementet er det mest anvendte formelement. Det bruges til at oprette et tekstfelt, hvor brugeren kan skrive nogle oplysninger for eksempel e-mail , adgangskode osv.

Lad os oprette et tekstfelt, hvor brugeren kan skrive deres navn.

Bemærk: Inputelementet er et selvlukkende tag, så det er ikke nødvendigt at skrive et lukkemærke for at matche åbningstagget.

Jeg har tilføjet tre attributter i ovenstående inputtag. Lad os se nærmere på hver enkelt i detaljer.

type

Den typen attribut angiver hvilken form for input, vi ønsker. Hvis vi giver en tekstværdi til attributten type , er det, hvad vi her mener, at den værdi, som vi indtaster i indtastningsfeltet, er af typen tekst. Der er mange mulige værdier for denne særlige attribut. Nogle mulige værdier er e-mail, telefon for telefon og adgangskode osv.

Eksempel: Når du logger ind på en af ​​dine konti (Amazon / Netflix), skal du indtaste to ting: e-mail og adgangskode . Så i dette særlige tilfælde indgang bruges element. Det typen attribut er givet med værdien af e-mail og adgangskode hhv.

id

ID-attributten er ikke obligatorisk, men det er en god ide at tilføje en. I nogle tilfælde er dette nyttigt til målretning af elementer med CSS / JavaScript. ID-attributten tilføjes, så vi kan knytte etiketter til bestemte formkontroller .

navn

Navneattributten er nødvendig. Når en formular sendes til serversiden, kan serveren forstå formulardataene og behandle værdierne korrekt.

pladsholder

Det er et kort tip, der vises i indtastningsfeltet, før brugeren indtaster en værdi. Når brugeren begynder at skrive i indtastningsfeltet, forsvinder pladsholderen.

Lad os se, hvordan et par andre grundlæggende inputelementer ser ud.

Bemærk: Brug af forskellige værdier til typeattributten giver forskellige resultater. For eksempel kan du lave input af typen e-mail, tekst eller adgangskode osv. Alle viser lidt anderledes adfærd, som du vil se nedenfor.

Flere inputelementer (tekst, e-mail, adgangskode)

Flere inputelementer (tekst, e-mail, adgangskode)

Textarea Element

Nogle gange er en enkelt tekstlinje ikke nok, og et simpelt inputelement fungerer ikke. For eksempel har nogle websteder en kontaktformular, hvor folk kan skrive deres forespørgsler eller meddelelser. I disse tilfælde er det bedst at bruge textareaelementet.

Det ea> er ikke et selvlukkende tag, så vi er nødt til at skrive både åbnings- og lukkemærket. ()

Egenskaber:

  • id: Samme som nævnt ovenfor i element.
  • navn: Samme som nævnt ovenfor i element.
  • cols: Angiver den synlige bredde på et tekstområde.
  • rækker: Angiver det synlige antal linjer i et tekstområde.

Du kan se, at tekstområdet tillader os at indtaste flere linjer. Et tekstområde kan ændres af brugeren, du kan se i ovenstående illustration, at jeg ændrer størrelsen på tekstområdet.

Bemærk: I de fleste browsere kan tekstarea- elementet ændres.

Knapelement

Knapelementet er et af de vigtigste formelementer. Uden en knap kan du ikke sende nogen formular til serveren til behandling.

Knapelementet accepterer attributten kaldet type. Denne attribut accepterer tre værdier indsende , nulstil og knap .

Egenskaber:

  • type = ”reset”: Det rydder alle formulardata, når der klikkes på dem.
  • type = ”knap”: Den har ingen standardadfærd, og den bruges mest sammen med JavaScript til at programmere den til brugerdefineret adfærd .
  • type = ”send”: Standardadfærden for sendetypen er, som navnet antyder, indsende formularen og sende alle data til serveren.

Etiketelement

Lige nu er det umuligt for brugeren at fortælle, hvilken formularkontrol der gør hvad. Der er ingen måde at vide, hvor du vil indtaste e-mailen, og hvor du vil indtaste adgangskoden. Formularen ser meget ufuldstændig og rodet ud.

Vi kan mærke hver af vores formularkontroller ved hjælp af etiketelementet.

Den mest anvendte attribut med en etiket er til.

Egenskaber:

  • til: Den for attribut associerer mærket med en særlig form element. Den måde, det matcher, er efter ID . Som du kan se i ovenstående eksempel er værdien af ​​ID- attributten, der gives inputelementet, e-mail. Værdien af for- attributten, der er givet til etiketelementet, er også e-mail, så begge er tilknyttet hinanden.
Bemærk: Når vi klikker på etiketten, får vi automatisk fokus til det indtastningsfelt, der er knyttet til etiketten. Dette er en standardadfærd.

Nu ser vores form meget godt ud.

Vælg menuer

Nogle gange, når du opretter en formular, vil du ikke have, at brugeren skal kunne skrive teksten. I stedet for vil du måske have dem til at vælge blandt nogle forudindstillede muligheder, du giver .

Når som helst du har en liste over muligheder, der er længere end for eksempel fire eller fem ting, er det bedst at gå med valgmenuen, fordi det sparer plads.

Lad os sige, at vores formular er målrettet mod studerende, der skal søge optagelse på et universitet. Vi vil tillade studerende at vælge fra en foruddefineret liste over universitetsprogrammer.

Valg af menuelement oprettes ved at åbne og lukke ct> tag.

ct> - Det valgte element gengiver en drop-dow n-menu, der indeholder valgbare indstillinger . Det valgte element gør ikke noget i sig selv. Dette formelement har faktisk brug for yderligere elementer inde i det, nøjagtigt lig e

    ele mentets behov
  • elementer. De elementer, vi placerer inde i det valgte element kaldes optionselementer.

    Egenskaber:

    • navn: Samme som nævnt ovenfor i element.

    on> - Optionselementet repræsenterer et af de valg, som en bruger kan vælge i en menu, der vælges . Den & l t; option> elem ent anvender en attri bute c alled værdi.

    Egenskaber:

    • værdi: Når du sender en formular til serversiden, har hvert formelement en tilknyttet værdi for tekstinput og tekstområder. Denne værdi er uanset hvad brugeren skriver i feltet. Da vi opretter disse foruddefinerede muligheder, skal vi dog specificere, hvordan værdien skal se ud, når den sendes. Så vi bruger attributten værdi til at specificere værdierne til foruddefinerede muligheder.

    Nu har vi Select Courses-etiketten med den menu, som vi lige har oprettet. Nu kan vi også organisere vores liste i logiske grupper med op> element.

    Egenskaber:

    • label: Navnet på gruppen af ​​indstillinger. I eksemplet nedenfor er vores liste over muligheder opdelt i to grupper med etiketten Engineering and Management.

    I eksemplet nedenfor

    Radioknapper

    Vælg menuer er gode, hvis du har mange muligheder. Hvis du har noget som 5 eller færre muligheder, er det bedre at bruge radioknapper.

    Forskellen mellem Select Menu og Radio Button er, at radioknapperne viser dig alle mulighederne på én gang. Ligesom valgmenuen kan brugeren kun vælge fra en af ​​dem.

    Egenskaber:

    • navn: Samme som nævnt ovenfor i element.
    • værdi: Da vi opretter disse foruddefinerede muligheder, skal vi specificere, hvordan værdien skal se ud, når den sendes. Så vi bruger attributten værdi til at specificere værdierne til foruddefinerede muligheder.
    Bemærk: Hvis du vælger en mulighed og derefter prøver at vælge en anden mulighed, ser du, at den fravælger den forrige mulighed. Den måde, at den ved, at gøre det er, fordi vi har den navnet attribut nøjagtig samme. Så det ved, at disse to radioknapper er en del af den samme gruppe. Bemærk: Navnet skal være det samme, hvis vi ønsker, at radioknapperne skal være en del af den samme radioknapgruppe.

    Afkrydsningsfelter

    Nogle gange har du muligvis en gruppe foruddefinerede muligheder. Du vil have, at brugeren skal kunne vælge flere muligheder og ikke kun en af ​​dem. Det er her, afkrydsningsfelter er nyttige.

    Egenskaber:

    • navn: Samme som nævnt ovenfor i element.
    • værdi: Da vi opretter disse foruddefinerede muligheder, skal vi specificere, hvordan værdien skal se ud, når den sendes. Så vi bruger attributten værdi til at specificere værdierne til foruddefinerede muligheder.
    • afkrydset: Som standard er et afkrydsningsfelt ikke markeret. Du kan indstille standardtilstanden til kontrolleret ved hjælp af attributten kaldet markeret . Husk, at dette er en boolsk egenskab.

    I eksemplet nedenfor har jeg brugt etiketten til hver enkelt mulighed. Jeg har tilsluttet afkrydsningsfeltet og en etiket ved hjælp af for- attributten for etiket og id- attribut i afkrydsningsfeltet .

    Bemærk: Det kan være svært at klikke på et lille afkrydsningsfelt. Det anbefales at pakke et element rundt i afkrydsningsfeltet. Hvis vi klikker på etiketten, bliver vores afkrydsningsfelt også markeret eller ikke markeret. Jeg har ikke gjort det nedenfor, men du kan gøre det for at gøre UX b efter.

    Forskel mellem afkrydsningsfelt og radioknap

    1. Afkrydsningsfelt kan eksistere alene , mens radioknapper kun kan vises som en gruppe (mindst 2 radioknapper skal være der).
    2. Valg af afkrydsningsfelt er valgfrit, men det er obligatorisk at vælge en af ​​alternativknappen .

    Den komplette formular

    Vi har lært om masser af HTML-formelementer og har dækket det væsentlige.

    Bare rolig for at huske alt. Næsten ingen professionel webudvikler kan navngive hver attribut eller element. Hvad der er vigtigere end huskning er at lære at slå tingene op i dokumentationen, når du har brug for dem.

    Du kan prøve at tilføje din egen CSS for at få denne formular til at se ud, som du vil have den til at se ud.

    Du kan lære mere om formularer i nedenstående link

    HTML-formularer

    Dette modul indeholder en række artikler, der hjælper dig med at mestre HTML-formularer. HTML-formularer er et meget kraftfuldt værktøj til ... developer.mozilla.org

    Jeg håber, du har fundet dette indlæg informativt og nyttigt. Jeg vil meget gerne høre din feedback!

    Tak fordi du læste!