From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- .../learn/forms/advanced_form_styling/index.html | 437 ----- .../forms/basic_native_form_controls/index.html | 1449 -------------- .../forms/how_to_structure_a_web_form/index.html | 965 ---------- files/nl/learn/forms/index.html | 359 ---- .../index.html | 1968 -------------------- .../sending_and_retrieving_form_data/index.html | 340 ---- files/nl/learn/forms/styling_web_forms/index.html | 345 ---- files/nl/learn/forms/your_first_form/index.html | 274 --- 8 files changed, 6137 deletions(-) delete mode 100644 files/nl/learn/forms/advanced_form_styling/index.html delete mode 100644 files/nl/learn/forms/basic_native_form_controls/index.html delete mode 100644 files/nl/learn/forms/how_to_structure_a_web_form/index.html delete mode 100644 files/nl/learn/forms/index.html delete mode 100644 files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html delete mode 100644 files/nl/learn/forms/sending_and_retrieving_form_data/index.html delete mode 100644 files/nl/learn/forms/styling_web_forms/index.html delete mode 100644 files/nl/learn/forms/your_first_form/index.html (limited to 'files/nl/learn/forms') diff --git a/files/nl/learn/forms/advanced_form_styling/index.html b/files/nl/learn/forms/advanced_form_styling/index.html deleted file mode 100644 index 11903ed7b2..0000000000 --- a/files/nl/learn/forms/advanced_form_styling/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: Geavanceerde styling van HTML-formulieren -slug: Learn/Forms/Advanced_form_styling -tags: - - CSS - - Formulieren - - Geavanceerd - - Gids - - HTML - - Web - - voorbeeld -translation_of: Learn/Forms/Advanced_form_styling -original_slug: Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren ---- -

In dit artikel wordt ingegaan op het gebruik van CSS in HTML-formulieren om moeilijk te stijlen widgetsaan te passen. Zoals in vorig artikel werd aangegeven vormen tekstvelden en knoppen geen enkel probleem in CSS. Hier wordt dieper ingegaan  op de donkere kant van het stijlen van HTML-formulieren.

- -

Even ter herinnering:

- -
-
The bad
-
Elementen die moeilijk aan te passen zijn en die ingewikkelde trucs nodig hebben en soms ook geavanceerde kennis van CSS3.
-
The ugly
-
Elementen die praktisch niet kunnen aangepast worden. In het beste geval kunnen enkele zaken gedaan worden maar die werken dan weer niet in andere browsers. Volledige controle over de stijl van dergelijke elementen is onmogelijk.
-
- -

CSS uiterlijk

- -

Het probleem met formulierwidgets andere dan tekstvelden en knoppen, is dat in veel gevallen CSS niet expressief genoeg is.

- -

Recent is daar wel verbetering in gekomen:

- - - -

Dit alles is een goed begin maar er zijn twee problemen: ten eerste een aantal browsers implementeert niet verder dan CSS 2.1. En ten tweede zijn deze nauwelijks voldoende om ingewikkelde formulieren te stylen. Zoals bijvoorbeeld datepicker dat toelaat een  datum te kiezen uit een lijst van datums.

- -

Er zijn bij sommige browsers experimenten gaande betreffende de presentatie van formulieren en soms is het nuttig te weten wat er bestaat.

- -
-

Waarschuwing: ondanks dat die experimenten aantrekkelijk lijken,  zijn zij niet standaard, hetgeen betekent dat zij niet betrouwbaar zijn. Gebruik ervan is op eigen risico en misschien is het beter van ze niet te gebruiken want men zou iets kunnen doen dat slecht is voor het Web door niet-standaard eigenschappen te gebruiken.

-
- - - -

De presentatie van formulierelementen instellen

- -

Browsers gebaseerd op WebKit (Chrome, Safari) en Gecko (Firefox) kunnen het best overweg met aanpassing van HTML-elementen. Zij zijn ook over platformen heen inzetbaar omdat zij een mechanisme hebben om over te schakelen tussen natuurlijk uitzicht en aanvoelen en elementen die door de gebruiker kunen aangepast worden.

- -

Hiertoe gebruiken zij de eigenschap: {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}. Deze eigenschappen zijn niet standaard en worden best niet gebruikt. Zij gedragen zich zelfs verschillend in WebKit en in Gecko. Eén waarde is wel goed te gebruiken: none. Met deze waarde heeft men (praktisch volledige) controle over de stijl van bepaalde widgets.

- -

Hieronder enkele voorbeelden. Het gebruik is het best aan te tonen bij zoekvelden met WebKit browsers:

- -
<form>
-    <input type="search">
-</form>
- -
<style>
-input[type=search] {
-    border: 1px dotted #999;
-    border-radius: 0;
-
-    -webkit-appearance: none;
-}
-</style>
- -
-

Nota: het is altijd moeilijk de toekomst te voorspellen betreffende webtechnologieën, maar CSS-uitbreidingen zijn niet eenvoudig en er gebeurt ook onderzoek naar andere specificaties zoals Shadow DOM  dat enig perspectief biedt. De zoektocht naar het volledig aanpasbaar formulier is nog lang niet over.

-
- -

Voorbeelden

- -

Keuzevakjes en keuzerondjes

- -

Het voorkomen van keuzevakjes en -rondjes is nogal rommelig. Zo is het bijvoorbeeld niet de bedoeling om de afmetingen van keuzevakjes en -rondjes te wijzigen en sommige browsers kunnen nogal verschillend reageren  wanneer men dit tracht te doen.

- -

Een eenvoudige test

- -
<span><input type="checkbox"></span>
- -
span {
-    display: inline-block;
-    background: red;
-}
-
-input[type=checkbox] {
-    width : 100px;
-    height: 100px;
-}
- -

Zo wordt dit in de verschillende browsers weergegeven:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BrowserRendering
Firefox 16 (Mac OSX)Rendering of a sized check box on Firefox
Chrome 22 (Mac OSX)Rendering of a sized check box on Chrome
Opera 12.01 (Mac OSX)Rendering of a sized check box on Opera
Internet Explorer 9 (Windows 7)Rendering of a sized check box on IE9
Internet Explorer 7 (Windows XP)Rendering of a sized check box on IE7
- -

Een ingewikkelder voorbeeld

- -

Omdat Opera en Internet Explorer geen eigenschappen hebben als {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}, is het niet mogelijk deze te gebruiken. CSS is gelukkig wel in staat om dit te omzeilen. Neem het volgend klassiek voorbeeld:

- -
<form>
-  <fieldset>
-    <p>
-      <input type="checkbox" id="first" name="fruit-1" value="cherry">
-      <label for="first">I like cherry</label>
-    </p>
-    <p>
-      <input type="checkbox" id="second" name="fruit-2" value="banana" disabled>
-      <label for="second">I can't like banana</label>
-    </p>
-    <p>
-      <input type="checkbox" id="third" name="fruit-3" value="strawberry">
-      <label for="third">I like strawberry</label>
-    </p>
-  </fieldset>
-</form>
- -

met als basisstijl:

- -
body {
-  font: 1em sans-serif;
-}
-
-form {
-  display: inline-block;
-
-  padding: 0;
-  margin : 0;
-}
-
-fieldset {
-  border : 1px solid #CCC;
-  border-radius: 5px;
-  margin : 0;
-  padding: 1em;
-}
-
-label {
-  cursor : pointer;
-}
-
-p {
-  margin : 0;
-}
-
-p+p {
-  margin : .5em 0 0;
-}
- -

Aanpassing van het keuzevakje:

- -

De bedoeling is het basis keuzevakje te vervangen door een eigen keuze. Onze keuze moet dezelfde toestanden kennen als het originele keuzevak. Deze toestanden zijn: aangevinkt, niet-aangevinkt, niet-aktief aangevinkt en niet-actief niet-aangevinkt. Dit ziet er als volgt uit:

- -

Check box CSS Sprite

- -

Vooreerst moeten de originele keuzevakjes verborgen worden. Daartoe worden ze buiten het gezichtsveld geplaatst. Hierbij moeten twee zaken in acht genomen worden:

- - - -
:root input[type=checkbox] {
-  /* original check box are push outside the viexport */
-  position: absolute;
-  left: -1000em;
-}
- -

Dan moet het eigen keuzevak toegevoegd worden. Daarvoor wordt gebruik gemaakt van het {{cssxref(":before")}} pseudo-element dat behoort bij het {{HTMLElement("label")}} element van het oorspronkelijk keuzevak. Dan wordt het keuzevak geselecteerd en door middel van de adjacent sibling selector wordt het bijbehorende label geselecteerd. Tenslotte wordt het {{cssxref(":before")}} pseudo-element ingevoegd en wordt bepaald hoe het keuzevakje er moet uitzien.

- -
:root input[type=checkbox] + label:before {
-  content: "";
-  display: inline-block;
-  width  : 16px;
-  height : 16px;
-  margin : 0 .5em 0 0;
-  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
-
-/* The following is used to adjust the position of
-   the check boxes on the text baseline */
-
-  vertical-align: bottom;
-  position: relative;
-  bottom: 2px;
-}
- -

De toestand van ket keuzevakje wordt vastgelegd met de {{cssxref(":checked")}} en {{cssxref(":disabled")}} pseudoklassen. Omdat er met CSS sprite wordt gewerkt moet alleen de positie van de achtergrond aangepast worden.

- -
:root input[type=checkbox]:checked + label:before {
-  background-position: 0 -16px;
-}
-
-:root input[type=checkbox]:disabled + label:before {
-  background-position: 0 -32px;
-}
-
-:root input[type=checkbox]:checked:disabled + label:before {
-  background-position: 0 -48px;
-}
- -

Er moet nog een (zeer) belangrijk punt afgewerkt worden. Als de gebruiker het toetsenbord gebruikt om tussen de widgets te navigeren, moet er visueel aangegeven worden welke widget de focus heeft. Omdat de originele keuzevakjes verborgen zijn, moet dat op een of andere manier opgevangen worden. Dit wordt op de volgende manier gedaan:

- -
:root input[type=checkbox]:focus + label:before {
-  outline: 1px dotted black;
-}
- -

Hier een voorbeeld:

- -

{{EmbedLiveSample("A_more_complex_example", 250, 130)}}

- -

Het probleem met select

- -

Het {{HTMLElement("select")}} element is een 'lelijk' element omdat het onmogelijk consistent kan gestyled worden over platformen heen. Er zijn nochtans enkele mogelijkheden. Een voorbeeld:

- -
<select>
-  <option>Cherry</option>
-  <option>Banana</option>
-  <option>Strawberry</option>
-</select>
- -
select {
-  width   : 80px;
-  padding : 10px;
-}
-
-option {
-  padding : 5px;
-  color   : red;
-}
- -

De volgende tabel toont hoe de verschillende browsers er mee omgaan. De twee eerste  kolommen zijn het gewone voorbeeld. De twee volgende kolommen geven aan wat er gebeurt met de widgets bij gebruik van aangepaste CSS:

