How to structure an HTML form

Formulieren zijn een van de meest complexe structuren in HTML. Elk basisformulier kan gemaakt worden met elementen en attributen. Door een correcte opbouw wordt een bruikbaar en toegangkelijk  formulier verkregen.

Om functionaliteit aan HTML formulieren toe te voegen wordt voornamelijk Javascript  gebruikt. Meer geavanceerde technologieën zoals XForms, thans voorbij gestreefd, worden helaas niet door alle browsers geïmplementeerd.

In dit artikel wordt kennis gemaakt met alle HTML formulier elementen. Ook wordt de opbouw van een degelijk HTML formulier besproken om zo een vlot bruikbaar formulier te maken. In Hoe eigen widgets voor formulieren te maken wordt dieper ingegaan op het werken met widgets.

 

Globale structuur

Het <form> element

Het <form> element definieert formeel een formulier en de attributen die het gedrag van dit formulier bepalen. Elk HTML formulier moet met deze elementen beginnen. Vele ondersteunende technologieën of browser plug-ins herkennen  <form> elementen en hebben speciale routines om er gebruik van te maken.

Nota: Het is strikt verboden om formulieren te nesten. Afhankelijk van de browser is hun gedrag dan onvoorspelbaar.

Het <form> element ondersteunt de volgende attributen (allemaal optioneel):

Attributen van het <form> element
Attribuut naam Defaultwaarde Beschrijving
accept-charset UNKNOWN Een lijst van karaktertekens die door een server wordt aanvaard. De defaultwaarde is de speciale string UNKNOWN. In dit geval worden de karakters gecodeerd zoals in het document dat het form element bevat.
action   De URI van een webpagina die de informatie van het formulier verwerkt.
autocomplete on Geeft aan of de widgets in dit formulier automatisch aangevuld kunnen worden aan de defaultwaarden van de browser. Dit attribuut kan twee waarden aannemen: on of off.
enctype application/x-www-form-urlencoded Als de waarde van het method attribuut post is, dan is dit attribuut het  MIME type van de inhoud van het formulier. Mogelijke waarden zijn:
  • application/x-www-form-
  • multipart/form-data: Gebruik deze waarde bij gebruik van een  <input> element waarvan het type attribuut  file is.
  • text/plain
method get

T

De HTTP methode die de browser gebruikt om het formulier te versturen. Dit attribuut kan één van twee waarden aannemen: get or post.

name   De naam van het formulier. Hij moet uniek zijn tussen alle formulieren van een document en mag niet de lege string zijn. In de praktijk wordt hiervoor echter het id attribuut gebruikt.
novalidate (false) Dit attribuut geeft aan dat het formulier niet moet gevalideerd worden bij verzending.
target _self Een naam of een sleutelwoord die aangeven waar het antwoord van de server moet getoond worden na verzending van het formulier. Dit kan bijvoorbeeld een  <iframe>, een tab of een venster zijn. Volgende sleutelwoorden zijn mogelijke waarden voor dit attribuut:
  • _self: Laad het antwoord in de huidige browser configuratie (<iframe>, tab, venster, enz.) .
  • _blank: Laad het antwoord in een nieuwe browserconfiguratie.
  • _parent: Laad het antwoord in de ouder van de huidige browser configuratie. Als er geen ouder is gedraagt deze optie zich als  _self.
  • _top: Laad het antwoord in de hoogste ouder van de huidig browser configuratie (dit is de browser configuratie die geen ouder heeft). Als er geen ouder is gedraagt deze optie zich als  _self.

Het is altijd mogelijk een formulier widget te gebruiken buiten een <form> element maar dan is deze widget aan geen enkel formulier gebonden. Het is dan de gebruker die er voor verantwoordelijk is dat deze widget de gewenste uitwerking heeft, omdat die niets uit zichzelf zal doen. De widget moet dan aangepast worden met JavaScript.

Technisch gezien is het HTML5 die het form attribuut invoert voor HTML formulieren. Het bindt dus expliciet een element met een formulier. Helaas ondersteunen niet alle browsers dit element goed genoeg om betrouwbaar te zijn.

De <fieldset> en <legend> elementen

