HTML-elementet <input> aer grundkomponenten foer att samla in anvaendardata i webbformulaer.
Input-Typer
Textuella och Semantiska Typer
| Typ | Beskrivning |
|---|---|
text |
Enkelradig vanlig text |
password |
Maskerat loesenordsfaelt |
email |
E-postadress med automatisk webblaesarvalidering |
url |
Inmatning av absolut URL |
tel |
Telefonnummer (oeppnar siffertangentbord i mobilen) |
search |
Soekfaelt med rensningsknapp |
Numeriska och Kvantitativa Typer
| Typ | Beskrivning |
|---|---|
number |
Numeriskt stegfaelt (min, max, step) |
range |
Skjutreglage foer ungefaerligt vaerde |
Datum- och Tidstyper
| Typ | Beskrivning |
|---|---|
date |
Kalenderdatumvaeljare (aar, maanad, dag) |
time |
Tidsvaeljare (timmar, minuter) |
datetime-local |
Lokal tid och datum utan tidszon |
month |
Aar- och maanadsvaeljare |
week |
Aar- och ISO-veckonummervaeljare |
Urval och Atgaerder
| Typ | Beskrivning |
|---|---|
checkbox |
Kryssruta foer booleskt val eller flerval |
radio |
Enskilt val inom en namngiven radiogrupp |
color |
Faergvaeljarpalett |
file |
Filuppladdning (accept, multiple) |
hidden |
Dolt vaerde som skickas med formulaeret |
submit |
Skicka-knapp foer formulaeret |
reset |
Aaterstaellningsknapp till standardvaerden |
button |
Allmaen klickbar knapp |
Viktiga Valideringsattribut
| Attribut | Beteende |
|---|---|
required |
Foerhindrar inskickning om faeltet aer tomt |
pattern="[A-Za-z0-9]+" |
Regulaert uttryck (Regex) som vaerdet maaste matcha |
min="1" max="100" |
Minsta och stoersta tillaatna vaerden |
step="0.5" |
Giltigt stegintervall foer tal |
minlength="5" maxlength="20" |
Minsta och stoersta teckenlaengd |
placeholder="..." |
Hjaelptext som foersvinner vid inmatning |
readonly |
Foerhindrar aendring men vaerdet skickas |
disabled |
Inaktiverar faeltet och utesluter vaerdet |
autofocus |
Fokuserar faeltet automatiskt vid sidladdning |
Komplett Formulaerexempel
<form action="/api/submit" method="POST">
<label for="user-email">E-postadress:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Lösenord (minst 8 tecken):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Ålder:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Jag godkänner användarvillkoren
</label>
<input type="submit" value="Registrera" />
</form>