Summary  
This chapter explores various HTML input types and their attributes for collecting and validating user data, including email, password, numeric ranges, telephone numbers, selection controls, and date/time pickers.

General domain of usage  
Web form development

HTML tilbyder mange `<input>`-typer, der gør det muligt at indsamle forskellige former for brugerdata. Nedenfor ses et overblik over de mest almindelige typer.

## E-mail og adgangskode
- `type="email"`: accepterer e-mailadresser og udfører grundlæggende browser-validering;
- `type="password"`: skjuler de indtastede tegn af sikkerhedsmæssige årsager og kan bruge `minlength` og `maxlength`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBFbWFpbCBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0ibWFpbCIgLz4KICAKICA8IS0tIFBhc3N3b3JkIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIC8+CiAgCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Tal
`type="number"`: accepterer numeriske værdier. Brug `min`, `max` og `step` for at kontrollere det tilladte interval.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0ieWVhciI+WWVhciBvZiBiaXJ0aDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9Im51bWJlciIgbWluPSIxOTAwIiBtYXg9IjIwMjMiIGlkPSJ5ZWFyIiAvPgoKICA8bGFiZWwgZm9yPSJoZWlnaHQiPkhlaWdodCB3aXRoIDAuMSBzdGVwPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0ibnVtYmVyIiBpZD0iaGVpZ2h0IiBzdGVwPSIwLjEiIG1pbj0iMC4xIiBtYXg9IjEwLjAiIC8+CgogIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KPC9mb3JtPg==

## Telefon
`type="tel"`: til telefonnumre. Ingen indbygget validering. Udviklere validerer det manuelt.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icGhvbmUiPlBob25lIG51bWJlcjo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZWwiIGlkPSJwaG9uZSIgLz4KCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Afkrydsningsfelt
`type="checkbox"`: muliggør valg af flere muligheder. Brug `checked` for at forudvælge.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIHNlYXNvbj88L3A+CiAgPGxhYmVsPgogICAgV2ludGVyCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9IndpbnRlciIgdmFsdWU9IndpbnRlciIgY2hlY2tlZCAvPgogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgU3ByaW5nCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InNwcmluZyIgdmFsdWU9InNwcmluZyIgLz4KICA8L2xhYmVsPgogIDxsYWJlbD4KICAgIFN1bW1lcgogICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBuYW1lPSJzdW1tZXIiIHZhbHVlPSJzdW1tZXIiIC8+CiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICBGYWxsCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9ImZhbGwiIHZhbHVlPSJmYWxsIiAvPgogIDwvbGFiZWw+CjwvZm9ybT4=

## Radio
`type="radio"`: vælger én mulighed fra en gruppe. Alle radio-knapper skal dele det samme `name`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIGZvb2Q/PC9wPgogIDxsYWJlbD4KICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0iZGlzaCIgdmFsdWU9InBhc3RhIiBjaGVja2VkIC8+CiAgICBQYXN0YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0icGl6emEiIC8+CiAgICBQaXp6YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0iYnVyZ2VyIiAvPgogICAgQnVyZ2VyCiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImRpc2giIHZhbHVlPSJzdGVhayIgLz4KICAgIFN0ZWFrCiAgPC9sYWJlbD4KPC9mb3JtPg==

## Range Slider
`type="range"`: en skyderkontrol til valg af et tal inden for et interval. JavaScript-logik udelades i dette kursus.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0iZGF5Ij5EYXkgb2YgdGhlIHdlZWs8L2xhYmVsPgogIDxpbnB1dCBpZD0iZGF5IiB0eXBlPSJyYW5nZSIgdmFsdWU9IjUiIG1pbj0iMSIgbWF4PSI3IiBzdGVwPSIxIiAvPgo8L2Zvcm0+CjxwPlNlbGVjdGVkIHZhbHVlOiA8c3BhbiBjbGFzcz0ic2VsZWN0ZWQtdmFsdWUiPjU8L3NwYW4+PC9wPgo8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0Pg==

Y29uc3QgcmFuZ2VJbnB1dCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0W3R5cGU9InJhbmdlIl0nKTsKY29uc3Qgb3V0cHV0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnNlbGVjdGVkLXZhbHVlJyk7CnJhbmdlSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBlID0+IChvdXRwdXQudGV4dENvbnRlbnQgPSBlLnRhcmdldC52YWx1ZSkpOw==

JavaScript-logik er udeladt i dette kursus.

Bemærk

## Dato og tid
- `type="date"`: kalendervælger;
- `type="time"`: tidsvælger;
- `type="datetime-local"`: kombinerer tids- og datovælgere.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBEYXRlIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9ImRhdGUiPkRhdGU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRlIiBtaW49IjE5NzAtMDEtMDEiIG1heD0iMjA3MC0wMS0wMSIgaWQ9ImRhdGUiIC8+CgogIDwhLS0gVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJ0aW1lIj5UaW1lPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGltZSIgaWQ9InRpbWUiIC8+CgogIDwhLS0gRGF0ZSBhbmQgVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJmdWxsLXRpbWUiPkRhdGUgYW5kIFRpbWU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRldGltZS1sb2NhbCIgbWluPSIxOTAwLTAxLTAxVDAwOjAwIiBtYXg9IjIwMDAtMDEtMDFUMDA6MDAiIGlkPSJmdWxsLXRpbWUiIC8+CjwvZm9ybT4=

For ensartet styling bruger udviklere ofte færdige UI-biblioteker i stedet for browserens standardvælgere.

Du har måske bemærket, at når du forsøger at udfylde visse felter, kan browseren allerede foreslå nogle autofyldningsmuligheder. Browseren husker de værdier, du har indtastet i felter, og foreslår dem derefter til dig for automatisk udfyldning.

Læs mere

Hvad er den primære forskel mellem inputfelterne `type="email"` og `type="password"`?

Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.

Udforsk internettets indre funktioner. Lær hvordan data rejser over netværk, opdag protokollernes rolle, og afslør mysterierne bag IP-adresser og domænenavne. Få en overordnet forståelse af, hvordan webbrowsere og servere kommunikerer for at levere webindhold.

Opdag kraften i tags til at strukturere indhold, fra overskrifter og afsnit til lister og tabeller. Lær hvordan du forbedrer elementerne med attributter.

Kernen i HTML-dokumentstrukturen. Lær komponenterne i et HTML-dokument, inklusive doctype-deklarationen, head og body. Forstå formålet med hvert element, og hvordan de bidrager til den overordnede struktur af en webside.

Gør en webside mere attraktiv ved hjælp af medier som billeder, lyd og video. Arbejd med strukturerede tabeldata i form af tabeller.

Udforsk alsidigheden af HTML-formularer. Lær at designe intuitive og brugervenlige formularer ved at udnytte nøglekoncepter og teknikker. Opdag, hvordan formularer muliggør brugerinteraktion og dataindsendelse på hjemmesider.

Undersøgelse af Forskellige Inputtyper i HTML

E-mail og adgangskode

Tal

Telefon

Afkrydsningsfelt

Radio

Range Slider

Dato og tid