Het <fieldset> element dient om widgets die dezelfde functie hebben te bundelen. Een <fieldset> element kan een <legend> element hebben. Het <legend> element beschrijft formeel het doel van het  <fieldset> element. Veel ondersteunende technologieën herkennen het  <legend> element als deel van het label van elke widget binnen het  <fieldset> element. Zo lezen sommige lezers, zoals  Jaws of NVDA, eerst de legend voordat ze het label van een widget lezen.

Hier volgt een klein voorbeeld:

<form>
  <fieldset>
    <legend>Fruitsap grootte</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Klein</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Groot</label>
    </p>
  </fieldset>
</form>

In dit voorbeeld zal een schermlezer voor de eerste widget "Fruitsap klein" lezen, voor de tweede "Fruitsap medium" en voor de derde "Fruitsap groot".

Het gebruik van het <fieldset> element is zeer belangrijk. Keuzerondjes bijvoorbeeld moeten steeds binnen een <fieldset> element ondergebracht worden. In het algemeen kan het <fieldset> element ook een formulier in secties verdelen. Omwille van zijn invloed op ondersteunende technologieën is het <fieldset> element een sleutelelement om toegankelijke formulieren te maken. Het is echter aan de gebruiker om het doelmatig aan te wenden. Ga bij elk gebruik na hoe een schermlezer het element interpreteert en pas uw opzet daaraan aan.

Het <fieldset> element ondersteunt volgende specifieke attributen:

Attributen van het <fieldset> element
Attribuut naam Defaultwaarde Beschrijving
disabled (false) Als dit attribuut true is zijn de widgets van de formulieren die afhankelijk zijn van het huidige formulier (behalve deze van het eerste <legend> element) niet geactiveerd en dus niet bruikbaar.  Deze zijn in de meeste browsers grijs gekleurd.

Het <label> element

Het <label> element definieert formeel het label van een HTML widget. Dit is het belangrijkste element om toegankelijke formulieren te maken.

Het <label> element heeft de volgende attributen:

Attributen van het <label> element
Attribuut naam Defaultwaarde Beschrijving
for   De ID van een widget met een label in hetzelfde document als het <label> element. Het label wordt toegepast op het eerste element waarvan de ID overeenkomt met de waarde van het for attribuut in het document.

Een <label> element is gebonden aan zijn widget door het for attribuut. Het for attribuut refereert naar het id attribuut van de overeenkomstige widget. Een widget kan genest zijn in zijn <label> element maar zelfs in dat geval is het aangeraden om het for attribuut te gebruiken omdat sommige ondersteunende technologieën niet overweg kunnen met expliciete relaties tussen labels en widgets.

Maar zelfs met ondersteunende technologieën ter zijde, laat een formele aanduiding van een label voor een bepaalde widget in alle browsers de gebruiker toe de widget te activeren door op het label te klikken. Dit is vooral nuttig bij keuzerondjes en selectievakjes.

<form>
  <p>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
    <label for="taste_1">I like cherry</label>
  </p>
  <p>
    <label for="taste_2">
      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
      I like banana
    </label>
  </p>
</form>

Sommige ondersteunende technologieën kunnen het moeilijk hebben met meerdere labels voor één widget. In dit geval moet de widget genest worden in zijn eigen element om een toegankelijk formulier te maken.

Bekijk volgend voorbeeld:

<form>
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

  <!-- when the thing you are labeling is a descendant of the label, it is not necessary to use the 'for' attribute on the label. -->
  <!-- So this: -->
  <label>
    <span>Name: </span>
    <input type="text" name="username" required />
    <strong><abbr title="required">*</abbr></strong>
  </label>  

  <!-- is the same as this: -->  
  <div>
    <label for="username">Name: </label>
    <input id="username" type="text" name="username" required />
    <strong><abbr title="required">*</abbr></strong>
  </div>

  <p>
    <label for="birth"> <!-- so here, the 'for' attribute is redundant. -->
      <span>Date of birth: </span>
      <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em>
    </label>
  </p>
</form>

In dit voorbeeld definieert de eerste paragraaf de vereiste elementen. Dit moet vooraan staan opdat de ondersteunende technologieën, zoals schermlezers,  deze informatie hebben voordat ze het element zelf tegenkomen.

