Formulärfält är det huvudsakliga sättet för användare att ange information. HTML erbjuder många olika typer av inmatningsfält beroende på vilken typ av data som behövs.

Vanliga inmatningstyper

Textfält

Avsett för korta textdata, såsom användarnamn, e-postadresser eller korta meddelanden.

<input type="text" />

Lösenordsfält

Används för lösenordsinmatning, där tecken maskeras av säkerhetsskäl.

<input type="password" />

E-postfält

Används för att samla in e-postadresser från användare. Utför klientbaserad validering för att säkerställa att det angivna värdet har giltigt e-postformat.

<input type="email" />

Telefonnummerfält

Används för att samla in telefonnummer från användare.

<input type="tel" />

Nummerinmatning

Används för att samla in numerisk data från användare. Visar ett numeriskt tangentbord på mobila enheter.

<input type="number" />

Kryssruta

Möjliggör för användare att välja ett eller flera alternativ från en lista med val. Lämplig för situationer där flera val är tillåtna, såsom att välja flera objekt från en lista eller godkänna villkor.

<input type="checkbox" />

Alternativknapp

Möjliggör för användare att välja ett alternativ från en lista med ömsesidigt uteslutande val. Lämplig för situationer där endast ett alternativ ska väljas, såsom könsval eller val av betalningsmetod.

<input type="radio" />

Filinmatning

Möjliggör för användare att ladda upp filer från sin enhet, välja från det lokala filsystemet och skicka dem med formulärdata. Denna funktion är särskilt användbar vid bifogning av dokument eller bilder.

<input type="file" />

Datumfält, Tidsfält och Datum-tid-fält

Möjliggör för användare att ange datum, tider eller båda. Ger användarvänliga gränssnitt för att välja datum och tider.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Mata in något i fälten så kommer de att föreslå olika alternativ. Ingen data kommer att samlas in.

Du har kanske märkt att det inte är särskilt bekvämt att fylla i formuläret när du inte förstår vad som efterfrågas i varje fält. Därför hjälper etiketterna oss.