Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Formulieren

Het element <form>

Het <form>-element van HTML vertegenwoordigt een documentsectie die interactieve besturingselementen bevat voor het indienen van informatie.

Auteur: Maarten Soetens

Code 
<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>
Resultaat in de browser

Attributen

Dit element bevat de globale attributen.

accept Verouderd

Door komma's gescheiden content types die de server accepteert.

Opmerking

Dit attribuut is verouderd en mag niet worden gebruikt. Gebruik in plaats daarvan het accept-attribuut op <input type=file>-elementen.

accept-charset

De tekencodering die door de server wordt geaccepteerd. De specificatie staat een enkele hoofdletterongevoelige waarde van "UTF-8" toe, wat de alomtegenwoordigheid van deze codering weerspiegelt (historisch gezien konden meerdere tekencoderingen worden opgegeven als een door komma's of spaties gescheiden lijst).

autocapitalize

Bepaalt of ingevoerde tekst automatisch met een hoofdletter wordt geschreven en, zo ja, op welke manier. Zie de pagina van het globale attribuut autocapitalize voor meer informatie.

autocomplete

Geeft aan of invoerelementen standaard hun waarden automatisch kunnen laten aanvullen door de browser. autocomplete-attributen op formulierelementen overschrijven dit op <form>. Mogelijke waarden:
  • off: De browser vult mogelijk geen items automatisch aan. (Browsers negeren dit doorgaans voor vermoedelijke inlogformulieren; zie Autofill beheren voor inlogvelden.)
  • on: De browser mag items automatisch aanvullen.

name

De naam van het formulier. De waarde mag niet de lege string zijn, en moet uniek zijn onder de form-elementen in de forms-collectie waarin het zich bevindt, indien aanwezig. De naam wordt een eigenschap van de objecten Window, Document en document.forms, die een verwijzing naar het formulierelement bevat.

rel

Bepaalt de annotaties en welke soorten links het formulier creëert. Annotaties omvatten external, nofollow, opener, noopener en noreferrer. Linktypen omvatten help, prev, next, search en license. De waarde van rel is een door spaties gescheiden lijst van deze opgesomde waarden.

Attributen voor formulierverzending

De volgende attributen bepalen het gedrag tijdens het verzenden van het formulier.

action

De URL die de formulierverzending verwerkt. Deze waarde kan worden overschreven door een formaction-attribuut op een <button>, <input type="submit">, of <input type="image">-element. Dit attribuut wordt genegeerd wanneer method="dialog" is ingesteld.

enctype

Als de waarde van het method-attribuut post is, is enctype het MIME-type van de formulierverzending. Mogelijke waarden:

  • application/x-www-form-urlencoded: De standaardwaarde.
  • multipart/form-data: Gebruik dit als het formulier <input>-elementen met type=file bevat.
  • text/plain: Handig voor debugdoeleinden.

Deze waarde kan worden overschreven door formenctype-attributen op <button>, <input type="submit">, of <input type="image">-elementen.

method

De HTTP-methode waarmee het formulier wordt verzonden. De enige toegestane methoden/waarden zijn (niet hoofdlettergevoelig):

  • post: De POST-methode; formuliergegevens worden verzonden als de request body.
  • get (standaard): De GET-methode; formuliergegevens worden toegevoegd aan de action-URL met een ?-scheidingsteken. Gebruik deze methode wanneer het formulier geen neveneffecten heeft.
  • dialog: Wanneer het formulier zich binnen een <dialog> bevindt, sluit dit de dialoog en zorgt dit ervoor dat er bij verzending een submit-gebeurtenis wordt geactiveerd, zonder gegevens te verzenden of het formulier te wissen.

Deze waarde wordt overschreven door formmethod-attributen op <button>, <input type="submit">, of <input type="image">-elementen.

novalidate

Dit Booleaanse attribuut geeft aan dat het formulier niet gevalideerd hoeft te worden bij verzending. Als dit attribuut niet is ingesteld (en het formulier dus wel wordt gevalideerd), kan dit worden overschreven door een formnovalidate-attribuut op een <button>, <input type="submit">, of <input type="image">-element dat tot het formulier behoort.

target

Geeft aan waar de reactie moet worden weergegeven na het verzenden van het formulier. Het is een naam/trefwoord voor een browsing context (bijvoorbeeld een tabblad, venster of iframe). De volgende trefwoorden hebben een speciale betekenis:

  • _self (standaard): Laden in dezelfde browsing context als de huidige.
  • _blank: Laden in een nieuwe, naamloze browsing context. Dit levert hetzelfde gedrag op als het instellen van rel="noopener", wat window.opener niet instelt.
  • _parent: Laden in de bovenliggende browsing context van de huidige. Als er geen bovenliggende context is, gedraagt dit zich hetzelfde als _self.
  • _top: Laden in de browsing context op het hoogste niveau (dat wil zeggen, de browsing context die een voorouder is van de huidige en geen ouder heeft). Als er geen ouder is, gedraagt dit zich hetzelfde als _self.
  • _unfencedTop: Laadt de reactie van een formulier binnen een ingesloten fenced frame in het frame op het hoogste niveau (dat wil zeggen, verder gaand dan de wortel van het fenced frame, in tegenstelling tot andere gereserveerde bestemmingen). Alleen beschikbaar binnen fenced frames.

Deze waarde kan worden overschreven door een formtarget-attribuut op een <button>, <input type="submit">, of <input type="image">-element.

Voorbeelden

HTML
<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

Resultaat

Technische samenvatting

Inhoudscategorieën Flow content, palpable content
Toegestane inhoud Flow content, maar zonder <form>-elementen
Tag weglaten Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane ouders Elk element dat flow content accepteert
Impliciete ARIA-rol form
Toegestane ARIA-rollen search, none of presentation
DOM-interface HTMLFormElement

Zie ook

Verwante elementen

<button> <datalist> <fieldset> <input> <label> <legend> <meter> <optgroup>