Het eerste veld is vereist. Dus zijn label geeft zijn naam aan plus het feit dat het vereist is.  Voor de tweede label is er is geen garantie dat de gebruiker te weten komt dat dit element vereist is.

Het tweede form element werkt op dezelfde manier. Zo weet de gebruiker hoe hij de datum moet ingeven.

Het <output> element

Dit element dient om het resultaat van een berekening in op te slaan. Het bepaalt formeel een relatie tussen de velden die informatie om te bewerken ontvangen en een element dat het resultaat zal tonen. Het wordt ook gebruikt door sommige ondersteunende technologieën om wijzigingen te detecteren en overeenkomstig te reageren.

Het <output> element ondersteunt de volgende attributen:

Attributen van het <output> element
Attribuut naam Defaultwaarde Beschrijving
for   Een lijst van IDs, gescheiden door spaties, van andere elementen om aan te geven dat deze elementen deel uit maken van de invoerwaarden van de berekening (of die de berekening op enige andere wijze beïnvloeden.

Gewone HTML structuren gebruikt bij formulieren

Ondanks al het voorgaande blijven formulieren gewone HTML structuren. Dus alles over HTML is ook van toepassing op formulieren.

Zoals in de voorbeelden te zien is worden widgets tussen <p> of <div> elementen geplaatst.

Samen met het <fieldset> element worden ook HTML titels gebruikt en worden formulieren in secties verdeeld om ingewikkelde formulieren te maken.

Ook worden vaak HTML lijsten gebruikt bij keuzevakjes en keuzerondjes.

Ziehier een eenvoudig betalingsformulier:

<form>
  <h1>Payment form</h1>
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
 
  <section>
    <h2>Contact information</h2>
    
    <fieldset>
      <legend>Title</legend>
      <ul>
        <li>
          <label for="title_1">
            <input type="radio" id="title_1" name="title" value="M." />
            Mister
          </label>
        </li>
        <li>
          <label for="title_2">
            <input type="radio" id="title_2" name="title" value="Ms." />
            Miss
          </label>
        </li>
      </ul>
    </fieldset>
    
    <p>
      <label for="name">
        <span>Name: </span>
        <input type="text" id="name" name="username" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
    
     <p>
      <label for="mail">
        <span>E-mail: </span>
        <input type="email" id="mail" name="usermail" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
  </section>
 
  <section>
    <h2>Payment information</h2>
    
    <p>
      <label for="card">
        <span>Card type:</span>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </label>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <input type="text" id="number" name="cardnumber" required />
        <strong><abbr title="required">*</abbr></strong>
      </label>
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="required">*</abbr></strong>
        <em>formated as mm/yy</em>
      </label>
    </p>
  </section>
 
  <section>
    <p>
      <button>Validate the payment</button>
    </p>
  </section>
</form>

Met behulp van CSS ziet het formulier er zo uit:

Live voorbeeld
Probeer de broncode

HTML widgets

Bij het construeren van een formulier zijn er widgets om informatie van de gebruiker te verkrijgen. In dit artikel wordt uitgelegd hoe deze widgets getoond worden. Het artikel: Basis widgets voor formulieren gaat dieper in op het werken met widgets.

Het <input> element

Dit is een speciaal element omdat het eigenlijk van alles kan zijn. Door eenvoudig zijn type attribuut te wijzigen kan het totaal iets anders worden. Om de zaken te vereenvoudigen kan het type attribuut ingedeeld worden in vier categorieën: eenregelige tekstvelden, elementen zonder tekstinvoer, elementen voor invoer van datum en tijd en knoppen. Hierdoor heeft het <input> element veel attributen maar het is niet altijd eenvoudig uit te maken welke relevant zijn en welke vereist zijn want dit is afhankelijk van het type attribuut.

Dit wordt overzichtelijk gemaakt in volgende tabel. (Zie voor een volledige lijst van alle attributen de pagina betreffende het <input> element):

Waarde van het type attribuut Beschrijving Vereiste attributen Relevante attributen
Eenregelige tekstvelden
text Dit is het meest eenvoudige tekstveld. De waarde text voor het type attribuut is de defaultwaarde van dit attribuut.  De waarde wordt gelezen zoals zij wordt ingegeven.   autocomplete, list, maxlength, pattern, placeholder, readonly, required, size, spellcheck
email Een veld dat alleen e-mailadressen toelaat.   autocomplete, list, maxlength, multiple, pattern, placeholder, readonly, required, size
password De waarde van dit tekstveld wordt verborgen.   autocomplete, list, maxlength, readonly, required, size
search Een veld om zoekwoorden in te geven.   autocomplete, autosave, list, maxlength, pattern, placeholder, readonly, required, size, spellcheck
tel Een veld om een telefoonnummer in te geven.   autocomplete, list, maxlength, pattern, placeholder, readonly, required, size
url Een veld om een absolute URL in te geven.   autocomplete, list, maxlength, pattern, placeholder, readonly, required, size
Widgets zonder tekstingave
checkbox Een keuzevakje.   checked, required
color Een widget om een kleur te kiezen.   autocomplete, list, required
file Een widget om een bestand te kiezen.   accept, multiple, required
hidden Een widget die niet getoond wordt maar waarvan de waarde toch naar de server gestuurd wordt.    
number Een widget voor ingave van een getal met drijvende komma.   autocomplete, list, max, min, readonly, required, step
radio Een keuzerondje. Slechts één van een gegeven groep kan gekozen worden.   checked, required
range Een widget om een getal in te geven waarvan de waarde niet belangrijk is.   autocomplete, list, max, min, required, step
Widgetsvoor datum en tijd
Niet ondersteund.
date Een veld om de datum in te geven (jaar, maand en dag, geen tijd).
Niet geïnstalleerd (zie bug 825294)
  autocomplete, list, max, min, readonly, required
datetime Een veld om een datum en tijd in te geven (uur, minuut, seconde en fractie van een seconde) gebaseerd op de UTC tijdzone.
Niet geïnstalleerd (zie bug 825294)
  autocomplete, list, max, min, readonly, required
datetime-local Een veld om een datum en tijd in te geven zonder tijdzone.
Niet geïnstalleerd (zie bug 825294)
  autocomplete, list, max, min, readonly, required
month Een veld voor ingave van maand en jaar, zonder tijdzone.
Niet geïnstalleerd (zie bug 446510)
  autocomplete, list, max, min, readonly, required
time Een veld om een tijd in te geven zonder tijdzone.
Niet geïnstalleerd zie bug 825294)
  autocomplete, list, max, min, readonly, required
