MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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 (de gebruiker kan de inhoud niet wijzigen) of zelfs als  disabled (de ingegeven waarde wordt niet mee verzonden met de rest van de formuliergegevens).
  • Zij kunnen een plaatshouder hebben: placeholder. Dit is tekst die in het invoerveld staat om het doel van het veld aan te geven.
  • Hun afmetingen kunnen opgegeven worden: size 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.
Compatibiliteits tabel
Functie op bureaublad Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.readonly 1.0 1.0 (1.7 or earlier) 6 1.0 1.0
<input>.disabled 1.0 1.0 (1.7 or earlier) 6 1.0 1.0
<input>.placeholder 10.0 Unknown (4.0) 10 11.10 4.0
<textarea>.placeholder 10.0 Unknown (4.0) 10 11.50 5.0
<input>.size 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.maxlength 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.spellcheck 10.0 Unknown (3.6) 10 11.0 4.0
Functie op mobiel apparaat Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.readonly (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.disabled (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.placeholder 2.3 4.0 (4.0) ? 11.10 4
<textarea>.placeholder ? 4.0 (4.0) ? 11.50 4
<input>.size (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.maxlength (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<input>.spellcheck ? 4.0 (4.0) ? 11.0 ?

Eenregelige tekstvelden

Een tekstveld van één regel wordt bekomen met het <input> element waarvan het type attribuut text is. Text is de defaultwaarde. Dus ook zonder het type 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.

Screenshots of single line text fields on several platforms.

Er kunnen nog meerdere beperkingen opgegeven worden door middel van het  pattern 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 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 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 attribuut.

Veld voor paswoord

Dit veld wordt ingesteld door de waarde password op te geven voor het type attribuut:

<input type="password">

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

Note: Let er op dat het hier louter om een gebruikersomgeving gaat. De tekst moet door JavaScript geïnterpreteerd worden anders wordt hij als platte tekst verzonden.

Zoekveld

Dit veld wordt ingesteld door de waarde search voor het type 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.

Screenshots of search fields on several platforms.

Veld voor telefoonnummer

Dit veld wordt ingesteld door de waarde tel te gebruiken voor het  type 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 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.

Nota: Dat de URL de juiste vorm heeft betekent niet dat dat het adres bestaat.

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.

Compatibiliteitstabel
Desktopfuctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="text" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="email" 10.0 Unknown (4.0) 10 10.62 ?
<input>.type="password" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="search" 5.0 Unknown (4.0) 10 11.01 5.0
<input>.type="tel" 5.0 Unknown (4.0) 10 11.01 5.0
<input>.type="url" 10.0 Unknown (4.0) 10 10.62 ?
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="text" (Yes) 4.0 (4.0) (Yes) (Yes) 1.0
<input>.type="email" No support 4.0 (4.0) No support (Yes) ?
<input>.type="password" ? 4.0 (4.0) ? ? ?
<input>.type="search" No support 4.0 (4.0) ? (Yes) 4.0
<input>.type="tel" 2.3 4.0 (4.0) ? (Yes) 3.1
<input>.type="url" No support 4.0 (4.0) ? (Yes) 3.1

Tekstvelden met meerdere regels

Het <textarea> 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 kan de gebruiker rechtstreeks de grootte van het veld aanpassen.

Screenshots of multi-lines text fields on several platforms.

Compatibiliteitstabel
Desktopfuctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<textarea> (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<textarea> (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)

Afrolmenu

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.

Keuzelijst

Een keuzelijst wordt gemaakt met het <select> element met één of meerdere <option> 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 attribuut bij de gewenste optie. De {HTMLElement("option")}} elementen kunnen ook genest worden in  <optgroup> 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>

Screenshots of single line select box on several platforms.

Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<select> 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
<option> 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
<optgroup> 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<select> (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<option> (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)
<optgroup> (Yes) 4.0 (4.0) (Yes) (Yes) (Yes)

Meerkeuzelijst

De eenvoudige keuzelijst laat slechts één keuze toe. Door het multiple attribuut toe te voegen aan het <select> 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>

Screenshots of multi-lines select box on several platforms.

Note: Niet alle browsers die het <select> element ondersteunen, ondersteunen het multiple attribuut.

Autoaanvullen

Met het <datalist> element samen met de <option> elementen  wordt een veld voor autoaanvullen getoond. Dit datalist element roept het  list 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>
Note: Volgens the HTML specification kunnen het list attribuut en het <datalist> element gebruikt worden bij elke widget die ingave van de gebruiker vraagt. Het is nochthans onduidelijk hoe dat moet gebeuren met widgets die iets anders dan tekst verwachten (kleur en datums bijvoorbeeld). Verschillende browsers zullen zich anders gedragen. Voorzichtigheid is dus geboden wanneer men andere dan tekstvelden gebruikt.
Screenshots of datalist on several platforms.
Compatibiliteits tabel
Desktopfuctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<datalist> 20.0 Unknown (4.0) 10 9.6 No support
<input>.list 20.0 Unknown (4.0) 10 9.6 No support
Mobile fuctie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<datalist> No support 4.0 (4.0) No support (Yes) No support
<input>.list No support 4.0 (4.0) No support (Yes) No support

Klikbare items

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 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 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.

Het keuzevakje

Een keuzevakje wordt gemaakt met het <input> element waarvan het type attribuut checkbox is.

<input type="checkbox" checked>

Het keuzevakje gedefinieerd op voorgaande manier is bij default aangevinkt.

Screenshots of check boxes on several platforms.

Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="checkbox" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="checkbox" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

Het keuzerondje

Een keuzerondje wordt gemaakt door het <input> element waarvan het type attribuut  radio is.

<input type="radio" checked>

Keuzerondjes kunnen gebundeld worden. Wanneer de naam in hun name 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>

Screenshots of radio buttons on several platforms.

Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="radio" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="radio" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

Knoppen

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> element of een <input> element. Het soort knop wordt bepaald door het type attribuut:

verzenden

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

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

herstel

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

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

anoniem

<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> element en het <input> element zich identiek. Er zijn echter kleine verschillen:

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

Screenshots of buttons on several platforms.

Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="submit" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="reset" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
<input>.type="button" 1.0 1.0 (1.7 or earlier) 3 1.0 1.0
<button> 1.0 1.0 (1.7 or earlier) (Yes)
(Buggy before IE8)
(Yes) (Yes)
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="number" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)
<input>.type="reset" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)
<input>.type="button" 1.0 1.0 (1.0) (Yes) (Yes) (Yes)
<button> 1.0 1.0 (1.0) (Yes) (Yes) (Yes)

Speciale formulier widgets

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

Getallen

Widgets voor getallen worden gemaakt met het <input> element en number als type 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 max attributen. De waarde van het increment van de knoppen kan opgegeven worden met het step 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.

Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="number" 11.0 No support bug 344616 10
(herkend maar geen UI)
(Yes) 5.2
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="number" 2.3 No support No support (Yes) 4.0

Schuifregelaar

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> element met type attribuut range. Hij moet wel correct ingesteld zijn met zijn min, max en step 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.

Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="range" 5.0 23.0 10 10.62 4.0
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="range" No support 23.0 No support 10.62 5.0

Ingave van datum en tijd

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> element met de juiste instelling van het type 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 max attributen.

<label for="myDate">When are you available this summer?</label>
<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">
Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="date" 20.0 No support bug 825294 No support 10.62 (Yes)
<input>.type="datetime" No support No support bug 825294 No support 10.62 (Yes)
<input>.type="datetime-local" No support No support bug 825294 No support 10.62 (Yes)
<input>.type="month" No support No support bug 825294 No support 10.62 (Yes)
<input>.type="time" No support No support bug 825294 No support 10.62 (Yes)
<input>.type="week" No support No support bug 825294 No support 10.62 (Yes)
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="date" No support No support bug 446510 No support 10.62 5.0
<input>.type="datetime" No support No support bug 446510 No support 10.62 (Yes)
<input>.type="datetime-local" No support No support bug 446510 No support 10.62 (Yes)
<input>.type="month" No support No support bug 446510 No support 10.62 (Yes)
<input>.type="time" No support No support bug 446510 No support 10.62 (Yes)
<input>.type="week" No support No support bug 446510 No support 10.62 (Yes)
Waarschuwing: De datum en tijd widgets zijn zeer nieuw en zelfs browsers die beweren ze te ondersteunen hebben er dikwijls problemen mee. Test uw werk met diverse browsers alvorens uit te rollen!

Kleuren kiezen

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> element met color als type attribuut.

<input type="color">
Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="color" 21.0 No support bug 547004 No support 11.01 No support
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="color" No support No support No support ? No support

Andere widgets

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

Kiezen van bestanden

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> element met file als type attribuut. Het type bestand kan ingesteld worden met het accept attribuut. Indien de gebruiker meerdere bestanden kan kiezen wordt het multiple attribuut gebruikt.

Voorbeeld

In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.

<input type="file" accept="image/*" multiple>
Compatibiliteitstabel
Desktopfunctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="file" 1.0 1.0 (1.7 or earlier) 3.02 1.0 1.0
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="file" ? ? ? ? ?

Verborgen inhoud

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> element met hidden als type attribuut.

Dit element vereist ook de name en value attributen:

<input type="hidden" name="timestamp" value="1286705410">
Compatibiliteitstabel
Feature Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="hidden" 1.0 1.0 (1.7 or earlier) 2 1.0 1.0
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="hidden" (Yes) (Yes) (Yes) (Yes) (Yes)

Afbeelding

De afbeeldings widget wordt op dezelfde manier getoond als het <img> 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> element en image als type attribuut. Dit element ondersteunt dezelfde attributen als het  <img> 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 attribuut gevolgd door ".x" en de sleutel van de Y-waarde is het name 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.

Compatibiliteitstabel
Desktopfuctie Chrome Firefox (Gecko) Internet Explorer Opera Safari
<input>.type="image" 1.0 1.0 2 1.0 1.0
Mobiele functie Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<input>.type="image" (Yes) (Yes) (Yes) (Yes) (Yes)

Meters en voortgangsbalken

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 attribuut. De balk wordt gecreëerd door het <progress> 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 max. Deze waarde wordt visueel voorgesteld door een balk. Hoe deze balk er uit ziet wordt bepaald door bepaalde parameters:

  • de waarden van low en high delen het interval in drie delen:
    • Het onderste gedeelte van het interval ligt tussen de waarden min en low (deze waarden inbegrepen)
    • Het middenste gedeelte van het interval ligt tussen de waarden low en high (deze waarden uitgesloten)
    • Het bovenste gedeelte van het interval ligt tussen de waarden high en max (deze waarden inbegrepen)
  • De optimum waarde bepaalt de optimale waarde voor het <meter> element. Samen met de waarden low en  high wordt bepaald welk deel van het interval de voorkeur krijgt:
    • Als de waarde optimum 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 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 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> 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>
Compatibility table
Desktopfuncties Chrome Firefox (Gecko) Internet Explorer Opera Safari
<progress> 6.0 6.0 (6.0) 10 10.6 5.2
<meter> 6.0 16.0 (16.0) No support 11.0 5.2
Mobiele functies Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
<progress> No support 6.0 (6.0) No support 11.0 ?
<meter> No support 16.0 (16.0) No support 11.0 ?

Zie ook

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

Documentlabels en -medewerkers

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