- -
select, option {
-  -webkit-appearance : none; /* To gain control over the appearance on WebKit */
-  -moz-appearance : none; /* To gain control over the appearance on Gecko */
-
-  /* Om de weergave bij Presto (Opera) en Trident (IE) aan te passen.
-     Noteer dat dit ook werkt bij Gecko en deels bij WebKit */
-  background : none;
-}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BrowserNormale weergaveAangepaste weergave
geslotenopengeslotenopen
Firefox 16 (Mac OSX)Select closed on Firefox on Mac OSX (No tweak)Select open on Firefox on Mac OSX (No tweak)Select closed on Firefox on Mac OSXSelect open on Firefox on Mac OSX
Firefox 16 (Windows 7)Select closed on Firefox on Windows 7 (No tweak)Select open on Firefox on Windows 7 (No tweak)Select closed on Firefox on Windows 7Select open on Firefox on Windows 7
Chrome 22 (Mac OSX)Select closed on Chrome on Mac OSX (No tweak)Select open on Chrome on Mac OSX (No tweak)Select closed on Chrome on Mac OSXSelect open on Chrome on Mac OSX
Chrome 22 (Windows 7)Select closed on Chrome on Windows 7 (No tweak)Select open on Chrome on Windows 7 (No tweak)Select closed on Chrome on Windows 7Select open on Chrome on Windows 7
Opera 12.01 (Mac OSX)Select closed on Opera on Mac OSX (No tweak)Select open on Opera on Mac OSX (No tweak)Select closed on Opera on Mac OSXSelect open on Opera on Mac OSX
Internet Explorer 9 (Windows 7)Select closed on IE9 on Windows 7Select open on IE9 on Windows 7n.v.t.n.v.t.
Internet Explorer 7 (Windows XP)Select closed on IE7 on Windows XPSelect open on IE7 on Windows XPn.v.t.n.v.t.
- -

Ondanks het gebruik van de -*-appearance eigenschap zijn er nog enkele problemen:

- - - -

En dit voorbeeld gaat slechts over drie CSS-eigenschappen. Wat als er nog meer eigenschappen zijn? Zoals het voorbeeld aantoont kan met CSS de voorstelling en het aanvoelen van deze widgets niet consequent toegepast worden. Maar een en ander kan wel aangepast worden als men aanvaardt dat er kleine verschillen zullen zijn tussen de ene browser en de andere en tussen het ene besturingssysteem en het andere.

- -

In het volgend artikel wordt nagegaan welke eigenschappen in aanmerking komen: Tabel van compatibele formulierelementen.

- -

De weg naar mooiere formulieren: nuttige bibliotheken en polyfills

- -

Terwijl CSS zeer bruikbaar is voor keuzevakjes en keuzerondjes, is dat niet zo voor geavanceerde elementen. Ondanks dat enkele zaken mogelijk zijn met het  {{HTMLElement("select")}} element, kan de bestandsdialoog helemaal niet aangepast worden. Hetzelfde geldt voor datumpicker, enz.

- -

Als volledige controle over formulierelementen gewenst is, zit er niets anders op dan JavaScript te gebruiken. In het artikel Het maken van aangepaste widgets wordt getoond hoe men zelf widgets kan aanpassen, maar er zijn ook enkele bibliotheken die van nut kunnen zijn:

- - - -

De volgende bibliotheken zijn niet uitsluitend voor formulieren, maar zijn zeer interessant:

- - - -

Houd er echter rekening mee dat de combinatie van CSS en JavaScript ook neveneffecten kan hebben. Bij gebruik van deze bibliotheken dient men steeds te beschikken over stylesheets waarop men kan terugvallen als het script niet werkt. Er zijn vele redenen waarom een script niet werkt, vooral in de mobiele wereld. En een website of een app moet er op voorzien zijn om deze gevallen op te vangen.

- -

Besluit

- -

Ondanks dat er hiaten zijn bij het gebruik van CSS in HTML-formulieren, is er dikwijls toch wel een manier om deze te omzeilen. Er is geen algemene oplossing, maar de moderne browsers bieden altijd nieuwe mogelijkheden. Voor 't ogenblik is de beste oplossing te leren hoe de verschillende browsers CSS ondersteunen bij het maken van HTML-formulieren.

- -

In het volgend artikel wordt ingegaan op hoe de diverse HTML-formulierelementen de meest belangrijke CSS eigenschappen ondersteunen: Tabel van compatibele formulierelementen.

- -

Zie ook

- - diff --git a/files/nl/learn/forms/basic_native_form_controls/index.html b/files/nl/learn/forms/basic_native_form_controls/index.html deleted file mode 100644 index 5b83a25f57..0000000000 --- a/files/nl/learn/forms/basic_native_form_controls/index.html +++ /dev/null @@ -1,1449 +0,0 @@ ---- -title: The native form widgets -slug: Learn/Forms/Basic_native_form_controls -tags: - - Formulier - - HTML - - HTML5 - - voorbeeld -translation_of: Learn/Forms/Basic_native_form_controls -original_slug: Learn/HTML/Forms/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

