XHTML5.NL

Formulieren (X)HTML

  • HTML 5+
  • XHTML 5+
  • IE 10.0+
  • Chrome 1.0+
  • Firefox 4.0+
  • Safari 4.0+
  • Opera 9.0+

autofocus-attribuut

Het booleaanse autofocus-attribuut geeft aan dat bij het laden van de pagina het controle-element automatisch de focus moet krijgen.

Dit attribuut mag slechts eenmaal per document gebruikt worden, aangezien slechts één element tegelijk de focus kan hebben.

  • <button autofocus="autofocus" … > … </button>
  • <input autofocus="autofocus" … />
  • <keygen autofocus="autofocus" … />
  • <select autofocus="autofocus" … > … </select>
  • <textarea autofocus="autofocus" … > … </textarea>
  • HTML 4.0+
  • XHTML 1.0+
  • IE 4.0+ *
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 5.0+

disabled-attribuut

Het booleaanse disabled-attribuut geeft aan dat het controle-element is uitgeschakeld. De gebruiker kan dan niets met dit besturingselement doen.

Indien toegepast op een <fieldset>-element worden alle controle-elementen binnen deze groep uitgeschakeld, met uitzondering van controle-elementen binnen het <legend>-element.

Internet Explorer ondersteunt het attribuut niet bij <option>-elementen en <optgroup>-elementen.

  • <button disabled="disabled" … > … </button>
  • <command disabled="disabled" … />
  • <input disabled="disabled" … />
  • <keygen disabled="disabled" … />
  • <optgroup disabled="disabled" … > … </optgroup>
  • <option disabled="disabled" … > … </option>
  • <select disabled="disabled" … > … </select>
  • <textarea disabled="disabled" … > … </textarea>
  • HTML 5+
  • XHTML 5+
  • IE niet
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari niet
  • Opera 9.0+

form-attribuut

Normaal gesproken horen controle-elementen bij het <form>-element waarbinnen ze staan. Het form-attribuut kan gebruikt worden om controle-elementen buiten het <form>-element te plaatsen waar ze bij horen. De waarde van het attribuut is dan de waarde van het id-attribuut van het <form>-element.

  • <button form="…" … > … </button>
  • <input form="…" … />
  • <keygen form="…" … />
  • <object form="…" … > … </object>
  • <output form="…" … > … </output>
  • <progress form="…" … > … </progress>
  • <select form="…" … > … </select>
  • <textarea form="…" … > … </textarea>
  • HTML 5+
  • XHTML 5+
  • IE niet
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari niet
  • Opera 10.5+

formaction-attribuut

Bij verzendknoppen kan het formaction-attribuut worden gebruikt om bij gebruik van deze specifieke verzendknop het action-attribuut van het <form>-element te vervangen. De mogelijke waarden zijn hetzelfde.

  • <button formaction="…" … > … </button>
  • <input formaction="…" … />
  • HTML 5+
  • XHTML 5+
  • IE niet
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari niet
  • Opera 10.5+

formenctype-attribuut

Bij verzendknoppen kan het formenctype-attribuut worden gebruikt om bij gebruik van deze specifieke verzendknop het enctype-attribuut van het <form>-element te vervangen. De mogelijke waarden zijn hetzelfde.

  • <button formenctype="…" … > … </button>
  • <input formenctype="…" … />
  • HTML 5+
  • XHTML 5+
  • IE niet
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari niet
  • Opera 10.5+

formmethod-attribuut

Bij verzendknoppen kan het formmethod-attribuut worden gebruikt om bij gebruik van deze specifieke verzendknop het method-attribuut van het <form>-element te vervangen. De mogelijke waarden zijn hetzelfde.

  • <button formmethod="…" … > … </button>
  • <input formmethod="…" … />
  • HTML 5+
  • XHTML 5+
  • IE 10.0+
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari 5.0+
  • Opera 10.5+

formnovalidate-attribuut