week Een veld om een datum in te geven bestaande uit een week-jaarnummer en een weeknummer zonder tijdzone.
Niet geïnstalleerd (zie bug 825294)
  autocomplete, list, max, min, readonly, required
Knoppen
button Een knop zonder default gedrag.   formaction, formenctype, formmethod, formnovalidate, formtarget
image Knop om grafisch element te verzenden. src, alt width, height, formaction, formenctype, formmethod, formnovalidate, formtarget
reset Een knop die de inhoud van het formulier terugzet naar de defaultwaarden.   formaction, formenctype, formmethod, formnovalidate, formtarget
submit Knop die het formulier verzendt.   formaction, formenctype, formmethod, formnovalidate, formtarget

Als om een of andere reden de waarde van het type attribuut niet ondersteund wordt door de browser wordt het <input> element weergegeven alsof het text is. Dit verzekert dat het formulier blijft werken, zij het niet zo netjes.

Ondanks dat het <input> element krachtig is, kan het niet alles doen. Daarvoor zijn er een aantal andere elementen.

Het <textarea> element

Dit is een tekstveld met meerdere regels. Dit element werkt op dezelfde wijze als het tekstveld met één regel behalve dat het invoegen van regeleinden toelaat. Er zijn ook enkele extra attributen die toelaten tekst te verdelen over meerdere regels:

Attributen voor het <textarea> element
Attribuut naam Defaultwaarde Beschrijving
cols 20 De zichtbare tekstbreedte in gemiddelde karakterbreedten.
rows   Het aantal zichtbare regels in het tekstveld.
wrap soft Geeft aan hoe het veld de tekst afbreekt. Mogelijke waarden zijn: hard of soft

Het <textarea> element werkt enigszins anders dan het <input> element. Het <input> element is een zelfsluitend element. Dit betekent dat het geen afstammelingen kan hebben. Het <textarea> element daarentegen is een gewoon element dat afstammelingen kan hebben met tekstinhoud.

