The native form widgets

HTML formulieren bestaan uit widgets. Widgets zijn besturingselementen die door elke browser ondersteunt worden. In dit artikel wordt besproken hoe elke widget  werkt en hoe goed hij ondersteund wordt door de verschillende browsers.

Bijzondere aandacht gaat naar de ingebouwde widgets voor formulieren. Omdat HTML formulieren eerder beperkt zijn en de kwaliteit over de browsers heen nogal verschillend kan zijn, bouwen webontwikkelaars hun eigen widgets. Dit wordt uitgelegd in het artikel: Hoe aangepaste widgets maken.

Velden voor tekstinvoer zijn de meest basale formulierwidgets. Zij vormen een gemakkelijke manier om willekeurige gegevens in te voeren. Sommige tekstvelden echter kunnen gespecialiseerd worden om aan bepaalde behoeften te voldoen.

Tekstvelden van HTML formulieren zijn eenvoudige tekstvelden die alleen platte tekst aanvaarden. Dit betekent dat rich editing (vet, cursief, enz.) niet mogelijk is. Alle rich text editors hebben aangepaste widgets.

Alle tekstvelden hebben enkele gemeenschappelijke eigenschappen:

• Zij kunnen gemarkeerd worden als readonly (en-US) (de gebruiker kan de inhoud niet wijzigen) of zelfs als  disabled (en-US) (de ingegeven waarde wordt niet mee verzonden met de rest van de formuliergegevens).
• Zij kunnen een plaatshouder hebben: placeholder (en-US). Dit is tekst die in het invoerveld staat om het doel van het veld aan te geven.
• Hun afmetingen kunnen opgegeven worden: size (en-US) geeft de fysieke grootte van het veld aan en length geeft het aantal karakters aan dat ingegeven kan worden in het veld.
• Zij kunnen voorzien zijn van spellingscontrole als de browser dit toelaat.

Een tekstveld van één regel wordt bekomen met het <input> (en-US) element waarvan het type (en-US) attribuut text is. Text is de defaultwaarde. Dus ook zonder het type (en-US) attribuut of een voor de browser onbekend type attribuut is het platte tekst die aanvaardt wordt door het tekstveld.

<input type="text">

Eenregelige tekstvelden hebben één beperking: regelafbrekingen worden door de browser verwijderd voordat de gegevens verstuurd worden.

Er kunnen nog meerdere beperkingen opgegeven worden door middel van het  pattern (en-US) attribuut. Dit laat toe de gegevens te controleren aan de hand van een reguliere expressie .

<input type="text" pattern="^cherry|banana$">

Maar HTML5 laat toe het enkelregelige tekstveld op te smukken met speciale waarden voor het type (en-US) attribuut. Deze waarden creëren nog altijd een eenregelig tekstveld maar leggen bijkomende voorwaarden op en geven het veld bepaalde eigenschappen.

Veld voor e-mail addres

Dit veld wordt ingesteld door de waarde email op te geven voor het type (en-US) attribuut:

<input type="email" multiple>

Dit voert een speciale beperking in voor het veld: de gebruiker moet een geldig e-mailaddres ingeven. Ieder andere inhoud veroorzaakt een fout. Het is ook mogelijk de gebruiker meerdere e-mailadressen te laten ingeven door middel van het multiple (en-US) attribuut.

Veld voor paswoord

Dit veld wordt ingesteld door de waarde password op te geven voor het type (en-US) attribuut:

<input type="password">

Hier kan elk teken ingegeven worden en de tekens zijn niet leesbaar.

Zoekveld

Dit veld wordt ingesteld door de waarde search voor het type (en-US) attribuut:

<input type="search">

Het verschil tussen een tekstveld en een zoekveld is het uiterlijk. In sommige browsers worden zoekvelden afgebeeld met ronde hoeken of omkadering in een andere kleur. Zoekvelden hebben nog een bijkomende eigenschap: de inhoud kan automatisch opgeslagen worden voor auto-aanvullen over verschillende pagina's van dezelfde site.

Veld voor telefoonnummer

Dit veld wordt ingesteld door de waarde tel te gebruiken voor het  type (en-US) attribuut:

<input type="tel">

Door de grote wereldwijde verscheidenheid van telefoonnummers legt dit veld geen ristrictie op aan hetgeen ingegeven wordt. Het is dus louter een semantisch verschil alhoewel sommige toestellen (vooral mobielen) een virtueel toetsenbord gebruiken.

URL veld

Dit veld wordt ingesteld door de waarde url voor het type (en-US) attribuut:

<input type="url">

Dit veld waakt er over dat alleen geldige URLs worden ingegeven. Er wordt een fout gegenereerd als de URL niet juist is.