Bij verzendknoppen kan het booleaanse formnovalidate-attribuut worden gebruikt om bij afwezigheid van het novalidate-attribuut van het <form>-element toch de formuliervalidatie uit te schakelen bij gebruik van deze specifieke verzendknop.

  • <button formnovalidate="formnovalidate" … > … </button>
  • <input formnovalidate="formnovalidate" … />
  • HTML 5+
  • XHTML 5+
  • IE niet
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari niet
  • Opera 10.5+

formtarget-attribuut

Bij verzendknoppen kan het formtarget-attribuut worden gebruikt om bij gebruik van deze specifieke verzendknop het target-attribuut van het <form>-element te vervangen. De mogelijke waarden zijn hetzelfde.

  • <button formtarget="…" … > … </button>
  • <input formtarget="…" … />
  • HTML 2.0+
  • XHTML 1.0+
  • IE 1.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

name-attribuut

Het name-attribuut geeft het controle-element een naam. Bij het verzenden van het formulier wordt deze naam gekoppeld aan het ingevulde gegeven of het value-attribuut naar de server verzonden.

  • <button name="…" … > … </button>
  • <input name="…" … />
  • <keygen name="…" … />
  • <output name="…" … > … </output>
  • <select name="…" … > … </select>
  • <textarea name="…" … > … </textarea>
  • HTML 5+
  • XHTML 5+
  • IE 10.0+
  • Chrome 4.0+
  • Firefox 4.0+
  • Safari 4.0+ *
  • Opera 9.6+ *

placeholder-attribuut

Bij de controle-elementtypen "text", "search", "url", "tel", "email" en "password" en bij <textarea>-elementen geeft het placeholder-attribuut aan welke tekst er in het invoerveld moet worden getoond als het leeg is en geen focus heeft. Meestal wordt dit grijs weergegeven. Deze tekst kan als een hint worden gebruikt voor wat de gebruiker moet invullen.

Standaard wordt er niks weergegeven.

Safari tot versie 5 en Opera tot versie 11.6 ondersteunen het attribuut niet voor <textarea>-elementen.

  • <input placeholder="…" … />
  • <textarea placeholder="…" … > … </textarea>
  • HTML 4.0+
  • XHTML 1.0+
  • IE 4.0+
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 5.0+

readonly-attribuut

Het booleaanse readonly-attribuut geeft bij de controle-elementtypen "text", "password", "search", "url", "tel", "email" en de typen voor de invoer van data en tijden en <textarea>-elementen aan dat de waarde niet gewijzigd mag worden door de gebruiker. Het verschilt van het disabled-attribuut doordat het element wel focus kan krijgen en tekst wel geselecteerd kan worden.

  • <input readonly="readonly" … />
  • <textarea readonly="readonly" … > … </textarea>
  • HTML 5+
  • XHTML 5+
  • IE 10.0+
  • Chrome 10.0+
  • Firefox 4.0+
  • Safari 5.0+
  • Opera 9.0+

required-attribuut

Het booleaanse required-attribuut geeft aan dat de gebruiker verplicht is het veld in te vullen voordat het formulier kan worden verzonden.

  • <input required="required" … />
  • <textarea required="required" … > … </textarea>
  • HTML 2.0+
  • XHTML 1.0+
  • IE 1.0+ *
  • Chrome 1.0+
  • Firefox 1.0+
  • Safari 1.0+
  • Opera 2.1+

value-attribuut

Het value-attribuut bepaalt de standaardwaarde van controle-elementen. Als deze waarde niet meer door gebruiker wordt bewerkt voordat het formulier verstuurd wordt (zoals bij onbewerkbare formulierelementen), dan is dit dus tevens de waarde die opgestuurd wordt.

Bij <input>-elementen met als type-attribuut "submit", "reset" of "button" bepaalt dit attribuut tegelijkertijd de tekst die op de knop wordt weergegeven.

Internet Explorer tot versie 8 ondersteunt dit attribuut niet voor <button>-elementen.

  • <button value="…" … > … </button>
  • <input value="…" … />