Basis van formulieren

Klik op het woord Email naast een goed gebouwd formulierveld en de cursor springt in het vak. Dat kleine detail is het label-element dat zijn werk doet.

Wat een formulier doet

Zoekvakken, aanmeldpagina's en afrekenschermen zijn allemaal formulieren. Een element <form> groepeert de invoerelementen, en als de bezoeker het verstuurt, stuurt de browser de name van elk element samen met zijn waarde naar het adres in het attribuut action van het formulier. Het attribuut method zegt hoe: get zet de gegevens in het adres, wat past bij zoekopdrachten die je misschien als bladwijzer bewaart, terwijl post ze in de body van het verzoek stuurt, wat past bij alles wat gegevens verandert, zoals een bestelling. HTML bouwt het formulier; een programma op de server beslist wat er met het ontvangene gebeurt.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Elk invoerelement heeft een label nodig

Het element <label> geeft een invoerelement een naam. Koppel de twee door de input een id te geven en het label een bijpassend attribuut for, of door de input in het label te zetten. De koppeling doet twee dingen. Schermlezers lezen het label voor als het veld focus krijgt, zodat de gebruiker Email, bewerkbare tekst hoort in plaats van alleen bewerkbare tekst. En klikken op het label zet de focus op het veld of vinkt het selectievakje aan, wat iedereen, vooral mensen op een telefoon, een groter doel geeft. Een placeholder (grijze hinttekst in het vak) is geen label: hij verdwijnt zodra je typt, heeft vaak weinig contrast en sommige hulptechnologie negeert hem.

Invoertypen

Het attribuut type van <input> verandert het invoerelement. text is het standaard enkelregelige vak. email, tel en url zien er hetzelfde uit maar tonen op telefoons een passend toetsenbord, en de browser controleert of een e-mailadres de juiste vorm heeft. number accepteert cijfers en kan min en max hebben. password verbergt wat je typt, date biedt een kalender, en checkbox en radio zijn vakjes om aan te vinken. Gebruik voor langere tekst <textarea> en voor een keuze uit een lijst <select> met <option>-elementen erin.

Keuzes groeperen

Keuzerondjes die bij één vraag horen, delen dezelfde name, en er kan er maar één tegelijk worden gekozen. Zet de groep in <fieldset> en de vraag in <legend>. Een schermlezer leest dan de vraag voor bij elke optie: Loaf size, Small, keuzerondje, 1 van 2. Elk keuzerondje krijgt nog steeds zijn eigen label.

Knoppen en ingebouwde controles

Een <button> in een formulier verstuurt het standaard; type="submit" schrijven maakt dat duidelijk, en type="button" maakt een knop die niets doet tot JavaScript hem een taak geeft. Voor het versturen kan de browser velden voor je controleren. required stopt het formulier als het veld leeg is, type="email" weigert tekst zonder @, en minlength, min en max stellen grenzen in. Deze controles helpen de bezoeker fouten vroeg te herstellen, maar ze draaien in de browser van de bezoeker en kunnen worden omzeild, dus de server moet de gegevens opnieuw controleren. Het attribuut autocomplete, met waarden als email of name, laat de browser opgeslagen gegevens invullen, wat voor iedereen typewerk bespaart en vooral mensen met motorische of geheugenproblemen helpt.