Textarea, select og andre form-controls

Hvis du kun husker én ting: Brug textarea og select, når opgaven ikke passer til et almindeligt input.

Når <input> ikke er nok

<input> er vigtigt, men det kan ikke løse alt alene.

Nogle gange skal brugeren skrive længere tekst, og andre gange skal brugeren vælge én mulighed fra en liste. Her giver andre form-controls mere mening.

Textarea

<textarea> bruges til længere tekst, fx kommentarer eller beskeder.

<label for="comment">Kommentar</label>
<textarea id="comment" name="comment"></textarea>

Det er stadig et formularfelt, men det er bedre egnet til flere linjer tekst end et almindeligt input. Læg mærke til, at det ikke har en type-attribut som <input>, og at det har en åbnings- og lukketag, hvor teksten skal stå imellem.

Select

<select> bruges når brugeren skal vælge mellem et fast sæt muligheder.

<label for="pet-select">Yndlingsdyr</label>
<select id="pet-select" name="pet">
  <option value="">--Vælg et dyr--</option>
  <option value="dog">Hund</option>
  <option value="cat">Kat</option>
</select>

Det er en god løsning, når mulighederne er kendte på forhånd, og du gerne vil undgå fritekst. Typisk bruges det til ting som lande, sprog eller andre kategorier, hvor det giver mening at vælge fra en liste.

Senere i JavaScript

Når du senere arbejder med formularer i JavaScript, er det værd at huske, at textarea og select stadig bare er almindelige formularfelter.

Hvis de har et name, kan deres værdier også samles op med fx FormData. Så det du lærer her i HTML-delen, bliver genbrugt senere, når formularen skal læses i JavaScript.

Andre form-controls

type="color" giver en farvevælger, som man kan bruge til at vælge en farve.

type="range" giver en slider, som man kan bruge til at vælge en værdi inden for et interval.

Spot fejlene

Afslutningsøvelse af “Forms i HTML”

Når du bliver mere vant til formularer, bliver det også lettere at se, hvad der mangler:

• er der en label?
• har feltet den rigtige type?
• burde det være en textarea eller et select i stedet?
• giver strukturen mening?

Det er en vigtig del af at lære HTML: ikke kun at kunne skrive det rigtige, men også at kunne opdage det forkerte.

Anvend din viden i denne lille fejlfindingsøvelse, hvor du skal finde og rette fejl i en formular. Når du har selv har forsøgt at finde fejlene, kan du til sidst se, hvordan det burde se ud ved at klikke “Vis robust version”. Det er en god måde at træne øjet til at spotte både små og store fejl i formularer.