- -

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compatibiliteits tabel
Functie op bureaubladChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}1.0{{CompatGeckoDesktop("1.0")}}61.01.0
{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}1.0{{CompatGeckoDesktop("1.0")}}61.01.0
{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}10.0{{CompatGeckoDesktop("4.0")}}1011.104.0
{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}10.0{{CompatGeckoDesktop("4.0")}}1011.505.0
{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}10.0{{CompatGeckoDesktop("3.6")}}1011.04.0
Functie op mobiel apparaatAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}2.3{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}11.104
{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}{{CompatUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}11.504
{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}{{CompatUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}11.0{{CompatUnknown()}}
- -

Eenregelige tekstvelden

- -

Een tekstveld van één regel wordt bekomen met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut text is. Text is de defaultwaarde. Dus ook zonder het {{htmlattrxref("type","input")}} 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  {{htmlattrxref("pattern","input")}} 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 {{htmlattrxref("type","input")}} 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 {{htmlattrxref("type","input")}} 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 {{htmlattrxref("multiple","input")}} attribuut.

- -

Veld voor paswoord

- -

Dit veld wordt ingesteld door de waarde password op te geven voor het {{htmlattrxref("type","input")}} 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 {{htmlattrxref("type","input")}} 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  {{htmlattrxref("type","input")}} 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 {{htmlattrxref("type","input")}} 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
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="text"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="email"10.0{{CompatGeckoDesktop("4.0")}}1010.62{{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="password"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="search"5.0{{CompatGeckoDesktop("4.0")}}1011.015.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="tel"5.0{{CompatGeckoDesktop("4.0")}}1011.015.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="url"10.0{{CompatGeckoDesktop("4.0")}}1010.62{{CompatUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="text"{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="email"{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="password"{{CompatUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="search"{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatVersionUnknown()}}4.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="tel"2.3{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatVersionUnknown()}}3.1
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="url"{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatVersionUnknown()}}3.1
- -

Tekstvelden met meerdere regels

- -

Het {{HTMLElement("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 {{cssxref("resize")}} kan de gebruiker rechtstreeks de grootte van het veld aanpassen.

- -

Screenshots of multi-lines text fields on several platforms.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compatibiliteitstabel
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("textarea")}}{{CompatVersionUnknown()}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("textarea")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

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 {{HTMLElement("select")}} element met één of meerdere {{HTMLElement("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 {{htmlattrxref("selected","option")}} attribuut bij de gewenste optie. De {HTMLElement("option")}} elementen kunnen ook genest worden in  {{HTMLElement("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
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("select")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("option")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("optgroup")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("select")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("option")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("optgroup")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

Meerkeuzelijst

- -

De eenvoudige keuzelijst laat slechts één keuze toe. Door het {{htmlattrxref("multiple","select")}} attribuut toe te voegen aan het {{HTMLElement("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 {{HTMLElement("select")}} element ondersteunen, ondersteunen het {{htmlattrxref("multiple","select")}} attribuut.
- -

Autoaanvullen

- -

Met het {{HTMLElement("datalist")}} element samen met de {{HTMLElement("option")}} elementen  wordt een veld voor autoaanvullen getoond. Dit datalist element roept het  {{htmlattrxref("list","input")}} 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 {{htmlattrxref("list","input")}} attribuut en het {{HTMLElement("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
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("datalist")}}20.0{{CompatGeckoDesktop("4.0")}}109.6{{CompatNo()}}
{{HTMLElement("input")}}.{{htmlattrxref("list","input")}}20.0{{CompatGeckoDesktop("4.0")}}109.6{{CompatNo()}}
Mobile fuctieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("datalist")}}{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}
{{HTMLElement("input")}}.{{htmlattrxref("list","input")}}{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}
- -

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 {{htmlattrxref("checked","input")}} 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 {{htmlattrxref("name","input")}} 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 {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} 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
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="checkbox"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="checkbox"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

Het keuzerondje

- -

Een keuzerondje wordt gemaakt door het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut  radio is.

- -
<input type="radio" checked>
- -

Keuzerondjes kunnen gebundeld worden. Wanneer de naam in hun {{htmlattrxref("name","input")}} 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
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="radio"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="radio"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

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 {{HTMLElement("button")}} element of een {{HTMLElement("input")}} element. Het soort knop wordt bepaald door het {{htmlattrxref("type","input")}} 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 {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element zich identiek. Er zijn echter kleine verschillen:

- - - -

Screenshots of buttons on several platforms.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="submit"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="reset"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="button"1.0{{CompatGeckoDesktop("1.0")}}31.01.0
{{HTMLElement("button")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}
- (Buggy before IE8)		{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="reset"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="button"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("button")}}1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

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 {{HTMLElement("input")}} element en number als {{htmlattrxref("type","input")}} 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 {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen. De waarde van het increment van de knoppen kan opgegeven worden met het {{htmlattrxref("step","input")}} 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
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number"11.0{{CompatNo()}} {{bug('344616')}}10
- (herkend maar geen UI)		{{CompatVersionUnknown()}}5.2
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number"2.3{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}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 {{HTMLElement("input")}} element met {{htmlattrxref("type","input")}} attribuut range. Hij moet wel correct ingesteld zijn met zijn {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} en {{htmlattrxref("step","input")}} 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
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="range"5.023.01010.624.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="range"{{CompatNo()}}23.0{{CompatNo()}}10.625.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 {{HTMLElement("input")}} element met de juiste instelling van het {{htmlattrxref("type","input")}} 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 {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} 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
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="date"20.0{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime-local"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="month"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="time"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="week"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="date"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.625.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime-local"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="month"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="time"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="week"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
- -
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 {{HTMLElement("input")}} element met color als {{htmlattrxref("type","input")}} attribuut.

- -
<input type="color">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="color"21.0{{CompatNo()}} {{bug('547004')}}{{CompatNo()}}11.01{{CompatNo()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="color"{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatUnknown()}}{{CompatNo()}}
- -

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 {{HTMLElement("input")}} element met file als {{htmlattrxref("type","input")}} attribuut. Het type bestand kan ingesteld worden met het {{htmlattrxref("accept","input")}} attribuut. Indien de gebruiker meerdere bestanden kan kiezen wordt het {{htmlattrxref("multiple","input")}} attribuut gebruikt.

- -

Voorbeeld

- -

In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.

- -
<input type="file" accept="image/*" multiple>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="file"1.0{{CompatGeckoDesktop("1.0")}}3.021.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="file"{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
- -

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 {{HTMLElement("input")}} element met hidden als {{htmlattrxref("type","input")}} attribuut.

- -

Dit element vereist ook de name en value attributen:

- -
<input type="hidden" name="timestamp" value="1286705410">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Compatibiliteitstabel
Feature DesktopChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="hidden"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="hidden"{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

Afbeelding

- -

De afbeeldings widget wordt op dezelfde manier getoond als het {{HTMLElement("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 {{HTMLElement("input")}} element en image als {{htmlattrxref("type","input")}} attribuut. Dit element ondersteunt dezelfde attributen als het  {{HTMLElement("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 {{htmlattrxref("name","input")}} attribuut gevolgd door ".x" en de sleutel van de Y-waarde is het {{htmlattrxref("name","input")}} 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
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="image"1.01.021.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="image"{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
- -

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 {{htmlattrxref("max","progress")}} attribuut. De balk wordt gecreëerd door het {{ HTMLElement("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 {{htmlattrxref("min","meter")}} en {{htmlattrxref("max","meter")}}. Deze waarde wordt visueel voorgesteld door een balk. Hoe deze balk er uit ziet wordt bepaald door bepaalde parameters:

- - - -

Alle browsers die het {{HTMLElement("meter")}} element ondersteunen gebruiken de deze waarden om de kleur van de balk aan te passen:

- - - -

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
DesktopfunctiesChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("progress")}}6.0{{CompatGeckoDesktop("6.0")}}1010.65.2
{{HTMLElement("meter")}}6.0{{CompatGeckoDesktop("16.0")}}{{CompatNo()}}11.05.2
Mobiele functiesAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("progress")}}{{CompatNo()}}{{CompatGeckoMobile("6.0")}}{{CompatNo()}}11.0{{CompatUnknown()}}
{{HTMLElement("meter")}}{{CompatNo()}}{{CompatGeckoMobile("16.0")}}{{CompatNo()}}11.0{{CompatUnknown()}}
- -

Zie ook

- -

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

- - diff --git a/files/nl/learn/forms/how_to_structure_a_web_form/index.html b/files/nl/learn/forms/how_to_structure_a_web_form/index.html deleted file mode 100644 index 9bdc0006b5..0000000000 --- a/files/nl/learn/forms/how_to_structure_a_web_form/index.html +++ /dev/null @@ -1,965 +0,0 @@ ---- -title: How to structure an HTML form -slug: Learn/Forms/How_to_structure_a_web_form -tags: - - Attribuut - - Element - - HTML - - voorbeeld -translation_of: Learn/Forms/How_to_structure_a_web_form -original_slug: Learn/HTML/Forms/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 toegankelijk 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 {{HTMLElement("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  {{HTMLElement("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 {{HTMLElement("form")}} element ondersteunt de volgende attributen (allemaal optioneel):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("form")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("accept-charset","form")}}UNKNOWNEen 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.
{{htmlattrxref("action","form")}}De URI van een webpagina die de informatie van het formulier verwerkt.
{{htmlattrxref("autocomplete","form")}}onGeeft 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.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencodedAls 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  {{HTMLElement("input")}} element waarvan het type attribuut  file is.
    • -
  • text/plain
    • -
-
{{htmlattrxref("method","form")}}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.

-
{{htmlattrxref("name","form")}}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.
{{htmlattrxref("novalidate","form")}}(false)Dit attribuut geeft aan dat het formulier niet moet gevalideerd worden bij verzending.
{{htmlattrxref("target","form")}}_selfEen naam of een sleutelwoord die aangeven waar het antwoord van de server moet getoond worden na verzending van het formulier. Dit kan bijvoorbeeld een  {{HTMLElement("iframe")}}, een tab of een venster zijn. Volgende sleutelwoorden zijn mogelijke waarden voor dit attribuut: -
    -
  • _self: Laad het antwoord in de huidige browser configuratie ({{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("fieldset")}} element dient om widgets die dezelfde functie hebben te bundelen. Een {{HTMLElement("fieldset")}} element kan een {{HTMLElement("legend")}} element hebben. Het {{HTMLElement("legend")}} element beschrijft formeel het doel van het  {{HTMLElement("fieldset")}} element. Veel ondersteunende technologieën herkennen het  {{HTMLElement("legend")}} element als deel van het label van elke widget binnen het  {{HTMLElement("fieldset")}} element. Zo lezen sommige schermlezers, 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 {{HTMLElement("fieldset")}} element is zeer belangrijk. Keuzerondjes bijvoorbeeld moeten steeds binnen een {{HTMLElement("fieldset")}} element ondergebracht worden. In het algemeen kan het {{HTMLElement("fieldset")}} element ook een formulier in secties verdelen. Omwille van zijn invloed op ondersteunende technologieën is het {{HTMLElement("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 {{HTMLElement("fieldset")}} element ondersteunt volgende specifieke attributen:

- - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("fieldset")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("disabled","fieldset")}}(false)Als dit attribuut true is zijn de widgets van de formulieren die afhankelijk zijn van het huidige formulier (behalve deze van het eerste {{HTMLElement("legend") }} element) niet geactiveerd en dus niet bruikbaar.  Deze zijn in de meeste browsers grijs gekleurd.
- -

Het <label> element

- -

Het {{HTMLElement("label")}} element definieert formeel het label van een HTML widget. Dit is het belangrijkste element om toegankelijke formulieren te maken.

- -

Het {{HTMLElement("label")}} element heeft de volgende attributen:

- - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("label")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("for","label")}}De ID van een widget met een label in hetzelfde document als het {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("output")}} element ondersteunt de volgende attributen:

- - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("output")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("for","output")}}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 {{HTMLElement("p")}} of {{HTMLElement("div")}} elementen geplaatst.

- -

Samen met het {{HTMLElement("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
{{EmbedLiveSample("A_payment_form",460,600, "", "HTML/Forms/How_to_structure_an_HTML_form/Example")}}
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 {{HTMLElement("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 {{HTMLElement("input")}} element):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Waarde van het type attribuutBeschrijvingVereiste attributenRelevante attributen
Eenregelige tekstvelden
textDit 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.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
emailEen veld dat alleen e-mailadressen toelaat.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
passwordDe waarde van dit tekstveld wordt verborgen.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
searchEen veld om zoekwoorden in te geven.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
telEen veld om een telefoonnummer in te geven.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
urlEen veld om een absolute URL in te geven.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
Widgets zonder tekstingave
checkboxEen keuzevakje.{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
colorEen widget om een kleur te kiezen.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileEen widget om een bestand te kiezen.{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hiddenEen widget die niet getoond wordt maar waarvan de waarde toch naar de server gestuurd wordt.
numberEen widget voor ingave van een getal met drijvende komma.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radioEen keuzerondje. Slechts één van een gegeven groep kan gekozen worden.{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
rangeEen widget om een getal in te geven waarvan de waarde niet belangrijk is.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
Widgetsvoor datum en tijd -
Niet ondersteund.
-
dateEen veld om de datum in te geven (jaar, maand en dag, geen tijd). -
Niet geïnstalleerd (zie bug 825294)
- 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeEen 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)
- 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-localEen veld om een datum en tijd in te geven zonder tijdzone. -
Niet geïnstalleerd (zie bug 825294)
- 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
monthEen veld voor ingave van maand en jaar, zonder tijdzone. -
Niet geïnstalleerd (zie bug 446510)
- 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
timeEen veld om een tijd in te geven zonder tijdzone. -
Niet geïnstalleerd zie bug 825294)
- 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
weekEen veld om een datum in te geven bestaande uit een week-jaarnummer en een weeknummer zonder tijdzone. -
Niet geïnstalleerd (zie bug 825294)
- 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
Knoppen
buttonEen knop zonder default gedrag.{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
imageKnop om grafisch element te verzenden.{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
resetEen knop die de inhoud van het formulier terugzet naar de defaultwaarden.{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submitKnop die het formulier verzendt.{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
- -

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

- -

Ondanks dat het {{HTMLElement("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 {{HTMLElement("textarea")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("cols","textarea")}}20De zichtbare tekstbreedte in gemiddelde karakterbreedten.
{{htmlattrxref("rows","textarea")}}Het aantal zichtbare regels in het tekstveld.
{{htmlattrxref("wrap","textarea")}}softGeeft aan hoe het veld de tekst afbreekt. Mogelijke waarden zijn: hard of soft
- -

Het {{HTMLElement("textarea")}} element werkt enigszins anders dan het {{HTMLElement("input")}} element. Het {{HTMLElement("input")}} element is een zelfsluitend element. Dit betekent dat het geen afstammelingen kan hebben. Het {{ HTMLElement("textarea")}} element daarentegen is een gewoon element dat afstammelingen kan hebben met tekstinhoud.

- -

Dit heeft twee consequenties:

- - - -

In het volgende voorbeeld worden beide {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("option")}} element en deze elementen kunnen gegroepeerd worden binnen {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("option")}} element die gebruikt wordt als de waarde van het keuzevak.

- -

Bij het {{HTMLElement("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 {{HTMLElement("option")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("label","option")}}Dit is de tekst van de optie. Het is deze tekst die getoond wordt als het label attribuut niet gedefinieerd is.
{{htmlattrxref("selected","option")}}(false)Geeft aan dat de optie geselecteerd is.
- - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("optgroup")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("label","optgroup")}}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 {{HTMLElement("option")}} elementen binnen een {{HTMLElement("datalist")}} element geplaatst.

- -

Om een widget aan een {{HTMLElement("datalist")}} element te binden wordt het list attribuut van de widget gebruikt. Deze vermeldt het id attribuut van het {{HTMLElement("datalist")}} element dat gebruikt moet worden.

- -

Het {{HTMLElement("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 {{HTMLElement("datalist")}} element begrijpen de elementen die geen {{HTMLElement("option")}} elementen zijn en werken zoals verwacht. Anderzijds tonen de browsers die het {{HTMLElement("datalist")}} element niet begrijpen het label en het selectievakje. Natuurlijk zijn er andere methoden om het niet begrijpen van het {{HTMLElement("datalist")}} element op te lossen maar die vereisen het gebruik van van JavaScript, wat niet altijd de juiste oplossing is.

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot 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:

- - - -

Hierdoor hebben deze elementen een specifieke set attributen:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("meter")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("min","meter")}}0De ondergrens van de numerieke waarde van het gemeten interval.
{{htmlattrxref("max","meter")}}1De bovengrens van de  numerieke waarde van het gemeten interval.
{{htmlattrxref("low","meter")}}the min valueDe hoogste numerieke waarde van de ondergrens van het gemeten interval.
{{htmlattrxref("high","meter")}}the max valueDe laagste numerieke waarde van de bovengrens van het gemeten interval.
{{htmlattrxref("optimum","meter")}}De optimale numerieke waarde.
- - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("progress")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("max","progress")}}Dit attribuut geeft aan hoeveel werk er nog moet gedaan worden door de taak aangeduid door het {{HTMLElement("progress")}} element.
- -

Het <button> element

- -

Een {{HTMLElement("button")}} element toont een knop. Een knop kan drie functies hebben afhankelijk van het type attribuut:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributen van het {{HTMLElement("button")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("type","button")}}submitHet type knop. Mogelijke waarden zijn: button, reset, or submit.
{{htmlattrxref("formaction","button")}}Bij de verzendknop zal dit attribuut de waarde van het action attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formenctype","button")}}Bij de verzendknop zal dit attribuut de waarde van het enctype attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formmethod","button")}}Bij de verzendknop zal dit attribuut de waarde van het method attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formnovalidate","button")}}Bij de verzendknop zal dit attribuut de waarde van het novalidate attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formtarget","button")}}Bij de verzendknop zal dit attribuut de waarde van het target attribuut van het {{HTMLElement("form")}} element overschrijven.
- -

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

- -
Nota: Omwille van historische redenen werd het {{HTMLElement("button")}} element niet vaak gebruikt en ontwikkelaars gaven de voorkeur aan knoppen gemaakt met het {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("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 naamDefaultwaardeBeschrijving
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 {{HTMLElement("fieldset")}} element: als er geen omvattend element is met het disabled attribuut ingesteld dan is het element actief.
formHet formulierelement waar de widget mee geassocieerd is. De waarde van het attribuut moet het id attribuut zijn van een {{HTMLElement("form")}} element in hetzelfde document. Theoretisch kan een widget buiten een formulier gebruikt worden maar er is geen enkele browser die dit ondersteunt.
nameDe naam van het element. Deze wordt  mee verzonden met de gegevens.
valueDe 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 {{HTMLElement("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 {{HTMLElement("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. Echter wordt het juist aanbevolen om aria-describedby wel te gebruiken om invoervelden te omschrijven (naast het label element). Zoals hoelang een wachtwoord moet zijn (zie voorbeeld).

- -
<form>
-  <label for="pw">
-    Password
-  </label>
-  <input type="password" id="pw" aria-describedby="pw_desc">
-  <p id="pw_desc">
-    Please enter at least 12 characters.
-  </p>
-</form>
- -

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

- - diff --git a/files/nl/learn/forms/index.html b/files/nl/learn/forms/index.html deleted file mode 100644 index 886250cfb7..0000000000 --- a/files/nl/learn/forms/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: HTML forms guide -slug: Learn/Forms -tags: - - Featured - - Forms - - Guide - - HTML - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -

This guide is a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!

- -

Articles

- -
    -
  1. My first HTML form
    2. -
  2. How to structure an HTML form
    3. -
  3. The native form widgets
    4. -
  4. CSS with HTML forms -
      -
    1. Styling HTML forms
      2. -
    2. Advanced styling for HTML forms
      3. -
    3. Property compatibility table for form widgets
      4. -
    -
    5. -
  5. Sending and retrieving form data
    6. -
  6. Data form validation
    7. -
  7. How to build custom form widgets
    8. -
  8. Sending forms through JavaScript -
      -
    1. Using the FormData object
      2. -
    -
    9. -
  9. HTML forms in legacy browsers
    10. -
- -

HTML Documentation

- -

HTML Elements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other form elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enables a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
- -
-

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

-
- -

HTML Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form data when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belong to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited or not.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("img") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("img") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped or not.
- -

Normative reference

- - diff --git a/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html deleted file mode 100644 index 2b3f8d8db2..0000000000 --- a/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html +++ /dev/null @@ -1,1968 +0,0 @@ ---- -title: Compatibiliteitstabel voor formulierelementen -slug: Learn/Forms/Property_compatibility_table_for_form_controls -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls -original_slug: Compatibiliteitstabel_voor_formulierelementen ---- -

De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.

- -

Hoe de tabellen lezen

- -

Waarden

- -

Voor elke eigenschap zijn er vier mogelijke waarden:

- -
-
JA
-
De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.
-
GEDEELTELIJK
-
Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.
-
NEEN
-
De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.
-
N.V.T.
-
De eigenschap heeft geen enkele betekenis voor dit type of element.
-
- -

Weergave

- -

Elke eigenschap wordt op twee manieren weergegeven:

- -
-
N (Normaal)
-
Betekent dat de eigenschap gewoon toegepast kan worden.
-
A (Aangepast)
-
Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:
-
- -
* {
-/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */
-  -webkit-appearance: none;
-
-/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */
-  -moz-appearance: none;
-
-/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip
-  van Opera, Internet Explorer en Firefox */
-  background: none;
-}
- -

Compatibiliteitstabellen

- -

Globaal gedrag

- -

Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:

- -
-
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
-
Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.
-
{{cssxref("line-height")}}
-
Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.
-
{{cssxref("text-decoration")}}
-
Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.
-
{{cssxref("text-overflow")}}
-
Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.
-
{{cssxref("text-shadow")}}
-
Opera ondersteunt {{cssxref("text-shadow")}}  niet voor formulierelementen en IE9 ondersteunt het helemaal niet.
-
- -

Tekstvelden

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. -
  2.  Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. -
-
{{cssxref("border")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. -
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. -
-
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. -
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. -
-
Tekst en font
{{cssxref("color")}}[1]JaJa -
    -
  1. Als de {{cssxref("border-color")}} eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de {{cssxref("color")}} eigenschap toepassen op de rand en font voor {{HTMLElement("textarea")}}.
    2. -
-
{{cssxref("font")}}JaJaZie de nota over {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}JaJa 
{{cssxref("text-decoration")}}GedeeltelijkGedeeltelijkZie nota betreffende Opera
{{cssxref("text-indent")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.
    2. -
-
{{cssxref("text-overflow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}JaJa 
Rand en achtergrond
{{cssxref("background")}}Gedeeltelijk[1]Ja -
    -
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden.  Hiertoe moet -webkit-appearance:none   aangewend worden.  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
    2. -
-
{{cssxref("border-radius")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet -webkit-appearance:none aangewend worden .  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
    2. -
  2. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
    3. -
-
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Knoppen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Ja -
    -
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
    2. -
-
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Ja -
    -
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
    2. -
-
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie nota over  {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}GedeeltelijkJa 
{{cssxref("text-indent")}}JaJa 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}JaJa 
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Ja[1]Ja[1] -
    -
  1. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
    2. -
-
{{cssxref("box-shadow")}}NeenPartial[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Number

- -

Bij browsers die het  number  element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het  veld aanpast, te  wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
    2. -
-
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
    2. -
-
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie nota over {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}JaJa 
{{cssxref("text-decoration")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-indent")}}JaJa 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}NeenNeen -

Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.

-
{{cssxref("border-radius")}}NeenNeen
{{cssxref("box-shadow")}}NeenNeen
- -

Keuzevakjes en keuzerondjes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}Neen[1]Neen[1] -
    -
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
    2. -
-
{{cssxref("height")}}Neen[1]Neen[1] -
    -
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
    2. -
-
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Text and font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
- -

Keuzevakken (éénregelig)

- -

Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.
    2. -
-
{{cssxref("height")}}NeenJa 
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Neen[1]Gedeeltelijk[2] -
    -
  1. De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.
    2. -
  2. Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.
    3. -
-
Tekst en font
{{cssxref("color")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het   {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.
    2. -
-
{{cssxref("font")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het   {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.
    2. -
-
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eiegenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.  WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.
    2. -
-
{{cssxref("text-align")}}Neen[1]Neen[1] -
    -
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.
    2. -
-
{{cssxref("text-decoration")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
-
{{cssxref("text-indent")}}Gedeeltelijk[1][2]Gedeeltelijk[1][2] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
  2. IE9 ondersteunt deze eigenschap niet.
    3. -
-
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}Gedeeltelijk[1][2]Gedeeltelijk[1][2] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
  2. IE9 ondersteunt deze eigenschap niet.
    3. -
-
{{cssxref("text-transform")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
-
Rand en achtergrond
{{cssxref("background")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
-
{{cssxref("border-radius")}}Gedeeltelijk[1]Gedeeltelijk[1]
{{cssxref("box-shadow")}}NeenGedeeltelijk[1]
- -

Keuzevakken (meerregelig)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.
    2. -
-
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie de nota betreffende {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.
    2. -
-
{{cssxref("text-align")}}Neen[1]Neen[1] -
    -
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.
    2. -
-
{{cssxref("text-decoration")}}Neen[1]Neen[1] -
    -
  1. Alleen ondersteund door Firefox en IE9+.
    2. -
-
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.
    2. -
-
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Ja[1]Ja[1] -
    -
  1. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.
    2. -
-
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Datalist

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}NeenNeen 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}NeenNeen 
{{cssxref("font")}}NeenNeen 
{{cssxref("letter-spacing")}}NeenNeen 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}Neen -

Neen

- 		 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
- -

Bestandslijst

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Veel browsers passen deze eigenschap toe op de selectieknop.
    2. -
-
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Reageert min of meer als een extra linker marge buiten het element.
    2. -
-
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Border and background
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Datumselectie

- -

Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
-  

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}NeenNeen 
{{cssxref("font")}}NeenNeen 
{{cssxref("letter-spacing")}}NeenNeen 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
- -

Kleurenselectie

- -

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Neen[1]Ja -
    -
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
    2. -
-
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Neen[1]Ja -
    -
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
    2. -
-
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
- -

Meters en voortgangsbalken

- -

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}JaGedeeltelijk[1] -
    -
  1. Chrome verbergt de {{HTMLElement("progress")}} en  {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.
    2. -
-
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
- -

Bereik

- -

Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.
    2. -
-
{{cssxref("border")}}NeenJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Ja -
    -
  1. {{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.
    2. -
-
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Border and background
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
- -

Afbeeldingsknoppen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}JaJa 
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
{{cssxref("box-shadow")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

 

diff --git a/files/nl/learn/forms/sending_and_retrieving_form_data/index.html b/files/nl/learn/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index 2ba87686f9..0000000000 --- a/files/nl/learn/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Formuliergegevens verzenden -slug: Learn/Forms/Sending_and_retrieving_form_data -tags: - - Beginner - - Bestanden - - Formulieren - - HTML - - HTTP - - Headers - - Veiligheid - - Web -translation_of: Learn/Forms/Sending_and_retrieving_form_data -original_slug: Learn/HTML/Forms/Verzenden_van_formuliergegevens ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
- -

In dit artikel wordt ingegaan op wat er gebeurt wanneer de gebruiker een formulier verstuurd - waar gaan de gegevens naar toe en wat te doen als de gegevens er aan komen? Er wordt ook ingegaan op enkele veiligheidsaspecten in verband met het verzenden van formuliergegevens.

- - - - - - - - - - - - -
Voorafgaande kennis:Basis computergebruik,  inleiding tot HTML en basiskennis HTTP en programmering aan de kant van de server.
Doel:Begrijpen wat er gebeurt wanneer formuliergegevens verzonden worden met inbegrip van hoe de gegevens verwerkt worden door de server.
- -

Waar gaan de gegevens naar toe?

- -

Hier wordt besproken wat er gebeurt met de gegevens wanneer een formulier wordt verzonden.

- -

Client/server architectuur

- -

Het web is gebaseerd op een client/server architectuur die als volgt kan samengevat worden: een client (meestal een webbrowser) stuurt een verzoek naar een server (meestal een webserver zoals  Apache, Nginx, IIS, Tomcat, enz.) gebruik makend van het  HTTP protocol. De server beantwoordt het verzoek met hetzelfde protocol.

- -

A basic schema of the Web client/server architecture

- -

Aan de zijde van de client is een HTML formulier niet meer dan een gebruiksvriendelijke manier om een  HTTP verzoek te verzenden naar een server. Dit laat de gebruiker toe gegevens in te geven in het HTTP-verzoek.

- -
-

Nota: Zie Eerste stappen in programmering van websites aan de kant van de server om een beter idee te krijgen van hoe de client-server architectuur werkt.

-
- -

Aan de zijde van de client: bepalen hoe de gegevens te verzenden

- -

Het {{HTMLElement("form")}} element bepaalt hoe de gegevens zullen verzonden worden. Alle attributen zijn aanwezig om het verzoek samen te stellen en te verzenden wanneer de gebruiker op "Verzenden" klikt. De twee belangrijkste attributen zijn {{htmlattrxref("action","form")}} en {{htmlattrxref("method","form")}}.

- -

Het {{htmlattrxref("action","form")}} attribuut

- -

Dit attribuut bepaalt waar de gegevens naar toe zullen gezonden worden. De waarde moet een geldige URL zijn. Als dit attribuut niet opgegeven wordt, worden de gegevens verzonden naar de URL van de pagina waarop het formulier staat.

- -

In volgend voorbeeld worden de gegevens verzonden naar een absolute URL — http://foo.com:

- -
<form action="http://foo.com">
- -

Hier wordt gebruik gemaakt van een relatieve URL  — de gegevens worden verzonden naar een andere URL op de server:

- -
<form action="/somewhere_else">
- -

Als er geen attributen gespecifieerd worden, worden de {{HTMLElement("form")}}gegevens verstuurd naar de pagina waarop het formulier staat:

- -
<form>
- -

Oudere pagina's gebruiken de volgende notatie om aan te geven dat de gegevens moeten verstuurd worden naar dezelfde pagina als waar het formulier op staat. Dit was nodig omdat tot HTML5 het {{htmlattrxref("action", "form")}} attribuut  vereist was. Dit is niet langer meer nodig.

- -
<form action="#">
- -
-

Nota: het is mogelijk om een URL te specifiëren die gebruik maakt van het HTTPS  (secure HTTP) protocol. Dan worden de gegevens samen met de rest van het verzoek versleuteld zelfs wanneer het formulier op een niet versleutelde pagina staat die met HTTP benaderd werd. Als het formulier daarentegen op een versleutelde pagina staat en er wordt een onversleutelde HTTP URL gevraagd met het {{htmlattrxref("action","form")}} attributut, zullen alle browsers een veiligheidswaarschuwing tonen zodra de gebruiker gegevens tracht te verzenden omdat zij niet versleuteld zullen worden.

-
- -

Het {{htmlattrxref("method","form")}} attribuut

- -

Dit attribuut bepaalt hoe de gegevens worden verzonden. Het HTTP protocol voorziet diverse methoden om een verzoek op te stellen. De twee meest gebruikte methoden zijn de GET en de POST methoden.

- -

Om het verschil te kennen moet gekeken worden naar hoe HTTP werkt. Elke keer de gebruiker iets zoekt op het internet zendt de browser een verzoek naar een URL. Een HTTP verzoek bestaat uit twee delen: een header die metadata bevat over de browser en het eigenlijk bericht.

- -
De GET methode
- -

Met de GET methode vraagt de browser aan de server een bepaalde gegevensbron: "Hallo server ik wens die gegevensbron". In dit geval wordt het gevraagde gehecht aan de URL. De rest van het bericht is leeg.

- -

Bekijken we het volgende formulier::

- -
<form action="http://foo.com" method="get">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

Als gevolg van de GET methode ziet men bij het verzenden de URL www.foo.com/?say=Hi&to=Mom verschijnen in de adresbalk.

- -

De gegevens worden aan de URL gekoppeld als een reeks naam/waarde paren. Na het URL webadres komt een vraagteken (?) gevolgd door de naam/waarde paren, elk paar gescheiden door een ampersand (&). In dit geval versturen we twee eenheden gegevens naar de server:

- - - -

Het HTTP-verzoek ziet er zo uit:

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
-

Nota: Dit voorbeeld is ook te vinden op GitHub — zie get-method.html (see it live also).

-
- -
De POST methode
- -

De POST methode is een beetje anders. Het is de methode die de browser gebruikt om te communiceren met de server wanneer hij een reactie vraagt op de inhoud van zijn HTTP-bericht: "Hallo server, kijk naar mijn bericht en zend mij informatie hierover". Als een formulier op deze manier wordt verzonden worden de gegevens in het bericht geplaatst en niet in de URL van het HTTP-bericht.

- -

Nemen we een voorbeeld — dit is hetzelfde formulier als in de GET sectie hierboven, maar met het {{htmlattrxref("method","form")}} attribuut ingesteld op post.

- -
<form action="http://foo.com" method="post">
-  <div>
-    <label for="say">What greeting do you want to say?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">Who do you want to say it to?</label>
-    <input name="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

Als het formulier wordt verzonden met de POST methode worden er geen gegevens gekoppeld aan de URL en het HTTP verzoek ziet er als volgt uit, met de gegevens in het bericht:

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Content-Length geeft de omvang van de inhoud aan en Content-Type geeft het type aan van de gegevensbron die naar de server wordt verzonden. Hier wordt later verder op ingegaan.

- -
-

Nota: Dit voorbeeld kan ook gevonden worden op GitHub — zie post-method.html (see it live also).

-
- -

HTTP-verzoeken bekijken

- -

HTTP-verzoeken worden nooit getoond aan de gebruiker (om ze te zien moeten instrumenten gebruikt worden als Firefox Network Monitor of  Chrome Developer Tools). Bijvoorbeeld in de Chrome network tab:

- -

- -

Het enige wat getoond wordt is de aangeroepen URL. Bij een GET-verzoek staan de gegevens in de adresbalk maar bij een POST-verzoek is er niets te zien. Dit is belangrijk om twee redenen:

- -
    -
  1. Gebruik nooit de GET methode als een paswoord of andere gevoelige gegevens moeten verzonden worden om te voorkomen dat ze in de URL-balk getoond worden, wat erg onveilig is.
    2. -
  2. Gebruik de POST methode als grote hoeveelheden gegevens moeten verzonden worden omdat sommige browsers de lengte van de URL begrenzen. Daarenboven begrenzen veel servers ook de lengte van de URL's die ze aanvaarden.
    3. -
- -

Aan de kant van de server: ontvangst van de gegevens

- -

Onafhankelijk van de gebruikte methode van verzenden zal de server een reeks karakters ontvangen die hij zal ontleden in sleutel/waarde paren. De verdere afwikkeling is afhankelijk van het gebruikte ontwikkelingsplatform. Bijvoorbeeld de afhandeling van dubbele sleutels: meestal wordt de laatst ontvangen sleutel gebruikt.

- -

Voorbeeld: Raw PHP

- -

PHP biedt enkele globale objecten om de gegevens te benaderen. Het volgend voorbeeld gebruikt de POST methode en toont de inhoud gewoon aan de gebruiker. Die beslist wat er verder mee moet gebeuren: gewoon tonen, opslaan in een gegevensbank of op een andere manier verwerken.

- -
<?php
-  // The global $_POST variable allows you to access the data sent with the POST method by name
-  // To access the data sent with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
-?>
- -

Dit voorbeeld toont een pagina met de gegevens die we verzonden hebben. Dit wordt getoond in ons php-example.html voorbeeldbestand. Dit bevat hetzelfde voorbeeld als hierboven met een  post methode en als  action : php-example.php. Bij verzending worden de formuliergegevens verzonden naar  php-example.php, waar de PHP code staat uit bovenstaand voorbeeld. Bij uitvoering toont de browser: Hi Mom.

- -

- -
-

Nota: Dit voorbeeld zal niet werken wanneer het in een lokale browser geladen wordt omdat browsers geen PHP-code kunnen interpreteren. Dus bij het verzenden biedt de browser alleen aan om het PHP-bestand te downloaden. Het zal dus slechts lopen door middel van een of andere PHP-server.  Goede opties voor het lokaal testen van PHP zijn MAMP (Mac en Windows) en AMPPS (Mac, Windows, Linux).

-
- -

Voorbeeld: Python

- -

Volgend voorbeeld toont het gebruik van Python om hetzelfde te doen: tonen van verzonden gegevens op een webpagina. Dit maakt gebruik van het  Flask framework om sjablonen te tonen, versturen van formuliergegevens, enz. (zie python-example.py).

- -
from flask import Flask, render_template, request
-app = Flask(__name__)
-
-@app.route('/', methods=['GET', 'POST'])
-def form():
-    return render_template('form.html')
-
-@app.route('/hello', methods=['GET', 'POST'])
-def hello():
-    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
-
-if __name__ == "__main__":
-    app.run()
- -

De twee sjablonen waarnaar gerefereerd wordt in de code zijn de volgende:

- - - -
-

Nota: Deze code zal ook nu weer niet lopen als die gewoon in een browser ingelezen wordt. Python werkt enigszins anders dan PHP. Om deze code lokaal te laten lopen moet  Python/PIP geïnstalleerd worden, dan Flask d.m.v. pip3 install flask. Daarna moet het mogelijk zijn het voorbeeld te laten lopen door middel van  python3 python-example.py en dan naar localhost:5000 te gaan in de browser.

-
- -

Andere talen en omgevingen

- -

Er zijn vele andere technologieën aan de serverkant voor behandeling van formulieren met inbegrip van Perl, Java, .Net, Ruby, enzovoorts. Kies wat u het beste ligt. In dit verband moet gezegd worden dat het niet de gewoonte is om rechtstreeks in deze omgevingen te werken omdat dit niet altijd eenvoudig is. Het is veel gemakkelijker te werken met een van de volgende fraaie toepassingen die werken met formulieren veel aangenamer maken, zoals:

- - - -

Zelfs met deze omgevingen is het niet altijd eenvoudig om met formulieren te werken. Maar het is nog altijd eenvoudiger dan alle functionaliteit zelf vanaf nul te moeten schrijven. Het zal in elk geval sneller gaan.

- -
-

Nota: Het is buiten het bestek van dit artikel om elke taal of omgeving aan de serverkant te bespreken. Bovenstaande links zijn een leidraad en misschien is het nuttig er zelf wat dieper op in te gaan.

-
- -

Speciaal: verzenden van bestanden

- -

Verzenden van bestanden met HTML-formulieren is speciaal. Bestanden zijn binaire gegevens, terwijl andere gegevens uit gewone tekst bestaan. Omdat HTTP een tekstprotocol is, zijn er speciale vereisten om binaire gegevens te behandelen.

- -

Het {{htmlattrxref("enctype","form")}} attribuut

- -

Dit attribuut laat toe de waarde van Content-Type in te stellen van de HTTP-hoofding die meegestuurd wordt wanneer het formulier verzonden wordt. Deze hoofding is zeer belangrijk omdat die de server vertelt welke soort gegevens zullen doorgezonden worden.  Standaard is de waarde application/x-www-form-urlencoded. In mensentaal betekent dit: "Dit zijn formuliergegevens die gecodeerd zijn in URL parameters."

- -

Om bestanden te versturen moeten er drie stappen ondernomen worden:

- - - -

Bijvoorbeeld:

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choose a file</label>
-    <input type="file" id="file" name="myFile">
-  </div>
-  <div>
-    <button>Send the file</button>
-  </div>
-</form>
- -
-

Nota: Sommige browsers ondersteunen het {{htmlattrxref("multiple","input")}} attribuut van het {{HTMLElement("input")}} element, dat toelaat meerdere bestanden te kiezen om te uploaden in slechts één <input> element. Hoe de server deze bestanden behandelt is afhankelijk van de technologie die gebruikt wordt op de server. Zoals hiervoor vermeld zal het gebruik van een omgeving het leven aangenamer maken.

-
- -
-

Waarschuwing: Veel servers beperken de bestandsgrootte voor HTTP-verzoeken om misbruik te voorkomen. Het is belangrijk deze limiet te controleren bij de administrator van de server voordat een bestand verzonden wordt.

-
- -

Veiligheidsoverwegingen

- -

Elke keer er gegevens verstuurd worden naar een server moet aan veiligheid gedacht worden. HTML formulieren zijn de meest kwetsbare plaatsen voor aanvallen. De problemen komen nooit van de HTML formulieren zelf maar wel van de manier waarop de server met gegevens omgaat.

- -

Al naar gelang de toepassing zijn er wel bekende veiligheids problemen die men kan tegenkomen:

- -

XSS en CSRF

- -

Cross-Site Scripting (XSS) en Cross-Site Request Forgery (CSRF) zijn wel bekende vormen van aanvallen wanneer gegevens getoond worden die een gebruiker terugstuurt naar een gebruiker of naar een andere gebruiker.

- -

XSS laat aanvallers toe een script toe te voegen aan de zijde van de client aan webpagina's die bekeken werden door andere gebruikers. Een kwetsbaar cross-site script kan gebruikt worden door aanvallers om toegangscontrole te omzeilen zoals de  politiek van dezelfde bron. Het effect van deze aanvallen kan gaan van vervelend tot een ernstig veiligheidsrisico.

- -

CSRF aanvallen zijn gelijk aan  XSS aanvallen in zo verre dat zij op dezelfde manier starten, door aan de kant van de client een script te injecteren in webpagina's, maar hun doel is anders. CSRF aanvallers trachten machtigingen aan te passen naar hogere niveaus (zoals een webadministrator) om een actie te ondernemen die anders niet zou lukken (bijvoorbeeld gegevens verzenden naar een niet-vertrouwde gebruiker).

- -

XSS aanvallen profiteren van het vertrouwen dat een gebruiker heeft in een website terwijl CSRF aanvallen profiteren van het vertrouwen dat een website heeft in haar gebruikers.

- -

Om zulke aanvallen te voorkomen moet een server altijd de gegevens controleren die een gebruiker er naar toe stuurt. Indien de gegevens moeten getoond worden moet er op gelet worden dat de HTML inhoud die van de gebruiker komt niet getoond wordt  Daarom moeten de gegevens van de gebruiker verwerkt worden zodat ze niet letterlijk gepresenteerd worden. Praktisch alle omgevingen die vandaag op de markt zijn hebben minimaal een filter die de HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} en {{HTMLElement("object")}} elementen filtert uit de gegevens die de gebruikers versturen. Dit verkleint het risico maar schakelt het niet helemaal uit.

- -

SQL injectie

- -

SQL injectie is een type aanval die probeert ingrepen uit te voeren op de database van de website. Dit vereist een SQL-aanvraag in de hoop dat de server ze uitvoert (meestal doordat de server de gegevens van de gebruiker tracht op te slaan). 

- -

De gevolgen kunnen zeer erg zijn, gaande van verlies van gegevens tot de controle over een hele website infrastructuur door toe-eigenen van machtigingen. Dit is een zeer ernstige bedreiging en gegevens van een gebruiker mogen nooit zo maar direct opgeslagen worden zonder validering (bijvoorbeeld door gebruik van  mysql_real_escape_string() op een PHP/MySQL systeem).

- -

HTTP header injectie en email injectie

- -

Deze aanvallen kunen gebeuren wanneer de applicatie HTTP headers  of e-mails opstelt uit de gegevens van een gebruikersformulier. Deze zullen geen onmidellijke schade aanrichten of invloed hebben op de gebruikers maar zij vormen een open deur voor dieper liggende problemen zoals het kapen van sessies of phishing aanvallen.

- -

Deze aanvallen gebeuren meestal in stilte en wijzigen servers in een zombie.

- -

Wees wantrouwig: vertrouw uw gebruikers nooit

- -

Wat te doen tegen deze bedreigingen? Dit gaat te ver voor dit artikel maar er zijn enkele regels die men in acht moet nemen. De belangrijkste regel is: vertrouw nooit uw gebruikers, uzelf inbegrepen. Zelfs een betrouwbare gebruiker kan gehackt zijn.

- -

Alle gegevens die de server bereiken moeten gecontroleerd worden. Altijd. Geen enkele uitzondering:

- - - -

Veel/de meeste problemen worden voorkomen door deze drie regels op te volgen, maar het is altijd een goed idee de veiligheid te laten onderzoeken door een competente derde. Ga er niet van uit dat je alle mogelijke problemen overzien hebt.

- -
-

Nota: Het artikel over Website beveiliging van de serverkant gaat dieper in op bovenstaande bedreigingen en potentiële oplossingen.

-
- -

Besluit

- -

Formuliergegevens verzenden is simpel maar een applicatie beveiligen is niet zo eenvoudig. Maar denk er aan dat het niet de front-end ontwikkelaar is die verantwoordelijk is voor het veiligheidsmodel. Verderop in deze cursus wordt geleerd dat validatie aan de zijde van de client mogelijk is maar de server kan deze validatie niet vertrouwen omdat hij niet weet wat er zich afspeelt aan de zijde van de client.

- -

Zie ook

- -

Volgende bronnen gaan dieper in op de beveiliging van websites:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

diff --git a/files/nl/learn/forms/styling_web_forms/index.html b/files/nl/learn/forms/styling_web_forms/index.html deleted file mode 100644 index ec56d4ffb6..0000000000 --- a/files/nl/learn/forms/styling_web_forms/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Styling HTML forms -slug: Learn/Forms/Styling_web_forms -tags: - - CSS - - Formulieren - - HTML -translation_of: Learn/Forms/Styling_web_forms -original_slug: Learn/HTML/Forms/Styling_HTML_forms ---- -

In dit artikel leert de gebruiker het om HTML-formulieren vorm te geven met gebruik van CSS. Dit is echter niet  zo eenvoudig. Om historische en technische redenen gaan formulierelementen (widgets) en CSS niet zo goed samen. Daarom maaken veel ontwikkelaars hun eigen HTML widgets om de vormgeving van formulieren in eigen hand te houden. Dankzij de moderne browsers hebben webontwikkelaars meer en meer controle over het ontwerp van formulierelementen.

- -

Waarom is vormgeving van formulieren met CSS zo ingewikkeld?

- -

In de begindagen van het Web, rond 1995, werden widgets toegevoegd aan de HTML in   de HTML 2 specificatie. Door de complexheid van widgets vertrouwden de ontwikkelaars op het onderliggende besturingssysteem.

- -

Een aantal jaren later werd CSS ontwikkeld om vormgeving en inhoud van elkaar te scheiden. In de begintijd van CSS had de vormgeving van formulieren geen prioriteit. 

- -

Omdat gebruikers gewend waren geraakt aan de gebruikelijke vormgeving van formulieren, zijn browser fabrikanten terughoudend in het aanpasbaar maken van formulierelementen. Tot op de dag van vandaag is het bijzonder moeilijk om een eigen vormgeving te maken voor alle widgets.

- -

Tot op heden is er nog geen enkele browser die CSS 2.1 volledig geïmplementeerd heeft. In de loop van de tijd hebben de browser fabrikanten hun ondersteuning voor CSS echter verbeterd en ondanks vele problemen kan CSS nu gebruikt worden om HTML formulieren vorm te geven.

- -

Niet alle widgets worden door CSS gelijk behandeld

- -

Er zijn nog steeds problemen met CSS-formulieren. Deze kunnen ingedeeld worden in drie categorieën

- -

"The good"

- -

Enkele elementen leveren geen problemen op. Het zijn de volgende structurele elementen:

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}}
    3. -
  3. {{HTMLElement("label")}}
    4. -
  4. {{HTMLElement("output")}}
    5. -
- -

Ook de tekstvelden (zowel enkellijnige als meerlijnige) vallen hieronder en de knoppen.

- -

"The bad"

- -

Sommige elementen vereisen ingewikkelde trucs waarbij soms gespecialiseerde kennis  van CSS3 nodig is.

- -

Zoals bijvoorbeeld het {{HTMLElement("legend")}} element. Het is moeilijk dit te positioneren over verschillende platformen. Keuzerondjes en keuzevakjes kunnen ook moeilijk rechtstreeks aangepast worden. Dank zij CSS3 is daar nochtans wel een oplossing voor. Het {{htmlattrxref("placeholder", "input")}} element kan niet rechtstreeks aangepast worden  maar de browsers die het ondersteunen hebben hun eigen CSS pseudo-elementen of pseudoklassen die toelaten het aan te passen. Deze worden behandeld in het artikel Geavanceerde stijlen voor HTML-formulieren.

- -

"The ugly"

- -

Sommige elementen kunnen gewoon niet aangepast worden met CSS. Het gaat hier om geavanceerde elementen zoals bereik, kleur en datumvensters. Ook keuzelijsten met hun elementen {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} en {{HTMLElement("datalist")}} vallen in deze categorie.

- -

Het probleem met deze elementen is dat zij een complexe structuur hebben en CSS is niet krachtig genoeg om alle subtiele onderdelen aan te sturen. Om deze elementen aan te passen moet JavaScript gebruikt worden om een DOM op te stellen dat kan worden aangepast. Dit wordt duidelijk gemaakt in het artikel Hoe eigen formulier-elementen aanmaken.

- -

Basisprincipe

- -

Elementen die gemakkelijk aan te passen zijn met CSS leveren geen enkel probleem op omdat ze zich meestal gedragen als elk ander HTML-element. Sommige browsers hebben echter hun eigen stijl en kunnen een beetje afwijken zodat er enkele trucs nodig zijn.

- -

Zoekvelden

- -

Zoekvensters zijn de enige tekstvelden die soms wat moeilijker aan te sturen zijn. Bij browsers die gebaseerd zijn op Webkit (Chrome, Safari, e.d.) moeten de tekstvelden aangepast worden met de -webkit-appearance eigenschap. Deze eigenschap wordt besproken in het artikel: Geavanceerde styling voor HTML-formulieren.

- -

Voorbeeld

- -
<form>
-  <input type="search">
-</form>
-
- -
input[type=search] {
-  border: 1px dotted #999;
-  border-radius: 0;
-
-  -webkit-appearance: none;
-}
- -

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

- -

Zoals te zien is op de schermafdruk van Chrome hebben beide velden een rand. Maar de bovenste is gemaakt zonder  de -webkit-appearance eigenschap en de onderste met de -webkit-appearance: none. Het verschil is duidelijk.

- -

Lettertypen en tekst

- -

CSS lettertypen en teksteigenschappen kunnen gemakkelijk gebruikt worden bij alle widgets (en ja, ook {{cssxref("@font-face")}} kan gebruikt worden bij formulierelementen). Maar de browsers zijn niet altijd consequent. Sommige elementen erven niet altijd per definitie  {{cssxref("font-family")}} and {{cssxref("font-size")}} van hun ouderelementen maar gebruiken de instelling van het systeem. Om de stijl van een formulier doen overeen te komen met de rest van de inhoud kunnen volgende regels worden toegevoegd aan het stijlblad:

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

De schermafdruk hieronder toont het verschil. Links staat de systeemeigen weergave in Firefox en Mac OS X. Rechts de weregave met bovenstaande aanpassingen.

- -

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

- -

Er wordt veel gediscussieerd over wat het beste uitzicht is. Het is aan u als ontwerper van uw website om te kiezen.

- -

Kadermodel

- -

Alle tekstvelden ondersteunen volledig elke eigenschap met betrekking tot het CSS kadermodel: {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} en {{cssxref("border")}}. Maar zoals hierboven steunen de browsers in eerste instantie op standaard instellingen van hun systeem om deze elementen te tonen. Het is weer aan de ontwikkelaar hoe ze opgenomen worden in de inhoud. Als vast gehouden wordt aan het standaard uitzicht van de widgets zijn er wel enkele ingrepen nodig om ze even groot te maken.

- -

Dit komt doordat elk element zijn eigen regels heeft wat betreft rand, uitvulling en marge. Dus om elk element dezelfde grootte te geven moet de {{cssxref("box-sizing")}} eigenschap gebruikt worden:

- -
input, textarea, select, button {
-  width : 150px;
-  margin: 0;
-
-  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
-          box-sizing: border-box;
-}
- -

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

- -

In de schermafdruk hierboven wordt links de weergave getoond zonder {{cssxref("box-sizing")}}, terwijl rechts deze eigenschap is toegepast met de waarde border-box. Zie hoe ze allemaal dezelfde ruimte innemen ondanks de systeemeigen instellingen.

- -

Positionering

- -

Positionering van HTML formulierelementen is over het algemeen geen probleem. Twee elementen echter vragen echter speciale aandacht:

- -

legend

- -

Het {{HTMLElement("legend")}} element is ok wat betreft vormgeving maar niet wat betreft plaatsing. In elke browser wordt het {{HTMLElement("legend")}} element geplaatst op de bovenrand van het {{HTMLElement("fieldset")}} element. Het is onmogelijk het ergens midden in de HTML-code te plaatsen. Het kan echter absoluut of relatief geplaatst worden met de {{cssxref("position")}} eigenschap.

- -

Om reden van toegankelijkheid is het {{HTMLElement("legend")}} element zeer belangrijk. Het wordt besproken bij ondersteunende technologieën als onderdeel van het label van elk formulierelement binnen de fieldset. Meestal wordt er ook een titel in verwerkt en dan verborgen op een toegankelijke manier zoals hierna:

- -
HTML
- -
<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
- -
CSS
- -
legend {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
- -

textarea

- -

Alle browsers beschouwen standaard het {{HTMLElement("textarea")}} element als een in-lijn blok uitgelijnd op de onderkant van de tekst. Dit is slechts zelden wat gewenst is. Om over te schakelen van in-lijn blok naar blok kan de {{cssxref("display")}} eigenschap gebruikt worden en door de vertkale uitlijning aan te passen:

- -
textarea {
-  vertical-align: top;
-}
- -

Voorbeeld

- -

Hier volgt een voorbeeld van hoe de stijl van een HTML-formulier wordt aangepast. Hierdoor wordt al het voorgaande duidelijker. We bouwen een "postkaart" contactformulier:

- -

This is what we want to achieve with HTML and CSS

- -

HTML

- -

De HTML-code verschilt weinig van het voorbeeld uit het eerste artikelvan deze gids. Er zijn slechts een aantal ID's  en een titel toegevoegd.

- -
<form>
-  <h1>to: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">from:</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">reply:</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Your message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
- -

CSS

- -

Nu begint het leuke. Voor het coderen moeten drie elementen worden toegevoegd:

- -
    -
  1. De achtergrond van de postkaart
    2. -
  2. Een schrijfmachine lettertype: De "Secret Typewriter" van fontsquirrel.com
    3. -
  3. Een handschrift lettertype: Het "Jounal" van frontsquirrel.com
    4. -
- -

Nu de code. Eerst bereiden we een achtergrond voor met de  {{cssxref("@font-face")}} regels en alle basiselementen  {{HTMLElement("body")}} en {{HTMLElement("form")}}.

- -
@font-face{
-  font-family : "handwriting";
-
-  src : url('journal.eot');
-  src : url('journal.eot?') format('eot'),
-        url('journal.woff') format('woff'),
-        url('journal.ttf') format('truetype');
-}
-
-@font-face{
-  font-family : "typewriter";
-
-  src : url('veteran_typewriter.eot');
-  src : url('veteran_typewriter.eot?') format('eot'),
-        url('veteran_typewriter.woff') format('woff'),
-        url('veteran_typewriter.ttf') format('truetype');
-}
-
-body {
-  font  : 21px sans-serif;
-
-  padding : 2em;
-  margin  : 0;
-
-  background : #222;
-}
-
-form {
-  position: relative;
-
-  width  : 740px;
-  height : 498px;
-  margin : 0 auto;
-
-  background: #FFF url(background.jpg);
-}
- -

Dan worden de elementen en de titel geplaatst.

- -
h1 {
-  position : absolute;
-  left : 415px;
-  top  : 185px;
-
-  font : 1em "typewriter", sans-serif;
-}
-
-#from {
-  position: absolute;
-  left : 398px;
-  top  : 235px;
-}
-
-#reply {
-  position: absolute;
-  left : 390px;
-  top  : 285px;
-}
-
-#message {
-  position: absolute;
-  left : 20px;
-  top  : 70px;
-}
- -

Nu de elementen zelf. Eerst het lettertype van het {{HTMLElement("label")}} element:

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

De tekstvelden moeten enkele gezamenlijke regels krijgen. Hiertoe worden de eigenschappen {{cssxref("border","borders")}} en {{cssxref("background","backgrounds")}} verwijderd en {{cssxref("padding")}} en {{cssxref("margin")}} worden aangepast:

- -
input, textarea {
-  font    : .9em/1.5em "handwriting", sans-serif;
-
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 240px;
-
-  background: none;
-}
- -

Als één van de velden de focus krijgen maken we ze grijs met een doorzichtige achtergrond. Om de standaard focus van sommige browsers op te heffen wordt de {{cssxref("outline")}} eigenschap wordt gebruikt.

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-  outline      : none;
-}
- -

De éénregelige en meerregelige tekstvelden moeten nog in overeenstemming gebracht worden, want standaard zien ze er verschillend uit.

- -

Voor Internet Explorer moet het éénregelig tekstveld worden aangepast omdat Internet Explorer de hoogte van de velden niet aanpast aan de natuurlijke hoogte van het lettertype (hetgeen de andere browsers wel doen). Daarom kennen we expliciet een hoogte toe aan het veld:

- -
input {
-    height: 2.5em; /* for IE */
-    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
-}
- -

Standaard worden {{HTMLElement("textarea")}} elementen weergegeven als blok. Twee belangrijke eigenschappen hier zijn {{cssxref("resize")}} en {{cssxref("overflow")}}. Omdat we willen dat de gebruiker de afmetingen niet kan wijzigen passen we de  resize eigenschap toe. De {{cssxref("overflow")}} eigenschap wordt gebruikt om het veld consistent te maken over alle browsers. Sommige browsers gebruiken standaard auto, terwijl andere scroll gebruiken. In dit geval is het beter auto te gebruiken.

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 340px;
-  height  : 360px;
-
-  resize  : none;
-  overflow: auto;
-}
- -

Het {{HTMLElement("button")}} element is gemakkelijk in CSS. Men kan zowat alles ermee doen, inclusief pseudo-elementen!

- -
button {
-  position     : absolute;
-  left         : 440px;
-  top          : 360px;
-
-  padding      : 5px;
-
-  font         : bold .6em sans-serif;
-  border       : 2px solid #333;
-  border-radius: 5px;
-  background   : none;
-
-  cursor       : pointer;
-
--webkit-transform: rotate(-1.5deg);
-   -moz-transform: rotate(-1.5deg);
-    -ms-transform: rotate(-1.5deg);
-     -o-transform: rotate(-1.5deg);
-        transform: rotate(-1.5deg);
-}
-
-button:after {
-  content: " >>>";
-}
-
-button:hover,
-button:focus {
-  outline   : none;
-  background: #000;
-  color   : #FFF;
-}
- -

Dat is alles. Klaar om uit te proberen!

- -

Besluit

- -

Uit bovenstaande blijkt dat bij het opstellen van formulieren met tekstvelden en knoppen, het vrij gemakkelijk is CSS te gebruiken. Zie het artikel normalizeer.css project voor meer CSS-trucs in verband met het werken met formulierwidgets.

- -

In het volgend artikel wordt ingegaan op formulierelementen die vallen in de categorieën "bad" en "ugly".

diff --git a/files/nl/learn/forms/your_first_form/index.html b/files/nl/learn/forms/your_first_form/index.html deleted file mode 100644 index 0d9705f88e..0000000000 --- a/files/nl/learn/forms/your_first_form/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: My first HTML form -slug: Learn/Forms/Your_first_form -tags: - - CSS - - Formulier - - HTML - - voorbeeld -translation_of: Learn/Forms/Your_first_form -original_slug: Learn/HTML/Forms/Your_first_HTML_form ---- -

Dit is een inleidend artikel tot HTML formulieren.  Door middel van een eenvoudig contactformulier maken we kennis met de basiselementen van HTML formulieren. Dit artikel veronderstelt dat de lezer niets afweet van HTML formulieren, maar dat hij een basiskennis heeft van the basics of HTML en CSS.

- -

Voordat we beginnen

- -

Wat is een HTML formulier?

- -

HTML formulieren zijn de belangrijkste schakel tussen een gebruiker en een website of een applicatie. Zij laten gebruikers toe gegevens naar websites te sturen. Meestal zal dat naar de server zijn maar een webpagina kan de gegevens ook zelf interpreteren.

- -

Een HTML formulier bestaat uit een aantal elementen. Bijvoorbeeld tekstvelden (bestaande uit één of meerdere regels), keuzelijsten, knoppen of radioknoppen. Meestal zullen deze elementen voorzien zijn van een label dat de funktie van het element aangeeft.

- -

Wat is er nodig om met formulieren te werken?

- -

Een  editor (Sublime of Atom zijn goede voorbeelden) en een webbrowser. Natuurlijk zijn er volwaardige IDE's zoals Visual Studio, Eclipse, Aptana en andere.

- -

Het verschil tussen een HTML formulier en een gewoon HTML document is dat de gegevens die door het formulier verzameld worden naar een webserver moeten gestuurd worden. Dus er moet een server voorzien worden om de gegevens te ontvangen en te verwerken. Hoe een server moet opgezet worden is buiten het bestek van dit artikel maar kan gevonden worden in het artike Sending and retrieving form data.

- -

Ontwerp van het formulier

- -

Alvorens te beginnen met schrijven moet eerst  het formulier ontworpen worden.  Dit laat toe vast te leggen welke gegevens er van de gebruiker gevraagd worden. Een te druk formulier kan al vlug aversie opwekken bij de gebruiker. Dus hou het simpel: vraag alleen wat absoluut nodig is. Het formulierontwerp is een zeer belangrijke stap in de opbouw van een site of een applicatie.  Het is buiten het bestek van dit artikel om in te gaan op gebruiksvriendelijk formulierontwerp maar volgende publicaties kunnen daarbij nuttig zijn:

- - - -

In dit artikel bouwen we een eenvoudig contactformulier. We beginnen met een ruwe schets.

- -

The form to build, roughly sketch

- -

Het formulier bevat drie tekstvelden en een knop. De gebruiker wordt gevraagd naar de naam, het e-mailadres en het bericht dat hij wil verzenden. Bij een druk op de knop wordt het bericht verzonden naar de server.

- -

Maak uw handen vuil aan HTML

- -

Nu zijn we klaar om aan het formulier te beginnen. Om het contactformulier op te maken hebben we de volgende HTML elementen nodig: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, en {{HTMLelement("button")}}.

- -

Het {{HTMLelement("form")}} element

- -

Alle HTML formulieren beginnen met een {{HTMLelement("form")}} element als volgt:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

Dit element definiëert een formulier. Het is een container element als {{HTMLelement("div")}} of {{HTMLelement("p")}} maar het bevat ook een aantal attributen die aangeven hoe het formulier zich gedraagt. Alle attributen zijn optioneel maar in de praktijk wordt het aangeraden van steeds minstens het action attribuut en het methode attribuut te gebruiken.

- - - -

Zie het artikel Sending and retrieving form data voor getaileerde informatie over hoe attributen werken.

- -

Widgets toevoegen met de {{HTMLelement("label")}}, {{HTMLelement("input")}} en {{HTMLelement("textarea")}} elementen

- -

Het contactformulier is vrij eenvoudig en bevat drie tekstvelden, elk met een label. Het veld voor de naam is een eenvoudig tekstveld met één regel. Het veld voor het e-mailadres is ook een tekstveld met één regel maar dat alleen een e-mailadres aanvaardt. Het tekstveld voor het bericht is een eenvoudig tekstveld met meerdere regels.

- -

In HTML taal ziet de code er aldus uit:

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="user_name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" name="user_mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-</form>
- -

De {{HTMLelement("div")}} elementen dienen om de code eenvoudig te structureren en om de stijl gemakkelijk aan te passen (zie verder). Let op het gebruik van het for attribuut in alle {{HTMLelement("label")}} elementen. Dit is een formele manier om een label aan een formulier te linken. Dit attribuut verwijst naar de id van de overeenkomstige widget. Dit wordt onder andere gedaan opdat de gebruiker op het label kan klikken om de widget te activeren. Andere redenen zijn beschreven in het artikel: How to structure an HTML form.

- -

Voor het {{HTMLelement("input")}} element is het belangrijkste attribuut het type attribuut. Dit attribuut bepaalt hoe het {{HTMLelement("input")}} element zich gedraagt. Dit verdient de nodig aandacht omdat de gevolgen ingrijpend kunnen zijn. Het artikel native form widgets geeft meer details hierover. In het voorbeeld wordt de waarde text gebruikt omdat dit de defaultwaarde is voor dit attribuut. Zo accepteert het tekstveld elke tekst zonder verdere controle of validatie. Met de waarde email wordt een tekstveld gedefiniëerd dat alleen een juist gevormd e-mailadres aanvaardt. Dus met dit laatste wordt het tekstveld omgevormd tot een soort intelligent veld dat enkele controles uitvoert op de gegevens die de gebruiker ingeeft. Meer details over validatie van formulieren is te vinden in het artikel Form data validation.

- -

Tenslotte iets over de syntax  <input /> vs. <textarea></textarea>. Dit is een van de eigenaardigheden van HTML. Het element <input> is een element dat zichzelf afsluit. Dit wil zeggen dat, indien de gebruiker het element formeel wil sluiten, hijzelf "/"  moet toevoegen op het einde van het element. {{HTMLElement("textarea")}} daarentegen is geen element dat zichzelf afsluit zodat de gebruiker zelf moet zorgen voor de juiste afsluiting.  Dit heeft invloed op een specifieke eigenschap van HTML formulieren: de manier waarop de defaultwaarde wordt bepaald. Om de defaultwaarde van een {{HTMLElement("input")}} element te bepalen moet het  value attribuut als volgt gebruikt worden:

- -
<input type="text" value="by default this element is filled with this text" />
- -

Om daarentegen de defaultwaarde  van een {{HTMLElement("textarea")}} element op te geven moet deze waarde tussen begin- en eindtag van het {{HTMLElement("textarea")}} element opgegeven worden:

- -
<textarea>by default this element is filled with this text</textarea>
- -

En tenslotte om te eindigen een {{HTMLelement("button")}}

- -

Er moet alleen nog een knop toevoegd worden om de gebruiker toe te laten zijn bericht te verzenden zodra het formulier ingevuld is. Dit gebeurt met het {{HTMLelement("button")}} element:

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="user_name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" name="user_mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

Er zijn drie types van knoppen: submit, reset, en button.

- - - -

Met het {{HTMLElement("input")}} element en met het corresponderende  type kan ook een knop gegenereerd worden. Het grote verschil met het {{HTMLelement("button")}} element is dat het {{HTMLelement("input")}} element slechts gewone tekst als label toestaat terwijl het {{HTMLelement("button")}} element volledige HTML inhoud accepteert als label.

- -

De zaken mooier maken met CSS

- -

Nu het HTML formuler klaar is kan het bekeken worden in een browser. Maar het ziet er niet erg netjes uit.

- -

- -

Met een CSS stylesheet kan het wat netter gemaakt worden.

- -

Om te beginnen het formulier zelf. Het kan gecentreerd worden en er kan een boord rond getrokken worden:

- -
form {
-    /* Just to center the form on the page */
-    margin: 0 auto;
-    width: 400px;
-    /* To see the outline of the form */
-    padding: 1em;
-    border: 1px solid #CCC;
-    border-radius: 1em;
-}
- -

Dan kan er wat ruimte ingevoegd worden tussen de widgets:

- -
form div + div {
-    margin-top: 1em;
-}
- -

Om een formulier leesbaar te maken is het aangeraden om alle labels dezelfde grootte te geven en ze uit te lijnen aan dezelfde zijde. Hier zullen we ze rechts uitlijnen. Maar soms is links uitlijnen ook goed.

- -
label {
-    /* To make sure that all labels have the same size and are properly aligned */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}
- -

Het moeilijkste met HTML formulieren is de styling van de HTML widgets zelf. Tekstvelden zijn nog gemakkelijk te stylen maar bij andere widgets is dat niet zo. Meer over stylen van HTML widgets is te vinden in Styling HTML forms.

- -

Hier worden enkele klassieke zaken gestyled: fonts, grootte en randen:

- -
input, textarea {
-    /* To make sure that all text fields have the same font settings
-       By default, textareas have a monospace font */
-    font: 1em sans-serif;
-
-    /* To give the same size to all text field */
-    width: 300px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    /* To harmonize the look & feel of text field border */
-    border: 1px solid #999;
-}
- -

HTML formulieren ondersteunen een aantal pseudoklassen om de toestand van elk element te beschrijven. Bijvoorbeeld het highlighten van een aktieve widget geeft aan waar de gebruiker zich bevindt in het formulier.

- -
input:focus, textarea:focus {
-    /* To give a little highlight on active elements */
-    border-color: #000;
-}
- -

Tekstvelden met meerdere regels hebben hun eigen stijlen. Het  {{HTMLElement("textarea")}} element is standaard een inline blok waarvan de onderkant uitgelijnd is met basislijn van de tekst. Dit is meestal niet wat men wil. Om het label en het veld uit te lijnen moet de vertical-align eigenschap van het {{HTMLElement("textarea")}} gewijzigd worden naar top.

- -

Let ook op de resize eigenschap die toelaat de grootte van het  {{HTMLelement("textarea")}} element aan te passen.

- -
textarea {
-    /* To properly align multiline text fields with their labels */
-    vertical-align: top;
-
-    /* To give enough room to type some text */
-    height: 5em;
-
-    /* To allow users to resize any textarea vertically
-       It does not work on all browsers */
-    resize: vertical;
-}
- -

In vele gevallen vereisen de knoppen ook een of andere stijl. Daarvoor worden zij in een {{HTMLelement("div")}} geplaatst met een buttonklasse. Hier wordt de knop uitgelijnd met de andere widgets. Om dat te doen wordt een vitueel  {{HTMLelement("label")}} geplaatst. Dit wordt gedaan door marges en uitvulling te gebruiken.

- -
.button {
-    /* To position the buttons to the same position of the text fields */
-    padding-left: 90px; /* same size as the label elements */
-}
-button {
-    /* This extra margin represent roughly the same space as the space
-       between the labels and their text fields */
-    margin-left: .5em;
-}
- -

Nu ziet hetformulier er veel mooier uit.

- -

- -

Verzenden van de gegevens naar de server

- -

De laatste stap is misschien de moeilijkste. Dit is de verwerking van de formuliergegevens aan de kant van de server. Zoals gezegd is een HTML formulier meestal een eenvoudige manier om de gebruiker te vragen naar gegevens en deze naar de webserver te sturen.

- -

Het {{HTMLelement("form")}} element bepaalt waar en hoe de gegevens moeten verstuurd worden door de action en de method attributen.

- -

Maar dat is niet voldoende. De gegevens moeten ook een naam krijgen. Deze naam is belangrijk aan beide zijden. Aan de kant van de browser wordt aan ieder stukje data een naam gegeven en aan de kant van de server wordt ieder stukje aan de hand van zijn naam behandeld.

- -

Dus om de gegevens een naam te geven wordt een name attribuut gebruikt bij elke widget die een specifiek stuk data produceert:

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="user_name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" name="user_email" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

In ons formulier worden 3 stuks data verzonden genaamd "user_name", "user_email" en "user_message". Deze gegevens worden verstuurd naar de URL "/my-handling-form-page"  met de HTTP POST methode.

- -

Op de server zal de script op de URL "/my-handling-form-page" de gegevens ontvangen als 3 waarden die ingesloten zijn in het HTTP verzoek. De gebruiker is verantwoordelijk hoe het script de gegevens behandelt. Elke scripttaal aan de kant van de server (PHP, Python, Ruby, Java, C#, enz.) heeft haar eigen mechanisme. Het is buiten het bestek van deze gids om dieper op dit onderwerp in te gaan maar er zijn enkele voorbeelden te vinden in het artikel Sending and retrieving form data.

- -

Tenslotte

- -

Proficiat. Ons eerste HTML formulier is klaar. Hier is een live voorbeeld.

- - - - - - - - - - - - - - -
Live voorbeeld
{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}
- -

Het is nu tijd om dieper op deze materie in te gaan. HTML formulieren kunnen veel meer dan wat we hier beschreven hebben. Dit wordt beschreven in the other articles of this guide.

-- cgit v1.2.3-54-g00ecf