Dit heeft twee consequenties:

  • Om een defaultwaarde voor een <input> element te definiëren moet het value attribuut gebruikt worden maar bij een <textarea> element moet de defaulttekst tussen de begin- en eindtag van het <textarea> element geplaatst worden.
  • Het <textarea> element accepteert alleen tekst. Dit betekent dat elke HTML inhoud in een <textarea> element als platte tekst wordt beschouwd..

In het volgende voorbeeld worden beide <textarea> elementen  op dezelfde manier getoond:

<form>
  <p>
    <label for="text_1">With regular HTML</label><br>
    <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
  </p>
  <p>
    <label for="text_2">With escaped HTML</label><br>
    <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
  </p>
  <p>
    <button>Send me</button>
  </p>
</form>

De <select>, <option>, en <optgroup> elementen

Het <select> element laat de gebruiker toe een waarde in te geven dan wel een waarde te kiezen uit een lijst (zogenaamde combo box). Een keuzevak laat toe een voorgedefinieerde waarde te kiezen. Een combo box kan lechts één keuze hebben ofwel meerdere keuzes. Dit wordt uitgelegd in het artikel: De basis widges voor formulieren.

Elke waarde in het keuzevak wordt gedefinieerd met een <option> element en deze elementen kunnen gegroepeerd worden binnen <optgroup> elementen.

Bijvoorbeeld:

<form>
  <p>
    <label for="myFruit">Pick a fruit</label>
    <select id="myFruit" name="fruit">
      <!-- There is a trick here you think you'll pick
         a banana but you'll eat an orange >:-) -->
      <option value="orange">Banana</option>
      <option>Cherry</option>
      <optgroup label="berries">
        <option>Blueberry</option>
        <option>Raspberry</option>
        <option>Strawberry</option>
      </optgroup>
    </select>
  </p>
</form>

Als een <option> element een value attribuut heeft wordt de waarde van dit attribuut meegestuurd als het formulier wordt verzonden. Als er geen attribuut is opgegeven is het de inhoud van het <option> element die gebruikt wordt als de waarde van het keuzevak.

Bij het <optgroup> element wordt het label attribuut getoond voor de waarden. Dit ziet er uit als een keuzemogelijkheid maar dit label kan niet geselecteerd worden.

Attributen van het <option> element
Attribuute naam Defaultwaarde Beschrijving
label   Dit is de tekst van de optie. Het is deze tekst die getoond wordt als het label attribuut niet gedefinieerd is.
selected (false) Geeft aan dat de optie geselecteerd is.
Attributen van het <optgroup> element
Attribuut naam Defaultwaarde Beschrijving
label   De naam van de groep van opties. Dit attribuut is verplicht.

Het <datalist> element

Dit is een uitbreiding van de widgets door middel van vooringestelde waarden voor bepaalde widgets. Het meest bekende voorbeeld is de auto aanvulling voor tekstvelden. De beschikbare waarden worden door <option> elementen binnen een <datalist> element geplaatst.

Om een widget aan een <datalist> element te binden wordt het list attribuut van de widget gebruikt. Deze vermeldt het id attribuut van het <datalist> element dat gebruikt moet worden.

Het <datalist> element is nog maar vrij recent aan HTML formulieren toegevoegd. Er zijn dus nog browsers die het niet ondersteunen. Om toch een werkbaar formulier te hebben op deze browsers bestaat er een kleine truk:

<form>
  <p>
    <label for="myFruit">What is your favorite fruit?</label>
    <input type="text" id="myFruit" name="fruit" list="fruitList" />
    
    <datalist id="fruitList">
      <label for="suggestion">or pick a fruit</label>
      <select id="suggestion" name="altFruit">
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
        <option value="strawberry">Strawberry</option>
      </select>
    </datalist>
  </p>
</form>

Enerzijds negeren de browsers die het <datalist> element begrijpen de elementen die geen <option> elementen zijn en werken zoals verwacht. Anderzijds tonen de browsers die het <datalist> element niet begrijpen het label en het selectievakje. Natuurlijk zijn er andere methoden om het niet begrijpen van het <datalist> element op te lossen maar die vereisen het gebruik van van JavaScript, wat niet altijd de juiste oplossing is.

