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

HTML-form

Oversigt

HTML-formularer kræves, når du vil indsamle nogle data fra den person, der besøger dit websted. Når du f.eks. Registrerer / logger på applikationer som Uber, Netflix eller Facebook, indtaster du oplysninger som Navn, E-mail og Adgangskode via HTML-formularer.

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

BEMÆRK: Jeg har allerede tilføjet stylingen ved hjælp af CSS, så mine elementer ser forskellige ud, men de fungerer på nøjagtig samme måde.
Hvis du vil have dine elementer til at ligne mine, kan du finde min CSS-fil i nedenstående links:
Tilpasset CSS: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Normaliser CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Formelement

Dette er det første element, som vi lærer. Dette element indpakker alle de andre elementer, der går ind i vores form. Dette er formelementet.

Vores formular sender ikke dataene overalt, fordi de ikke er forbundet til en server. For at forbinde vores form 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) for et program, der behandler de oplysninger, der er indsendt 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 krop sendes til serveren.
  • GET - Data sendes inden i URL'en, og parametre adskilles med et spørgsmålstegn.
Bemærk: Du kan ikke have formularer indlejret i en anden form. Det betyder, at du ikke kan have et
-element inde i et andet -element.

Inputelement

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

Lad os lave et tekstfelt, hvor brugeren kan indtaste deres navn.

Bemærk: Inputelementet er et selvlukkende tag, så der er ikke behov for at indtaste et lukningskode, der matcher åbningskoden.

Jeg har tilføjet tre attributter i ovennævnte input-tag. Lad os se på detaljerede på hver enkelt.

type

Typeattributten angiver, hvilken type input vi ønsker. Hvis vi giver en tekstværdi til typeattributten, end hvad vi her mener, er, at den værdi, som vi indtaster i inputfeltet, er af typen tekst. Der er mange mulige værdier for denne specifikke attribut. Nogle mulige værdier er e-mail, tlf 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. I dette særlige tilfælde bruges inputelementet. Typeattributten gives med værdien af ​​henholdsvis e-mail og adgangskode.

id

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

navn

Navn attributten er nødvendig. Når en formular indsendes til serversidekoden, kan serveren forstå formdataene og behandle værdierne korrekt.

pladsholder

Det er et kort tip, der vises i inputfeltet, før brugeren indtaster en værdi. Når brugeren begynder at skrive i inputfeltet, 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 indtaste en type e-mail, tekst eller adgangskode osv. Alle viser en lidt anden opførsel, som du vil se nedenfor.

Flere inputelementer (tekst, e-mail, adgangskode)

Flere inputelementer (tekst, e-mail, adgangskode)

Inputelementer uden attribut for pladsholder (venstre) & med pladsholder (højre)

Textarea-element

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