Indien één veld een fout vertoont wordt het formulier niet verzonden. De stijl van een formulier kan zo ingesteld worden dat aangegeven wordt welke fout er opgetreden is. Dit wordt in detail uitgelegd in : Gegevensvalidatie.

Het <textarea> (en-US) element creëert een tekstveld dat meerdere regels bevat.

<textarea cols="20" rows="10"></textarea>

Het grote verschil met een gewoon tekstveld met één regel ligt in het feit dat een tekstarea een harde regelafbreking ondersteunt. Met andere woorden dat de karakters "regelterugloop" [CR] en "nieuwe regel" [LF]) geacepteerd worden.

Dank zij de CSS eigenschap resize (en-US) kan de gebruiker rechtstreeks de grootte van het veld aanpassen.

Een afrolmenu laat de gebruiker toe een keuze te maken uit verschillende mogelijkheden. Er zijn twee mogelijkheden. Ofwel wordt een lijst met keuze opties getoond, ofwel wordt een veld voor autoaanvulling getoond. De lijst loopt gewoon over de tekst van het formulier. Na de selectie verdwijnt de lijst zonder de tekst te verstoren.

Een keuzelijst wordt gemaakt met het <select> (en-US) element met één of meerdere <option> (en-US) elementen die de keuzemogelijkheden aangeven.

<select>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

Eventueel kan een defaultwaarde opgegeven worden met het selected (en-US) attribuut bij de gewenste optie. De {HTMLElement("option")}} elementen kunnen ook genest worden in  <optgroup> (en-US) elementen om de opties in groepen in te delen:

<select>
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potatoe</option>
  </optgroup>
</select>

De eenvoudige keuzelijst laat slechts één keuze toe. Door het multiple (en-US) attribuut toe te voegen aan het <select> (en-US) element wordt de volledige lijst met opties getoond en kan de gebruiker meerdere keuzes maken door de ctrl-toets in te houden tijdens het selecteren. 

<select multiple>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

Met het <datalist> (en-US) element samen met de <option> (en-US) elementen  wordt een veld voor autoaanvullen getoond. Dit datalist element roept het  list (en-US) attribuut op.

Zodra de gebruiker iets ingeeft wordt een keuzelijst getoond met alle overeenkomsten in het datalist object.

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

Klikbare items zijn widgets waarvan de toestand wijzigt bij het aanklikken. Er zijn twee klikbare items: het keuzevakje en het keuzerondje. Beide gebruiken ze het checked (en-US) attribuut om aan te geven of de widget al of niet bij default is aangeklikt.

Er dient opgemerkt te worden dat deze widgets zich niet gedragen als elk ander formulier widget. Wanneer een formulier wordt verzonden, worden alle widgets die een name (en-US) attribuut hebben, verzonden, ook als zij geen waarde hebben. Klikbare elementen daarentegen worden slechts verzonden indien ze aangeklikt zijn. Als zij niet aangeklikt zijn worden zij niet verzonden, zelfs niet hun naam.

Een keuzevakje wordt gemaakt met het <input> (en-US) element waarvan het type (en-US) attribuut checkbox is.

<input type="checkbox" checked>

Het keuzevakje gedefinieerd op voorgaande manier is bij default aangevinkt.

Een keuzerondje wordt gemaakt door het <input> (en-US) element waarvan het type (en-US) attribuut  radio is.

<input type="radio" checked>

Keuzerondjes kunnen gebundeld worden. Wanneer de naam in hun name (en-US) attribuut dezelfde is vormen zij één groep. Slechts één keuzerondje in een groep kan geselecteerd zijn. Dit betekent dat als één keuzerondje in een groep aangevinkt is, alle andere gedeselecteerd zijn. Wanneer het formulier verzonden wordt, wordt alleen het aangevinkte keuzerondje verzonden. Wanneer geen enkel is aangevinkt wordt er ook geen enkel verzonden.

<fieldset>
  <legend>What gender are you?</legend>
  <p><label for="g1"><input type="radio" name="g" id="g1" value="M"> Male</label></p>
  <p><label for="g2"><input type="radio" name="g" id="g2" value="F"> Female</label></p>
  <p><label for="g3"><input type="radio" name="g" id="g3" value="B"> Both</label></p>
  <p><label for="g4"><input type="radio" name="g" id="g4" value="N"> None</label></p>
  <p><label for="g5"><input type="radio" name="g" id="g5" value="!"> This is not your concern!</label></p>
  <p><label for="g6"><input type="radio" name="g" id="g6" value="?"> Who cares?</label></p>
  <p><label for="g7"><input type="radio" name="g" id="g7" value="\o/"> Obi-Wan Kenobi</label></p>
</fieldset>

In HTML formulieren zijn er drie knoppen:

Verzenden

Zendt de formuliergegevens naar de server.

Herstel

