HTML <form>-elementet är en grundläggande byggsten för att skapa interaktiva formulär på en webbsida. Det fungerar som en behållare för alla formulärelement. Låt oss utforska ett exempel på ett grundläggande formulär:

Notera

Alla exempel inkluderar attributet onsubmit="return false" för att förhindra standardbeteendet för formulärinlämning. På så sätt förblir fokus på att förstå formulärskapande och attribut.

Förklaring av form-attributen:

• name ger ett unikt identifierare för formuläret på en webbsida. Både servern och klienten använder denna identifierare för att bearbeta formulärdata. Formulärnamnet kan innehålla siffror, understreck, bindestreck och engelska alfabetets tecken, men det får inte innehålla några mellanslag;

• autocomplete bestämmer om webbläsare kan fylla i formulärfält automatiskt. Det kan ställas in på "on" eller "off" och tillämpas på enskilda formelement;

• novalidate specificerar att webbläsare inte ska utföra validering av formulärfält. Detta kan vara användbart när du vill hantera validering manuellt med JavaScript;

• method specificerar HTTP-metoden som används för att skicka formulärdata till servern. De två vanligaste metoderna är GET och POST. Detta ämne kommer att behandlas mer ingående i JavaScript-kursen.

Översikt över barn-element inom ett formulär

Inuti form-elementet hittar du olika barn-element som är viktiga för formulärets funktionalitet. input-elementet tillåter användare att ange olika datatyper, såsom text, siffror och datum. I detta exempel används type="email" för e-postfältet och type="password" för lösenordsfältet. label-elementet organiserar och strukturerar formuläret, ger beskrivande text för inmatningsfält och hjälper användare att förstå deras syften. Knapp-elementet med type="submit" används för att skicka formulärdata till servern när det klickas på. Som standard laddar formuläret om webbsidan när det skickas, men detta beteende kan anpassas med JavaScript.