Som vi har sett tidigare är det mest kraftfulla elementet i ett formulär input. Detta element förväntar sig data från användaren. Låt oss fokusera på det.

Typer av input

Textinmatning

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

<input type="text" />

Lösenordsinmatning

Används för lösenordsinmatning där tecken maskeras av säkerhetsskäl. Säkerställer sekretess genom att dölja de inmatade tecknen.

<input type="password" />

E-postinmatning

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 inmatade värdet har giltigt e-postformat.

<input type="email" />

Telefoninmatning

Används för att samla in telefonnummer från användare. Tillåter användare att ange telefonnummer i olika format, inklusive internationella nummer.

<input type="tel" />

Numerisk inmatning

Används för att samla in numeriska data från användare. Ger ett numeriskt tangentbord på mobila enheter för enkel inmatning.

<input type="number" />

Kryssruta

Tillåter 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" />

Radioknapp

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" />

Filuppladdning

Möjliggör för användare att ladda upp filer från sin enhet, välja från sitt lokala filsystem 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. Användbart för att samla in födelsedatum, bokningstider eller evenemangsscheman.

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

Exempel: Skriv något i fälten, så kommer olika alternativ att föreslås. Oroa dig inte; ingen data kommer att samlas in.

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

Etiketter

Etiketter (<label>) är avgörande för att koppla textetiketter till formulärfält, vilket förbättrar tillgänglighet och användarvänlighet. Det är viktigt att for-attributet i <label> -taggen matchar id -attributet i det associerade input -elementet.
Exempel:

<label for="username">Username:</label>
<input type="text" id="username" />

I exemplet ovan:

• När du klickar på etiketten Username:, fokuseras automatiskt motsvarande inmatningsfält;
• label och input är kopplade med hjälp av attributen for och id;
• Både for och id har samma värde (username).

Gör det enklare att fylla i formuläret genom att lägga till etiketter till inmatningsfälten från det tidigare exemplet.
Exempel:

Videohandledning