Safari 6 Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18 Screenshot of the datalist element with Firefox on Mac OS

De <meter> en <progress> elementen

Deze twee elementen geven een grafische voorstelling van een numerische waarde. Het verschil tussen beide is louter semantisch:

  • Het <meter> element geeft een statische waarde weer tussen een minimum en een maximumwaarde.
  • Het <progress> element geeft een waarde weer die verandert met de tijd tussen een minimum en een maximum waarde. De verandering van de waarde (en daardoor ook de wijziging van de voortuitgangsindicator) moet door middel van JavaScript gebeuren omdat het element geen enkel mechanisme heeft om dat zelf te doen.

Hierdoor hebben deze elementen een specifieke set attributen:

Attributen van het <meter> element
Attribuute naam Defaultwaarde Beschrijving
min 0 De ondergrens van de numerieke waarde van het gemeten interval.
max 1 De bovengrens van de  numerieke waarde van het gemeten interval.
low the min value De hoogste numerieke waarde van de ondergrens van het gemeten interval.
high the max value De laagste numerieke waarde van de bovengrens van het gemeten interval.
optimum   De optimale numerieke waarde.
Attributen van het <progress> element
Attribuute naam Defaultwaarde Beschrijving
max   Dit attribuut geeft aan hoeveel werk er nog moet gedaan worden door de taak aangeduid door het <progress> element.

Het <button> element

Een <button> element toont een knop. Een knop kan drie functies hebben afhankelijk van het type attribuut:

  • Een verzendknop stuurt de formuliergegevens naar de webpagina die gedefinieerd wordt door het action attribuut van het <form> element.
  • Een herstelknop stelt alle formulierwidgets onmiddellijk in op hun defaultwaarden. Dit wordt tegenwoordig als een minder goede werkwijze beschouwd omdat de gebruiker gemakkelijk zijn werk kan verliezen.
  • Een blanko knop doet niets uit zichzelf en de gebruiker moet door middel van JavaScript er een fuctie aan geven.
Attributen van het <button> element
Attribuute naam Defaultwaarde Beschrijving
type submit Het type knop. Mogelijke waarden zijn: button, reset, or submit.
formaction   Bij de verzendknop zal dit attribuut de waarde van het action attribuut van het <form> element overschrijven.
formenctype   Bij de verzendknop zal dit attribuut de waarde van het enctype attribuut van het <form> element overschrijven.
formmethod   Bij de verzendknop zal dit attribuut de waarde van het method attribuut van het <form> element overschrijven.
formnovalidate   Bij de verzendknop zal dit attribuut de waarde van het novalidate attribuut van het <form> element overschrijven.
formtarget   Bij de verzendknop zal dit attribuut de waarde van het target attribuut van het <form> element overschrijven.

Op technisch vlak is er haast geen onderscheid tussen een knop gedefinieerd door het <button> element en het <input> element. Het enig merkbaar verschil is het label van de knop zelf. Bij het <input> element kan het label slechts uit alfanumerische tekens bestaan terwijl bij een <button> element het label HTML kan zijn. Zijn stijl kan dan ook overeenkomstig aangepast zijn.

Nota: Omwille van historische redenen werd het <button> element niet vaak gebruikt en ontwikkelaars gaven de voorkeur aan knoppen gemaakt met het <input> element. Dit kwam door een fout in oudere versies van Internet Explorer (IE). Bij gebruik van een name en een value attribuut in een <button> element in IE6 en IE7 werd niet de inhoud van het value attribuut verzonden maar wel de inhoud van de knop zelf.  Dit is hersteld sinds IE8 zodat het niet langer nodig is om het <button> element te vermijden.

Basis attributen

Veel elementen om formulieren te maken hebben specifieke attributen. Maar er zijn attributen die gemeenschappelijk zijn voor alle elementen. Hier volgt een lijst van deze attributen:

Attribuute naam Defaultwaarde Beschrijving
autofocus (false) Bepaalt of het element automatisch de focus krijgt waneer de pagina geladen wordt. Slechts één element in een document kan de focus krijgen. De gebruiker kan natuurlijk altijd nog werken in een ander element.
disabled (false) Dit attribuut belet de gebruiker om het element te gebruiken. Als dit attribuut niet gespecifieerd is, erft het element de instellingen van het element waarin het vervat is. Bijvoorbeeld in het <fieldset> element: als er geen omvattend element is met het disabled attribuut ingesteld dan is het element actief.
form   Het formulierelement waar de widget mee geassocieerd is. De waarde van het attribuut moet het id attribuut zijn van een <form> element in hetzelfde document. Theoretisch kan een widget buiten een formulier gebruikt worden maar er is geen enkele browser die dit ondersteunt.
name   De naam van het element. Deze wordt  mee verzonden met de gegevens.
value   De initiële waarde van het element.

Het gebruik van ARIA om HTML formulieren te maken

ARIA is a W3C Candidate Recommendation en voegt meer mogelijkheden toe aan HTML om betere internettoepassingen te maken, inclusief formulieren. In "Hoe aangepaste formulierwidgets maken" wordt dieper in gegaan op het maken van formulieren maar hier zijn alvast enkele basisinstructies.

De support van ARIA en ondersteunende technologieën door browsers is ver van perfect maar het wordt steeds beter. Als een browser een ARIA attribuut tegenkomt moet hij informatie naar de toegangslaag van het besturingssysteem sturen. Dit loopt niet altijd goed voor alle browsers over verschillende platformen. De ondersteunende technologieën van hun kant moeten verbinding maken met de toegangslaag van de besturingssysteem om de informatie van de browsers te verkrijgen. Niet alle applicaties doen dat correct. Dus het gebruik van ARIA betekent niet dat een webtoepassing correct zal werken maar men doet alleszins zijn best. Hoe dan ook, ARIA is op het ogenblik de beste technologie en iets is beter dan niets.

De documentatie over ARIA is hier te vinden: lees hier de documentaie over ARIA.

Het aria-labelledby attribuut

Dit attribuut laat toe een label aan te maken zonder het <label> element. Het aria-labelledby attribuut wordt geplaatst bij de widget en refereert naar het id attribuut van het element dat als label moet gebruikt worden.

<form>
  <p id="fruitLabel">What's your favorite fruit</p>
  <p>
    <input type="text" name="fruit" aria-labelledby="fruitLabel">
  </p>
</form>

Eigenlijk is het het tegenovergetelde van het for attribuut van het <label> element. Bij het for attribuut wordt naar de id van de widget gerefereerd maar bij het aria-labelledby attribuut wordt gerefereerd naar de id van het label.

Het aria-describedby attribuut

Is eigenlijk gelijk aan het aria-labelledby attribuut. Het verschil is eerder semantisch. Een label definieert de essentie van een object terwijl een beschrijving meer informatie verschaft dan de gebruiker op dat ogenblijk nodig heeft. Dus het aria-describedby attribuut wordt niet aangeraden voor formulieren. Hier wordt beter het aria-labelledby attribuut gebruikt tenzij men bredere informatie over het formulier wil geven.

Het aria-label attribuut

Dit attribuut wordt gebruikt als er in de DOM geen expliciet label voor een bepaalde widget bestaat. Het attribuut wordt gebruikt door ondersteunende technologieën wanneer er in de DOM geen verwijzing is naar de widget. 

<form>
  <p>
    <input type="search" name="q" aria-label="Search" />
    <input type="submit" value="Go" />
  </p>
</form>

Het role attribuut

Dit is het voornaamste ARIA attribuut. Het geeft specifieke semantische informatie aan ondersteunende technologieën voor een bepaald HTML element. Er zijn veel role attributen beschikbaar, sommige speciaal voor formulieren.

ARIA probeert niet alleen semantische informatie te geven voor widgets die niet voor handen zijn in HTML maar ook voor elementen die wel bestaan in HTML.

De role attributen voor formulieren zijn:

Er zijn ook samengestelde role attributen:

En er zijn er nog meer.  ARIA is een zeer grote verzameling. Er kennis van nemen laat toe mooie formulieren te maken, veel beter dan met HTML.

Conclusie

Met deze kennis kunnen volledige HTML formulieren gemaakt worden. Volgend artikel gaat in detail over het maken van formulieren: De basis formulier elementen.

Zie ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: chrisdavidmills, coenegrachts
 Laatst bijgewerkt door: chrisdavidmills,