Herstelt alle widgets van het formulier naar hun defaultwaarde.

Anoniem

Knoppen waarvan de uitwerking aangepast kan worden door middel an JavaScript.

Een knop wordt gecreëerd door het <button> (en-US) element of een <input> (en-US) element. Het soort knop wordt bepaald door het type (en-US) attribuut:

<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

<button type="reset">
    This a <br><strong>reset button</strong>
</button>

<input type="reset" value="This is a reset button">

<button type="button">
    This an <br><strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

In principe gedraagt het <button> (en-US) element en het <input> (en-US) element zich identiek. Er zijn echter kleine verschillen:

• Zoals de voorgaande voorbeelden laten zien laten de <button> (en-US) elementen  HTML inhoud toe als tekst, terwijl de <input> (en-US) elementen alleen platte tekst toelaten.
• De <button> (en-US) elementen kunnen een andere waarde hebben dan hun label (dit is echter niet betrouwbaar in Internet Explorer voor IE 8).

Deze widgets laten invoer toe van complexe of gestructeerde gegevens zoals exacte of benaderende getallen, datum en tijd en kleuren.

Widgets voor getallen worden gemaakt met het <input> (en-US) element en number als type (en-US) attribuut. Dit element ziet er uit als een tekstveld maar accepteert slechts getallen met drijvende komma. Gewoonlijk  is het voorzien van knoppen om de waarde te verhogen of verlagen.

De ingegeven waarde kan ook beperkt worden met de min (en-US) en max (en-US) attributen. De waarde van het increment van de knoppen kan opgegeven worden met het step (en-US) attribuut.

Voorbeeld

<input type="number" min="1" max="10" step="2">

Dit creëert een widget wiens waarde begrensd is tussen 1 en 10 en die in stappen van 2 kan verhoogd of verlaagd worden.

Een andere manier om een waarde in te geven is het gebruik van een schuifregelaar. Deze zijn minder nauwkeurig dan een tekstveld en worden dan ook gebruikt waar geen nauwkeurige waarde nodig is.

Een schuifregelaar wordt gemaakt met het <input> (en-US) element met type (en-US) attribuut range. Hij moet wel correct ingesteld zijn met zijn min (en-US), max (en-US) en step (en-US) attributen.

Voorbeeld

<input type="range" min="1" max="5" step="1">

Dit voorbeeld creëert een schuifregelaar waarvan waarde varieert tussen 1 en 5 in stappen van +1 en -1.

Traditioneel is ingave van datum en tijd een probleem voor web ontwikkelaars. HTML5 brengt enige verlichting met een speciale widget om deze speciale gegevens te behandelen.

Er wordt ook gebruik gemaakt van het <input> (en-US) element met de juiste instelling van het type (en-US) attribuut. Datum en tijd kunen appart of samen ingegeven worden, afhankelijk van het attribuut:

date

Dit creëert een widget die een datum toont of kan opnemen, zonder tijd.

<input type="date">

datetime

Dit crëeert een widget die een datum met tijd kan tonen of opnemen in de UTC tijdzone.

<input type="datetime">

datetime-local

Dit creëert een widget die een datum met tijd weergeeft of opneemt in elke tijdzone.

<input type="datetime-local">

month

Dit creëert een widget die een maand en een jaartal weergeeft of opneemt.

<input type="month">

time

Creëert een widget die een tijd weergeeft of opneemt.

<input type="time">

week

Creëert een widget die een week en een jaartal weergeeft of opneemt.

<input type="week">

Alle datum en tijd widgets kunnen beperkt zijn door de min (en-US) en max (en-US) attributen.

<label for="myDate">When are you available this summer?</label>
<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">

Het kiezen van kleuren is altijd wat moeilijk geweest. Er zijn vele manieren: RGB waarden (decimaal or hexadecimaal), HSL waarden, sleutelwoorden, enz. De kleuren widget laat de gebruiker toe zowel tekstueel als visueel een kleur te kiezen.

Een kleuren widget wordt gemaakt door het <input> (en-US) element met color als type (en-US) attribuut.

<input type="color">

Er zijn nog enkele andere widgets die niet dadelijk ergens bij horen maar niettemin belangrijk zijn.

HTML formulieren kunnen bestanden naar een server versturen. Dit wordt verduidelijkt in het artikel: Verzenden en ontvangen van gegevens. De widget "Bestanden kiezen" laat de gebruiker toe één of meerdere bestanden te kiezen om te verzenden.

Kies het <input> (en-US) element met file als type (en-US) attribuut. Het type bestand kan ingesteld worden met het accept (en-US) attribuut. Indien de gebruiker meerdere bestanden kan kiezen wordt het multiple (en-US) attribuut gebruikt.

Voorbeeld

In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.

<input type="file" accept="image/*" multiple>

