Använda Formulärfält

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 data som behövs.

Vanliga inmatningstyper

Textfält

Avsett för kort textinmatning, 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" />

Numeriskt inmatningsfält

Används för att samla in numeriska 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. Lämplig för situationer där flera val är tillåtna, till exempel 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, till exempel 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 tidpunkter.

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

Mata in något i fälten så kommer olika alternativ att föreslås. 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. Det är därför etiketter hjälper oss.