Hur man skapar ett HTML-formulär (exempel förklaras)

Formulär används för att samla in data från användare, såsom kontaktinformation, eller för att tillåta användare att interagera med webbplatsen, såsom att kommentera eller utföra sökningar. I den här artikeln kommer vi att lära oss hur du skapar ett grundläggande formulär med HTML.

Struktur för ett HTML-formulär

Ett HTML-formulär skapas med taggen. Inom den här taggen kan du ha en mängd olika inmatningselement, såsom textfält, knappar, kryssrutor, alternativknappar och mer.

ingångselement går här

Inmatningselement

Textfält

Textfält skapas med taggen med attributet typ pålagd text. Till exempel:

Namn:




Telefon

Elementet används för inmatningsfält för telefonnummer.

Telefon:


Datum

Elementet används för att välja ett datum.

Födelsedatum:


Lösenord

Elementet används för lösenordsinmatningsfält. Text som skrivs in i det här fältet visas som punkter för att dölja lösenordet.

Lösenord:


Arkiv

Elementet används för att låta användaren välja en fil från sitt lokala filsystem.

Ladda upp fil:


Kryssruta

Elementet används för inmatningsfält som låter användaren välja inget, ett eller flera alternativ.

Jag accepterar villkoren

Radio

Elementet används för inmatningsfält som låter användaren välja ett alternativ från en uppsättning alternativ.

Kön:

Man

Kvinnor

siffra

Elementet används för numeriska inmatningsfält.

Belopp:


Räckvidd

Elementet används för inmatningsfält som måste innehålla ett värde från ett värdeintervall.

Volym:




Knappar

Knappar skapas med taggen med attributet typ pålagd Skicka in. Den här knappen skickar formulärdata när den trycks ned. Till exempel:

Namn:




Hantera formulärinmatning

När du trycker på knappen Skicka skickas formulärdata in för bearbetning. Detta görs genom en av två metoder: GET eller POST, som specificeras med hjälp av attributet metod I etiketten .

GET-metoden

GET-metoden skickar formulärdata som en del av URL: en. Det är användbart för saker som sökningar, där formulärdata inte är känsliga. Denna metod har dock begränsningar när det gäller längden på data som kan skickas.

ingångselement går här

POST-metoden

POST-metoden skickar formulärdata separat från URL: en. Detta är säkrare och kan hantera en mycket större mängd data, så det används för saker som kontakt- eller inloggningsformulär.

ingångselement går här

I båda fallen, attributet handling används för att ange URL: en för skriptet på serversidan som ska bearbeta formulärdata.

HTML-formulärexempel med alla element 

Här är ett formulär som använder alla element som vi har granskat i den här artikeln:

Anmälningsblankett

Namn:



Efternamn:



E-post:



Telefon:



Födelsedatum:



Lösenord:



Ladda upp fil:



Jag accepterar villkoren


Kön:

Man

Kvinnor

Belopp:



Volym:




Detta formulär har fält för förnamn, efternamn, e-post, telefon, födelsedatum, lösenord, ett fält för att ladda upp en fil, en kryssruta för villkor, radioapparater för att välja kön och antal och intervall för kvantitet och volym, respektive.

"Skicka"-knappen i slutet är den som skulle ansvara för att skicka formuläret till den URL som anges i attributet handling Av etiketten form (i det här fallet "/submit_form"). För att det här formuläret ska fungera på en riktig webbplats måste du ha en server konfigurerad för att ta emot och bearbeta informationen från detta formulär i sökvägen "/submit_form".