Het is soms nuttig, om technische redenen, om gegevens met het formulier mee te sturen maar die niet zichtbaar zijn voor de gebruiker. Dit wordt gedaan met het <input> (en-US) element met hidden als type (en-US) attribuut.

Dit element vereist ook de name en value attributen:

<input type="hidden" name="timestamp" value="1286705410">

De afbeeldings widget wordt op dezelfde manier getoond als het <img> (en-US) element, met die uitzondering dat, wanneer de gebruiker er op klikt, het zich gedraagt als een verzendknop (zie hierboven).

Een afbeeldings widget wordt gecrëerd met een <input> (en-US) element en image als type (en-US) attribuut. Dit element ondersteunt dezelfde attributen als het  <img> (en-US) element plus de attributen van alle formulier knoppen.

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

Als de knop afbeelding gebruikt wordt als verzendknop wordt niet zijn waarde verstuurd maar de X- en Y-coördinaten van de plaats waar er geklikt wordt in de afbeelding. De coördinaten zijn relatief tegenover de afbeelding (de linker bovenhoek is 0, 0). De coördinaten worden verzonden als twee sleutel/waarde paren. De sleutel van de X-waarde is het name (en-US) attribuut gevolgd door ".x" en de sleutel van de Y-waarde is het name (en-US) attribuut gevolgd door ".y".

Laten we een voorbeeld bekijken:

<form action="http://foo.com" method="get">
  <input type="image" value="pos" alt="" src="map.png" />
</form>

Bij het klikken op de afbeelding  in dit formulier wordt naar de volgende URL verzonden:

http://foo.com?pos.x=123&pos.y=456

De waarde van de pos.x en pos.y parameters is afhankelijk van de plaats in de afbeelding waar geklikt wordt. Hoe deze waarden verzonden en ontvangen worden wordt beschreven in Zenden en ontvangen van gegevens.

Meters en en voortgangsbalken zijn visuele voortellingen  van numerieke waarden.

Een voortgangsbalk stelt een waarde voor die verandert in de tijd tot een maximumwaarde vastgelegd door het max (en-US) attribuut. De balk wordt gecreëerd door het <progress> (en-US) element. Niet alle browsers en ondersteunende technologieën kunnen overweg met dit element.

<progress max="100" value="75">75/100</progress>

Een meter stelt een vaste waarde voor in een gebied begrensd door de waarde van min (en-US) en max (en-US). Deze waarde wordt visueel voorgesteld door een balk. Hoe deze balk er uit ziet wordt bepaald door bepaalde parameters:

• de waarden van low (en-US) en high (en-US) delen het interval in drie delen:
  • Het onderste gedeelte van het interval ligt tussen de waarden min (en-US) en low (en-US) (deze waarden inbegrepen)
  • Het middenste gedeelte van het interval ligt tussen de waarden low (en-US) en high (en-US) (deze waarden uitgesloten)
  • Het bovenste gedeelte van het interval ligt tussen de waarden high (en-US) en max (en-US) (deze waarden inbegrepen)
• De optimum (en-US) waarde bepaalt de optimale waarde voor het <meter> (en-US) element. Samen met de waarden low (en-US) en  high (en-US) wordt bepaald welk deel van het interval de voorkeur krijgt:
  • Als de waarde optimum (en-US) in het onderste gedeelte van het interval ligt, is het het onderste gedeelte dat de voorkeur krijgt, het middenste gedeelte wordt als het gemiddelde beschouwd en het bovenste gedeelte wordt als het slechtste gedeelte beschouwd.
  • Als de waarde optimum (en-US) in het middenste gedeelte van het interval ligt, wordt het onderste en het bovenste gedeelte als het gemiddelde beschouwd. Het middenste gedeelte krijgt de voorkeur.
  • Als de waarde optimum (en-US) in het bovenste gedeelte van het interval ligt, wordt het onderste gedeelte als slecht beschouwd, het middelste gedeelte als het gemiddelde en het bovenste gedeelte als het gedeelte dat de voorkeur heeft.

Alle browsers die het <meter> (en-US) element ondersteunen gebruiken de deze waarden om de kleur van de balk aan te passen:

• Als de huidige waarde in het voorkeurgebied valt is de balk groen.
• Als de huidige waarde in het gemiddelde gebied ligt is de balk geel.
• Als de huidige waarde in het slechte gedeelte ligt is de kleur van de balk rood.

Niet alle browsers en ondersteunende technologieën kunnen overweg met dit element.

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

Om dieper in te gaan op de verschillende widgets voor formulieren zijn er nuttige externe bronnendie kunnen geraadpleegd worden:

• The Current State of HTML5 Forms door Wufoo
• HTML5 Tests - inputs over Quirksmode (ook beschikbaar voor mobiele browsers)