Sådan opretter du en HTML-formular (eksempler forklaret)

Formularer bruges til at indsamle data fra brugere, såsom kontaktoplysninger, eller til at give brugere mulighed for at interagere med webstedet, såsom at skrive kommentarer eller udføre søgninger. I denne artikel lærer vi, hvordan du opretter en grundlæggende formular ved hjælp af HTML.

Struktur af en HTML-formular

En HTML-formular oprettes ved hjælp af tagget. Inden for dette tag kan du have en række forskellige input-elementer, såsom tekstfelter, knapper, afkrydsningsfelter, alternativknapper og mere.

input-elementer gå her

Input elementer

Tekstfelter

Tekstfelter oprettes ved hjælp af tagget med attributten type lagt på tekst. For eksempel:

Navn:




telefon

Elementet bruges til indtastningsfelter for telefonnummer.

Telefon:


Dato

Elementet bruges til at vælge en dato.

Fødselsdato:


Adgangskode

Elementet bruges til adgangskodeindtastningsfelter. Tekst, der indtastes i dette felt, vises som prikker for at skjule adgangskoden.

Adgangskode:


Arkiv

Elementet bruges til at give brugeren mulighed for at vælge en fil fra deres lokale filsystem.

Upload fil:


Afkrydsningsfelt

Elementet bruges til inputfelter, der giver brugeren mulighed for at vælge ingen, én eller flere muligheder.

Jeg accepterer betingelserne

Radio

Elementet bruges til inputfelter, der giver brugeren mulighed for at vælge én mulighed fra et sæt af muligheder.

Køn:

Mand

Kvinder

Nummer

Elementet bruges til numeriske indtastningsfelter.

Beløb:


Rækkevidde

Elementet bruges til inputfelter, der skal indeholde en værdi fra en række værdier.

Bind:




Knapper

Knapper oprettes ved hjælp af tagget med attributten type lagt på Indsend. Denne knap vil, når den trykkes, indsende formulardataene. For eksempel:

Navn:




Håndtering af formularinput

Når der trykkes på indsend-knappen, sendes formulardataene til behandling. Dette gøres gennem en af ​​to metoder: GET eller POST, som specificeres ved hjælp af attributten metode I etiketten .

GET metode

GET-metoden indsender formulardataene som en del af URL'en. Det er nyttigt til ting som søgninger, hvor formulardataene ikke er følsomme. Denne metode har dog begrænsninger med hensyn til længden af ​​data, der kan sendes.

input-elementer gå her

POST metode

POST-metoden indsender formulardataene adskilt fra URL'en. Dette er mere sikkert og kan håndtere en meget større mængde data, så det bruges til ting som kontakt eller login-indsendelser.

input-elementer gå her

I begge tilfælde er attributten handling bruges til at angive URL'en på serversidescriptet, der skal behandle formulardataene.

HTML-form eksempel med alle elementer 

Her er en formular, der bruger alle de elementer, vi har gennemgået i denne artikel:

Tilmeldingsblanket

Navn:



Efternavn:



E-mail:



Telefon:



Fødselsdato:



Adgangskode:



Upload fil:



Jeg accepterer betingelserne


Køn:

Mand

Kvinder

Beløb:



Bind:




Denne formular har felter for fornavn, efternavn, e-mail, telefon, fødselsdato, adgangskode, et felt til at uploade en fil, et afkrydsningsfelt for vilkår og betingelser, radioer til at vælge køn og antal og rækkevidde felter for mængde og volumen, henholdsvis.

"Send"-knappen i slutningen er den, der vil være ansvarlig for at indsende formularen til den URL, der er angivet i attributten handling Af etiketten form (i dette tilfælde "/submit_form"). For at denne formular kan fungere på et rigtigt websted, skal du have en server konfigureret til at modtage og behandle oplysningerne fra denne formular i "/submit_form"-stien.