diff options
Diffstat (limited to 'files/nl/learn/forms')
| -rw-r--r-- | files/nl/learn/forms/advanced_form_styling/index.html | 437 | ||||
| -rw-r--r-- | files/nl/learn/forms/basic_native_form_controls/index.html | 1449 | ||||
| -rw-r--r-- | files/nl/learn/forms/how_to_structure_a_web_form/index.html | 965 | ||||
| -rw-r--r-- | files/nl/learn/forms/index.html | 359 | ||||
| -rw-r--r-- | files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html | 1968 | ||||
| -rw-r--r-- | files/nl/learn/forms/sending_and_retrieving_form_data/index.html | 340 | ||||
| -rw-r--r-- | files/nl/learn/forms/styling_web_forms/index.html | 345 | ||||
| -rw-r--r-- | files/nl/learn/forms/your_first_form/index.html | 274 |
8 files changed, 6137 insertions, 0 deletions
diff --git a/files/nl/learn/forms/advanced_form_styling/index.html b/files/nl/learn/forms/advanced_form_styling/index.html new file mode 100644 index 0000000000..11903ed7b2 --- /dev/null +++ b/files/nl/learn/forms/advanced_form_styling/index.html @@ -0,0 +1,437 @@ +--- +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 +--- +<p>In dit artikel wordt ingegaan op het gebruik van <a href="/nl/docs/Web/CSS">CSS </a>in <a href="nl/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML</a>-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.</p> + +<p>Even ter herinnering:</p> + +<dl> + <dt>The bad</dt> + <dd>Elementen die moeilijk aan te passen zijn en die ingewikkelde trucs nodig hebben en soms ook geavanceerde kennis van CSS3.</dd> + <dt>The ugly</dt> + <dd>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.</dd> +</dl> + +<h2 id="CSS_uiterlijk">CSS uiterlijk</h2> + +<p>Het probleem met formulierwidgets andere dan tekstvelden en knoppen, is dat in veel gevallen CSS niet expressief genoeg is.</p> + +<p>Recent is daar wel verbetering in gekomen:</p> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> was zeer beperkt en omvatte slechts drie pseudoklassen: + + <ul> + <li>{{cssxref(":active")}}</li> + <li>{{cssxref(":focus")}}</li> + <li>{{cssxref(":hover")}}</li> + </ul> + </li> + <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> voegt enkele nieuwe pseudoklassen toe: + <ul> + <li>{{cssxref(":enabled")}}</li> + <li>{{cssxref(":disabled")}}</li> + <li>{{cssxref(":checked")}}</li> + <li>{{cssxref(":indeterminate")}}</li> + </ul> + </li> + <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> voegt ook enkele pseudoklassen toe om de toestand van het element te beschrijven: + <ul> + <li>{{cssxref(":default")}}</li> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":in-range")}}</li> + <li>{{cssxref(":out-of-range")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> + <li>{{cssxref(":read-only")}}</li> + <li>{{cssxref(":read-write")}}</li> + </ul> + </li> + <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> is op het ogenblik in de ontwikkelingsfaze en lijkt niet veel bij te dragen aan de verbetering van formulieren: + <ul> + <li>{{cssxref(":user-error")}} is slechts een verbetering van de {{cssxref(":invalid")}} pseudoklasse.</li> + </ul> + </li> +</ul> + +<p>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 <code>datepicker</code> dat toelaat een datum te kiezen uit een lijst van datums.</p> + +<p>Er zijn bij sommige browsers experimenten gaande betreffende de presentatie van formulieren en soms is het nuttig te weten wat er bestaat.</p> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> ondanks dat die experimenten aantrekkelijk lijken, <strong>zijn zij niet standaard, hetgeen betekent dat zij niet betrouwbaar zijn</strong>. Gebruik ervan is op eigen risico en misschien is het beter van ze niet te gebruiken want <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/" title="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">men zou iets kunnen doen dat slecht is voor het Web</a> door niet-standaard eigenschappen te gebruiken.</p> +</div> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Uitbreidingen</a> + + <ul> + <li>{{cssxref(":-moz-placeholder")}}</li> + <li>{{cssxref(":-moz-submit-invalid")}}</li> + <li>{{cssxref(":-moz-ui-invalid")}}</li> + <li>{{cssxref(":-moz-ui-valid")}}</li> + </ul> + </li> + <li><a href="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Uitbreidingen</a> + <ul> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">En veel meer</a></li> + </ul> + </li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx">Microsoft CSS Uitbreidingen</a> + <ul> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx">:-ms-input-placeholder</a></li> + </ul> + </li> + <li><a href="http://www.opera.com/docs/specs/" rel="external" title="http://www.opera.com/docs/specs/">Opera heeft geen uitbreidingen met betrekking tot HTML-formulieren</a></li> +</ul> + +<h3 id="De_presentatie_van_formulierelementen_instellen">De presentatie van formulierelementen instellen</h3> + +<p>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.</p> + +<p>Hiertoe gebruiken zij de eigenschap: {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}. <strong>Deze eigenschappen zijn niet standaard en worden best niet gebruikt</strong>. Zij gedragen zich zelfs verschillend in WebKit en in Gecko. Eén waarde is wel goed te gebruiken: <code>none</code>. Met deze waarde heeft men (praktisch volledige) controle over de stijl van bepaalde widgets.</p> + +<p>Hieronder enkele voorbeelden. Het gebruik is het best aan te tonen bij zoekvelden met WebKit browsers:</p> + +<pre class="brush: html"><form> + <input type="search"> +</form></pre> + +<pre class="brush: css"><style> +input[type=search] { + border: 1px dotted #999; + border-radius: 0; + + -webkit-appearance: none; +} +</style></pre> + +<div class="note"> +<p><strong>Nota:</strong> het is altijd moeilijk de toekomst te voorspellen betreffende web<span class="ng-binding"><span class="highlighted">technologie</span>ën</span>, maar CSS-uitbreidingen zijn niet eenvoudig en er gebeurt ook onderzoek naar andere specificaties zoals <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a> dat enig perspectief biedt. De zoektocht naar het volledig aanpasbaar formulier is nog lang niet over.</p> +</div> + +<h2 id="Voorbeelden">Voorbeelden</h2> + +<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> + +<p>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.</p> + +<h4 id="Een_eenvoudige_test">Een eenvoudige test</h4> + +<pre class="brush: html"><span><input type="checkbox"></span></pre> + +<pre class="brush: css">span { + display: inline-block; + background: red; +} + +input[type=checkbox] { + width : 100px; + height: 100px; +}</pre> + +<p>Zo wordt dit in de verschillende browsers weergegeven:</p> + +<table> + <thead> + <tr> + <th scope="col">Browser</th> + <th scope="col">Rendering</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 16 (Mac OSX)</td> + <td><img alt="Rendering of a sized check box on Firefox" src="/files/4165/checkbox-firefox-macos.png" style="height: 106px; width: 107px;"></td> + </tr> + <tr> + <td>Chrome 22 (Mac OSX)</td> + <td><img alt="Rendering of a sized check box on Chrome" src="/files/4163/checkbox-chrome-macos.png" style="height: 106px; width: 106px;"></td> + </tr> + <tr> + <td>Opera 12.01 (Mac OSX)</td> + <td><img alt="Rendering of a sized check box on Opera" src="/files/4167/checkbox-opera-macos.png" style="height: 106px; width: 107px;"></td> + </tr> + <tr> + <td>Internet Explorer 9 (Windows 7)</td> + <td><img alt="Rendering of a sized check box on IE9" src="/files/4169/checkbox-IE9-win7.png" style="height: 107px; width: 106px;"></td> + </tr> + <tr> + <td>Internet Explorer 7 (Windows XP)</td> + <td><img alt="Rendering of a sized check box on IE7" src="/files/4171/checkbox-IE7-winxp.png" style="height: 100px; width: 100px;"></td> + </tr> + </tbody> +</table> + +<h4 id="Een_ingewikkelder_voorbeeld">Een ingewikkelder voorbeeld</h4> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p>met als basisstijl:</p> + +<pre class="brush: css">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; +}</pre> + +<p>Aanpassing van het keuzevakje:</p> + +<p>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:</p> + +<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p> + +<p>Vooreerst moeten de originele keuzevakjes verborgen worden. Daartoe worden ze buiten het gezichtsveld geplaatst. Hierbij moeten twee zaken in acht genomen worden:</p> + +<ul> + <li>Om de keuzevakjes te verbergen mag <code>display:none</code> niet gebruikt worden omdat de gebruiker ze nog moet kunnen bedienen. Hij moet ze immers kunnen aan- of uitvinken. Met <code>display:none</code> is het keuzevak niet meer toegankelijk voor de gebruiker.</li> + <li>De vormgeving gebeurt door CSS3. Om compatibel te blijven met oudere browsers wordt de {{cssxref(":root")}} pseudoklasse gebruikt. Oudere browsers, als Internet Explorer, tonen dan een gewoon keuzevak, terwijl de moderne browsers het aangepaste keuzevak zullen tonen.</li> +</ul> + +<pre class="brush: css">:root input[type=checkbox] { + /* original check box are push outside the viexport */ + position: absolute; + left: -1000em; +}</pre> + +<p>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 <a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">adjacent sibling selector </a>wordt het bijbehorende label geselecteerd. Tenslotte wordt het {{cssxref(":before")}} pseudo-element ingevoegd en wordt bepaald hoe het keuzevakje er moet uitzien.</p> + +<pre class="brush: css">: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; +}</pre> + +<p>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.</p> + +<pre class="brush: css">: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; +}</pre> + +<p>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:</p> + +<pre class="brush: css">:root input[type=checkbox]:focus + label:before { + outline: 1px dotted black; +}</pre> + +<p>Hier een voorbeeld:</p> + +<p>{{EmbedLiveSample("A_more_complex_example", 250, 130)}}</p> + +<h3 id="Het_probleem_met_select">Het probleem met select</h3> + +<p>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:</p> + +<pre class="brush: html"><select> + <option>Cherry</option> + <option>Banana</option> + <option>Strawberry</option> +</select></pre> + +<pre class="brush: css">select { + width : 80px; + padding : 10px; +} + +option { + padding : 5px; + color : red; +}</pre> + +<p>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:</p> + +<pre class="brush: 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; +}</pre> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col">Browser</th> + <th colspan="2" scope="col" style="text-align: center;">Normale weergave</th> + <th colspan="2" scope="col" style="text-align: center;">Aangepaste weergave</th> + </tr> + <tr> + <th scope="col" style="text-align: center;">gesloten</th> + <th scope="col" style="text-align: center;">open</th> + <th scope="col" style="text-align: center;">gesloten</th> + <th scope="col" style="text-align: center;">open</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 16 (Mac OSX)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX (No tweak)" src="/files/4201/select-firefox-macos.png" style="height: 52px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX (No tweak)" src="/files/4199/select-firefox-macos-open.png" style="height: 143px; width: 105px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX" src="/files/4197/select-firefox-macos-custom.png" style="height: 52px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX" src="/files/4195/select-firefox-macos-custom-open.png" style="height: 141px; width: 108px;"></td> + </tr> + <tr> + <td>Firefox 16 (Windows 7)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7 (No tweak)" src="/files/4209/select-firefox-win7.png" style="height: 50px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7 (No tweak)" src="/files/4207/select-firefox-win7-open.png" style="height: 130px; width: 96px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7" src="/files/4205/select-firefox-win7-custom.png" style="height: 54px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7" src="/files/4203/select-firefox-win7-custom-open.png" style="height: 134px; width: 96px;"></td> + </tr> + <tr> + <td>Chrome 22 (Mac OSX)</td> + <td style="vertical-align: top; text-align: center;"><img alt="Select closed on Chrome on Mac OSX (No tweak)" src="/files/4183/select-chrome-macos.png" style="height: 21px; vertical-align: top; width: 84px;"></td> + <td style="vertical-align: top; text-align: center;"><img alt="Select open on Chrome on Mac OSX (No tweak)" src="/files/4181/select-chrome-macos-open.png" style="height: 81px; vertical-align: top; width: 121px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Mac OSX" src="/files/4179/select-chrome-macos-custom.png" style="height: 37px; vertical-align: top; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Mac OSX" src="/files/4177/select-chrome-macos-custom-open.png" style="height: 86px; vertical-align: top; width: 125px;"></td> + </tr> + <tr> + <td>Chrome 22 (Windows 7)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7 (No tweak)" src="/files/4191/select-chrome-win7.png" style="height: 42px; vertical-align: top; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7 (No tweak)" src="/files/4189/select-chrome-win7-open.png" style="height: 93px; width: 84px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7" src="/files/4187/select-chrome-win7-custom.png" style="height: 42px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7" src="/files/4185/select-chrome-win7-custom-open.png" style="height: 93px; width: 95px;"></td> + </tr> + <tr> + <td>Opera 12.01 (Mac OSX)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX (No tweak)" src="/files/4225/select-opera-macos.png" style="height: 42px; width: 81px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX (No tweak)" src="/files/4223/select-opera-macos-open.png" style="height: 94px; width: 135px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX" src="/files/4221/select-opera-macos-custom.png" style="height: 39px; width: 81px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX" src="/files/4219/select-opera-macos-custom-open.png" style="height: 90px; width: 130px;"></td> + </tr> + <tr> + <td>Internet Explorer 9 (Windows 7)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE9 on Windows 7" src="/files/4217/select-IE9-win7.png" style="height: 41px; width: 82px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE9 on Windows 7" src="/files/4215/select-IE9-win7-open.png" style="height: 78px; width: 100px;"></td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + </tr> + <tr> + <td>Internet Explorer 7 (Windows XP)</td> + <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE7 on Windows XP" src="/files/4213/select-IE7-winxp.png" style="height: 23px; width: 81px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE7 on Windows XP" src="/files/4211/select-IE7-winxp-open.png" style="height: 74px; width: 82px;"></td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + <td style="text-align: center; vertical-align: middle;">n.v.t.</td> + </tr> + </tbody> +</table> + +<p>Ondanks het gebruik van de<code> -*-appearance</code> eigenschap zijn er nog enkele problemen:</p> + +<ul> + <li>De {{cssxref("padding")}} eigenschap wordt nog steeds niet gelijk behandeld in alle browsers.</li> + <li>De oude Internet Explorer laat geen soepele styling toe.</li> + <li>Firefox laat niet toe de pijl van het afrolmenu te stylen.</li> + <li>Bij het stylen van de {{HTMLElement("option")}} elementen binnen de afrollijst verschillen het gedrag van Chrome en Opera van systeem tot systeem.</li> +</ul> + +<p>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.</p> + +<p>In het volgend artikel wordt nagegaan welke eigenschappen in aanmerking komen: <a href="/en-US/docs/">Tabel van compatibele formulierelementen</a>.</p> + +<h2 id="De_weg_naar_mooiere_formulieren_nuttige_bibliotheken_en_polyfills">De weg naar mooiere formulieren: nuttige bibliotheken en polyfills</h2> + +<p>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.</p> + +<p>Als volledige controle over formulierelementen gewenst is, zit er niets anders op dan JavaScript te gebruiken. In het artikel <a href="/en-US/docs/">Het maken van aangepaste widgets</a> wordt getoond hoe men zelf widgets kan aanpassen, maar er zijn ook enkele bibliotheken die van nut kunnen zijn:</p> + +<ul> + <li><a href="http://sprawsm.com/uni-form/" rel="external" title="http://sprawsm.com/uni-form/">Uni-form</a> is een kader dat formulieropmaak standaardiseert met CSS. Er is ook een optie voor extra mogelijkheden samen met jQuery.</li> + <li><a href="http://formalize.me/" rel="external" title="http://formalize.me/">Formalize</a> is een uitbreiding van JavaScript (zoals jQuery, Dojo, YUI, enz.) die formulieren aanpast en normaliseert.</li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Niceforms</a> is een standalone JavaScript methode die volledige websites kan aanpassen.</li> +</ul> + +<p>De volgende bibliotheken zijn niet uitsluitend voor formulieren, maar zijn zeer interessant:</p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a> biedt zeer interessante geavanceerde en aanpasbare widgets zoals datumpickers (met speciale aandacht voor toegankelijkheid).</li> + <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external" title="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap</a> is zeer nuttig bij het normaliseren van formulieren.</li> + <li><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html" rel="external" title="http://afarkas.github.com/webshim/demos/demos/webforms.html">WebShim</a> is een uitgebreid gereedschap dat HTML5 ondersteunt. Het gedeelte over webformulieren kan zeer nuttig zijn.</li> +</ul> + +<p>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.</p> + +<h2 id="Besluit">Besluit</h2> + +<p>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.</p> + +<p>In het volgend artikel wordt ingegaan op hoe de diverse HTML-formulierelementen de meest belangrijke CSS eigenschappen ondersteunen: <a href="/en-US/docs/">Tabel van compatibele formulierelementen</a>.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="http://diveintohtml5.info/forms.html" rel="external" title="http://diveintohtml5.info/forms.html">HTML5: Formulieren</a></li> + <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external" title="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/">Nuttige ideeën en leidraden voor goed ontwerpen van webformulieren</a></li> +</ul> diff --git a/files/nl/learn/forms/basic_native_form_controls/index.html b/files/nl/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..5b83a25f57 --- /dev/null +++ b/files/nl/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,1449 @@ +--- +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 +--- +<p><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML formulieren</a> 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.</p> + +<p>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: <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe aangepaste widgets maken</a>.</p> + +<h2 id="Velden_voor_tekstinvoer">Velden voor tekstinvoer</h2> + +<p>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.</p> + +<p>Tekstvelden van HTML formulieren zijn eenvoudige tekstvelden die alleen platte tekst aanvaarden. Dit betekent dat <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (vet, cursief, enz.) niet mogelijk is. Alle rich text editors hebben aangepaste widgets.</p> + +<p>Alle tekstvelden hebben enkele gemeenschappelijke eigenschappen:</p> + +<ul> + <li>Zij kunnen gemarkeerd worden als {{htmlattrxref("readonly","input")}} (de gebruiker kan de inhoud niet wijzigen) of zelfs als {{htmlattrxref("disabled","input")}} (de ingegeven waarde wordt niet mee verzonden met de rest van de formuliergegevens).</li> + <li>Zij kunnen een plaatshouder hebben: {{htmlattrxref("placeholder","input")}}. Dit is tekst die in het invoerveld staat om het doel van het veld aan te geven.</li> + <li>Hun afmetingen kunnen opgegeven worden: {{htmlattrxref("size","input")}} geeft de fysieke grootte van het veld aan en <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> geeft het aantal karakters aan dat ingegeven kan worden in het veld.</li> + <li>Zij kunnen voorzien zijn van <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spellingscontrole</a> als de browser dit toelaat.</li> +</ul> + +<table class="standard-table"> + <caption>Compatibiliteits tabel</caption> + <tbody> + <tr> + <th>Functie op bureaublad</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.10</td> + <td>4.0</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("3.6")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Functie op mobiel apparaat</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>11.50</td> + <td>4</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>11.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Eenregelige_tekstvelden">Eenregelige tekstvelden</h3> + +<p>Een tekstveld van één regel wordt bekomen met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>text</code> is. Text is de defaultwaarde. Dus ook zonder het {{htmlattrxref("type","input")}} attribuut of een voor de browser onbekend <code>type</code> attribuut is het platte tekst die aanvaardt wordt door het tekstveld.</p> + +<pre class="brush: html"><input type="text"></pre> + +<p>Eenregelige tekstvelden hebben één beperking: regelafbrekingen worden door de browser verwijderd voordat de gegevens verstuurd worden.</p> + +<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> + +<p>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 <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="/en-US/docs/JavaScript/Guide/Regular_Expressions">reguliere expressie</a> .</p> + +<pre class="brush: html"><input type="text" pattern="^cherry|banana$"></pre> + +<p>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.</p> + +<h4 id="Veld_voor_e-mail_addres">Veld voor e-mail addres</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>email</code> op te geven voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="email" multiple></pre> + +<p>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.</p> + +<h4 id="Veld_voor_paswoord">Veld voor paswoord</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>password</code> op te geven voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="password"></pre> + +<p>Hier kan elk teken ingegeven worden en de tekens zijn niet leesbaar.</p> + +<div class="note"><strong>Note:</strong> 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.</div> + +<h4 id="Zoekveld">Zoekveld</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>search</code> voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="search"></pre> + +<p>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.</p> + +<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> + +<h4 id="Veld_voor_telefoonnummer">Veld voor telefoonnummer</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>tel</code> te gebruiken voor het {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="tel"></pre> + +<p>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.</p> + +<h4 id="URL_veld">URL veld</h4> + +<p>Dit veld wordt ingesteld door de waarde <code>url voor het</code> {{htmlattrxref("type","input")}} attribuut:</p> + +<pre class="brush: html"><input type="url"></pre> + +<p>Dit veld waakt er over dat alleen geldige URLs worden ingegeven. Er wordt een fout gegenereerd als de URL niet juist is.</p> + +<div class="note"><strong>Nota:</strong> Dat de URL de juiste vorm heeft betekent niet dat dat het adres bestaat.</div> + +<p>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 : <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Gegevensvalidatie</a>.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td> + <td>2.3</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>3.1</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>3.1</td> + </tr> + </tbody> +</table> + +<h3 id="Tekstvelden_met_meerdere_regels">Tekstvelden met meerdere regels</h3> + +<p>Het {{HTMLElement("textarea")}} element creëert een tekstveld dat meerdere regels bevat.</p> + +<pre class="brush: html"><textarea cols="20" rows="10"></textarea></pre> + +<p>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.</p> + +<p>Dank zij de CSS eigenschap {{cssxref("resize")}} kan de gebruiker rechtstreeks de grootte van het veld aanpassen.</p> + +<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Afrolmenu">Afrolmenu</h2> + +<p>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.</p> + +<h3 id="Keuzelijst">Keuzelijst</h3> + +<p>Een keuzelijst wordt gemaakt met het {{HTMLElement("select")}} element met één of meerdere {{HTMLElement("option")}} elementen die de keuzemogelijkheden aangeven.</p> + +<pre class="brush: html"><select> + <option>Banana</option> + <option>Cherry</option> + <option>Lemon</option> +</select></pre> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Meerkeuzelijst">Meerkeuzelijst</h3> + +<p>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. </p> + +<pre class="brush: html"><select multiple> + <option>Banana</option> + <option>Cherry</option> + <option>Lemon</option> +</select></pre> + +<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> + +<div class="note"><strong>Note:</strong> Niet alle browsers die het {{HTMLElement("select")}} element ondersteunen, ondersteunen het {{htmlattrxref("multiple","select")}} attribuut.</div> + +<h3 id="Autoaanvullen">Autoaanvullen</h3> + +<p>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.</p> + +<p>Zodra de gebruiker iets ingeeft wordt een keuzelijst getoond met alle overeenkomsten in het datalist object.</p> + +<pre class="brush: html"><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></pre> + +<div class="note"><strong>Note:</strong> Volgens <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a> 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.</div> + +<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> + +<table class="standard-table"> + <caption>Compatibiliteits tabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("datalist")}}</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("4.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobile fuctie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("datalist")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("4.0")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Klikbare_items">Klikbare items</h2> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Het_keuzevakje">Het keuzevakje</h3> + +<p>Een keuzevakje wordt gemaakt met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>checkbox</code> is.</p> + +<pre class="brush: html"><input type="checkbox" checked> +</pre> + +<p>Het keuzevakje gedefinieerd op voorgaande manier is bij default aangevinkt.</p> + +<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="checkbox"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="</code><code>checkbox</code><code>"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Het_keuzerondje">Het keuzerondje</h3> + +<p>Een keuzerondje wordt gemaakt door het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>radio</code> is.</p> + +<pre class="brush: html"><input type="radio" checked></pre> + +<p>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.</p> + +<pre class="brush: html"><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></pre> + +<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Knoppen">Knoppen</h2> + +<p>In HTML formulieren zijn er drie knoppen:</p> + +<dl> + <dt>Verzenden</dt> + <dd>Zendt de formuliergegevens naar de server.</dd> + <dt>Herstel</dt> + <dd>Herstelt alle widgets van het formulier naar hun defaultwaarde.</dd> + <dt>Anoniem</dt> + <dd>Knoppen waarvan de uitwerking aangepast kan worden door middel an JavaScript.</dd> +</dl> + +<p>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:</p> + +<h3 id="verzenden">verzenden</h3> + +<pre class="brush: html"><button type="submit"> + This a <br><strong>submit button</strong> +</button> + +<input type="submit" value="This is a submit button"></pre> + +<h3 id="herstel">herstel</h3> + +<pre class="brush: html"><button type="reset"> + This a <br><strong>reset button</strong> +</button> + +<input type="reset" value="This is a reset button"></pre> + +<h3 id="anoniem">anoniem</h3> + +<pre class="brush: html"><button type="button"> + This an <br><strong>anonymous button</strong> +</button> + +<input type="button" value="This is an anonymous button"></pre> + +<p>In principe gedraagt het {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element zich identiek. Er zijn echter kleine verschillen:</p> + +<ul> + <li>Zoals de voorgaande voorbeelden laten zien laten de {{HTMLElement("button")}} elementen HTML inhoud toe als tekst, terwijl de {{HTMLElement("input")}} elementen alleen platte tekst toelaten.</li> + <li>De {{HTMLElement("button")}} elementen kunnen een andere waarde hebben dan hun label (dit is echter niet betrouwbaar in Internet Explorer voor IE 8).</li> +</ul> + +<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="submit"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown()}}<br> + (Buggy before IE8)</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Speciale_formulier_widgets">Speciale formulier widgets</h2> + +<p>Deze widgets laten invoer toe van complexe of gestructeerde gegevens zoals exacte of benaderende getallen, datum en tijd en kleuren.</p> + +<h3 id="Getallen">Getallen</h3> + +<p>Widgets voor getallen worden gemaakt met het {{HTMLElement("input")}} element en <code>number</code> 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.</p> + +<p>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.</p> + +<h4 id="Voorbeeld">Voorbeeld</h4> + +<pre class="brush: html"><input type="number" min="1" max="10" step="2"></pre> + +<p>Dit creëert een widget wiens waarde begrensd is tussen 1 en 10 en die in stappen van 2 kan verhoogd of verlaagd worden.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> + <td>11.0</td> + <td>{{CompatNo()}} {{bug('344616')}}</td> + <td>10<br> + (<em>herkend maar geen UI</em>)</td> + <td>{{CompatVersionUnknown()}}</td> + <td>5.2</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> + <td>2.3</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> + +<h3 id="Schuifregelaar">Schuifregelaar</h3> + +<p>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.</p> + +<p>Een schuifregelaar wordt gemaakt met het {{HTMLElement("input")}} element met {{htmlattrxref("type","input")}} attribuut <code>range</code>. Hij moet wel correct ingesteld zijn met zijn {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} en {{htmlattrxref("step","input")}} attributen.</p> + +<h4 id="Voorbeeld_2">Voorbeeld</h4> + +<pre class="brush: html"><input type="range" min="1" max="5" step="1"></pre> + +<p>Dit voorbeeld creëert een schuifregelaar waarvan waarde varieert tussen 1 en 5 in stappen van +1 en -1.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td> + <td>5.0</td> + <td>23.0</td> + <td>10</td> + <td>10.62</td> + <td>4.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td> + <td>{{CompatNo()}}</td> + <td>23.0</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + </tbody> +</table> + +<h3 id="Ingave_van_datum_en_tijd">Ingave van datum en tijd</h3> + +<p>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.</p> + +<p>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:</p> + +<h4 id="date"><code>date</code></h4> + +<p>Dit creëert een widget die een datum toont of kan opnemen, zonder tijd.</p> + +<pre class="brush: html"><input type="date"></pre> + +<h4 id="datetime"><code>datetime</code></h4> + +<p>Dit crëeert een widget die een datum met tijd kan tonen of opnemen in de UTC tijdzone.</p> + +<pre class="brush: html"><input type="datetime"></pre> + +<h4 id="datetime-local"><code>datetime-local</code></h4> + +<p>Dit creëert een widget die een datum met tijd weergeeft of opneemt in elke tijdzone.</p> + +<pre class="brush: html"><input type="datetime-local"></pre> + +<h4 id="month"><code>month</code></h4> + +<p>Dit creëert een widget die een maand en een jaartal weergeeft of opneemt.</p> + +<pre class="brush: html"><input type="month"></pre> + +<h4 id="time"><code>time</code></h4> + +<p>Creëert een widget die een tijd weergeeft of opneemt.</p> + +<pre class="brush: html"><input type="time"></pre> + +<h4 id="week"><code>week</code></h4> + +<p>Creëert een widget die een week en een jaartal weergeeft of opneemt.</p> + +<pre class="brush: html"><input type="week"></pre> + +<p>Alle datum en tijd widgets kunnen beperkt zijn door de {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen.</p> + +<pre class="brush: html"><label for="myDate">When are you available this summer?</label> +<input type="date" min="2013-06-01" max="2013-08-31" id="myDate"></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td> + <td>20.0</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('825294')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} {{bug('446510')}}</td> + <td>{{CompatNo()}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<div class="warning"><strong>Waarschuwing:</strong> 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!</div> + +<h3 id="Kleuren_kiezen">Kleuren kiezen</h3> + +<p>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.</p> + +<p>Een kleuren widget wordt gemaakt door het {{HTMLElement("input")}} element met <code>color</code> als {{htmlattrxref("type","input")}} attribuut.</p> + +<pre class="brush: html"><input type="color"></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td> + <td>21.0</td> + <td>{{CompatNo()}} {{bug('547004')}}</td> + <td>{{CompatNo()}}</td> + <td>11.01</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Andere_widgets">Andere widgets</h2> + +<p>Er zijn nog enkele andere widgets die niet dadelijk ergens bij horen maar niettemin belangrijk zijn.</p> + +<h3 id="Kiezen_van_bestanden">Kiezen van bestanden</h3> + +<p>HTML formulieren kunnen bestanden naar een server versturen. Dit wordt verduidelijkt in het artikel: <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Verzenden en ontvangen van gegevens</a>. De widget "Bestanden kiezen" laat de gebruiker toe één of meerdere bestanden te kiezen om te verzenden.</p> + +<p>Kies het {{HTMLElement("input")}} element met <code>file</code> 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.</p> + +<h4 id="Voorbeeld_3">Voorbeeld</h4> + +<p>In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.</p> + +<pre class="brush: html"><input type="file" accept="image/*" multiple></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfunctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Verborgen_inhoud">Verborgen inhoud</h3> + +<p>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 <code>hidden</code> als {{htmlattrxref("type","input")}} attribuut.</p> + +<p>Dit element vereist ook de <code>name</code> en <code>value</code> attributen:</p> + +<pre class="brush: html"><input type="hidden" name="timestamp" value="1286705410"></pre> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Feature Desktop</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Afbeelding">Afbeelding</h3> + +<p>De <strong>afbeeldings widget</strong> 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).</p> + +<p>Een afbeeldings widget wordt gecrëerd met een {{HTMLElement("input")}} element en <code>image</code> als {{htmlattrxref("type","input")}} attribuut. Dit element ondersteunt dezelfde attributen als het {{HTMLElement("img")}} element plus de attributen van alle formulier knoppen.</p> + +<pre class="brush: html"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> + +<p>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 "<em>.x</em>" en de sleutel van de Y-waarde is het {{htmlattrxref("name","input")}} attribuut gevolgd door "<em>.y</em>".</p> + +<p>Laten we een voorbeeld bekijken:</p> + +<pre class="brush: html"><form action="http://foo.com" method="get"> + <input type="image" value="pos" alt="" src="map.png" /> +</form> +</pre> + +<p>Bij het klikken op de afbeelding in dit formulier wordt naar de volgende URL verzonden:</p> + +<pre>http://foo.com?pos.x=123&pos.y=456</pre> + +<p>De waarde van de <code>pos.x</code> en <code>pos.y</code> parameters is afhankelijk van de plaats in de afbeelding waar geklikt wordt. Hoe deze waarden verzonden en ontvangen worden wordt beschreven in <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Zenden en ontvangen van gegevens</span></a>.</p> + +<table class="standard-table"> + <caption>Compatibiliteitstabel</caption> + <tbody> + <tr> + <th>Desktopfuctie</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td> + <td>1.0</td> + <td>1.0</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functie</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> + +<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> + +<p>Meters en en voortgangsbalken zijn visuele voortellingen van numerieke waarden.</p> + +<p>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 <span class="ng-binding"><span class="highlighted">technologie</span>ën kunnen overweg met dit element.</span></p> + +<pre class="brush: html"><progress max="100" value="75">75/100</progress></pre> + +<p>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:</p> + +<ul> + <li>de waarden van {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} delen het interval in drie delen: + <ul> + <li>Het onderste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("min","meter")}} en {{htmlattrxref("low","meter")}} (deze waarden inbegrepen)</li> + <li>Het middenste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} (deze waarden uitgesloten)</li> + <li>Het bovenste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("high","meter")}} en {{htmlattrxref("max","meter")}} (deze waarden inbegrepen)</li> + </ul> + </li> + <li>De {{htmlattrxref("optimum","meter")}} waarde bepaalt de optimale waarde voor het {{HTMLElement("meter")}} element. Samen met de waarden {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} wordt bepaald welk deel van het interval de voorkeur krijgt: + <ul> + <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het onderste gedeelte van het interval ligt, is het het onderste gedeelte dat de voorkeur krijgt, het middenste gedeelte wordt als het gemiddelde beschouwd en het bovenste gedeelte wordt als het slechtste gedeelte beschouwd.</li> + <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het middenste gedeelte van het interval ligt, wordt het onderste en het bovenste gedeelte als het gemiddelde beschouwd. Het middenste gedeelte krijgt de voorkeur.</li> + <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het bovenste gedeelte van het interval ligt, wordt het onderste gedeelte als slecht beschouwd, het middelste gedeelte als het gemiddelde en het bovenste gedeelte als het gedeelte dat de voorkeur heeft.</li> + </ul> + </li> +</ul> + +<p>Alle browsers die het {{HTMLElement("meter")}} element ondersteunen gebruiken de deze waarden om de kleur van de balk aan te passen:</p> + +<ul> + <li>Als de huidige waarde in het voorkeurgebied valt is de balk groen.</li> + <li>Als de huidige waarde in het gemiddelde gebied ligt is de balk geel.</li> + <li>Als de huidige waarde in het slechte gedeelte ligt is de kleur van de balk rood.</li> +</ul> + +<p>Niet alle browsers en ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën kunnen overweg met dit element.</span></p> + +<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> + +<table class="standard-table"> + <caption>Compatibility table</caption> + <tbody> + <tr> + <th>Desktopfuncties</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>{{HTMLElement("progress")}}</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>5.2</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>5.2</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Mobiele functies</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>{{HTMLElement("progress")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatNo()}}</td> + <td>11.0</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> + +<h2 id="Zie_ook">Zie ook</h2> + +<p>Om dieper in te gaan op de verschillende widgets voor formulieren zijn er nuttige externe bronnendie kunnen geraadpleegd worden:</p> + +<ul> + <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> door Wufoo</li> + <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> over Quirksmode (ook <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">beschikbaar voor mobiele</a> browsers)</li> +</ul> 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 new file mode 100644 index 0000000000..9bdc0006b5 --- /dev/null +++ b/files/nl/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,965 @@ +--- +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 +--- +<p>Formulieren zijn een van de meest complexe structuren in <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. Elk basisformulier kan gemaakt worden met elementen en attributen. Door een correcte opbouw wordt een bruikbaar en <a href="/en-US/docs/Web/Accessibility">toegankelijk </a>formulier verkregen.</p> + +<p>Om functionaliteit aan HTML formulieren toe te voegen wordt voornamelijk Javascript gebruikt. Meer geavanceerde <span class="ng-binding"><span class="highlighted">technologie</span>ën zoals </span><a href="/en-US/docs/XForms" title="/en-US/docs/XForms">XForms</a>, thans voorbij gestreefd, worden helaas niet door alle browsers geïmplementeerd.</p> + +<p>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 <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe eigen widgets voor formulieren te maken</a> wordt dieper ingegaan op het werken met widgets.</p> + +<h2 id="sect1"></h2> + +<h2 id="Globale_structuur">Globale structuur</h2> + +<h3 id="Het_<form>_element">Het <form> element</h3> + +<p>Het {{HTMLElement("form")}} element <span class="highlighted">definieert formeel een formulier en de attributen die het gedrag van dit formulier bepalen. Elk HTML formulier moet met deze elementen beginnen. Vele ondersteunende </span><span class="ng-binding"><span class="highlighted">technologie</span>ën</span><span class="highlighted"> of browser plug-ins herkennen </span> {{HTMLElement("form" )}} elementen en hebben speciale routines om er gebruik van te maken.</p> + +<div class="note"><strong>Nota:</strong> Het is strikt verboden om formulieren te nesten. Afhankelijk van de browser is hun gedrag dan onvoorspelbaar.</div> + +<p>Het {{HTMLElement("form")}} element ondersteunt de volgende attributen (allemaal optioneel):</p> + +<table> + <caption>Attributen van het {{HTMLElement("form")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td style="white-space: nowrap;">{{htmlattrxref("accept-charset","form")}}</td> + <td><code>UNKNOWN</code></td> + <td>Een lijst van karaktertekens die door een server wordt aanvaard. De defaultwaarde is de speciale string <code>UNKNOWN</code>. In dit geval worden de karakters gecodeerd zoals in het document dat het form element bevat.</td> + </tr> + <tr> + <td>{{htmlattrxref("action","form")}}</td> + <td></td> + <td>De URI van een webpagina die de informatie van het formulier verwerkt.</td> + </tr> + <tr> + <td>{{htmlattrxref("autocomplete","form")}}</td> + <td><code>on</code></td> + <td>Geeft aan of de widgets in dit formulier automatisch aangevuld kunnen worden aan de defaultwaarden van de browser. Dit attribuut kan twee waarden aannemen: <code>on</code> of <code>off</code>.</td> + </tr> + <tr> + <td>{{htmlattrxref("enctype","form")}}</td> + <td><code>application/x-www-form-urlencoded</code></td> + <td>Als de waarde van het <code>method</code> attribuut <code>post</code> is, dan is dit attribuut het <a class="external" href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME type</a> van de inhoud van het formulier. Mogelijke waarden zijn: + <ul> + <li><code>application/x-www-form-</code></li> + <li><code>multipart/form-data</code>: Gebruik deze waarde bij gebruik van een {{HTMLElement("input")}} element waarvan het t<code>ype</code> attribuut <em>file</em> is.</li> + <li><code>text/plain</code></li> + </ul> + </td> + </tr> + <tr> + <td>{{htmlattrxref("method","form")}}</td> + <td><code>get</code></td> + <td> + <p>T</p> + + <p>De <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> methode die de browser gebruikt om het formulier te versturen. Dit attribuut kan één van twee waarden aannemen: <code>get</code> or <code>post</code>.</p> + </td> + </tr> + <tr> + <td>{{htmlattrxref("name","form")}}</td> + <td></td> + <td>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 <code>id</code> attribuut gebruikt.</td> + </tr> + <tr> + <td>{{htmlattrxref("novalidate","form")}}</td> + <td>(<em>false</em>)</td> + <td>Dit attribuut geeft aan dat het formulier niet moet gevalideerd worden bij verzending.</td> + </tr> + <tr> + <td>{{htmlattrxref("target","form")}}</td> + <td><code>_self</code></td> + <td>Een 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: + <ul> + <li><code>_self</code>: Laad het antwoord in de huidige browser configuratie ({{HTMLElement("iframe")}}, tab, venster, enz.) .</li> + <li><code>_blank</code>: Laad het antwoord in een nieuwe browserconfiguratie.</li> + <li><code>_parent</code>: Laad het antwoord in de ouder van de huidige browser configuratie. Als er geen ouder is gedraagt deze optie zich als <code>_self</code>.</li> + <li><code>_top</code>: 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 <code>_self</code>.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<p>Technisch gezien is het HTML5 die het <code>form</code> 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.</p> + +<h3 id="De_<fieldset>_en_<legend>_elementen">De <fieldset> en <legend> elementen</h3> + +<p>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 <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> of <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a>, eerst de legend voordat ze het label van een widget lezen.</p> + +<p>Hier volgt een klein voorbeeld:</p> + +<pre class="brush:html;"><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></pre> + +<p>In dit voorbeeld zal een schermlezer voor de eerste widget "Fruitsap klein" lezen, voor de tweede "Fruitsap medium" en voor de derde "Fruitsap groot".</p> + +<p>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.</p> + +<p>Het {{HTMLElement("fieldset")}} element ondersteunt volgende specifieke attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("fieldset")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("disabled","fieldset")}}</td> + <td>(<em>false</em>)</td> + <td>Als dit attribuut <code>true</code> 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.</td> + </tr> + </tbody> +</table> + +<h3 id="Het_<label>_element">Het <label> element</h3> + +<p>Het {{HTMLElement("label")}} element definieert formeel het label van een HTML widget. Dit is het belangrijkste element om toegankelijke formulieren te maken.</p> + +<p>Het {{HTMLElement("label")}} element heeft de volgende attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("label")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("for","label")}}</td> + <td></td> + <td>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 <code>for</code> attribuut in het document.</td> + </tr> + </tbody> +</table> + +<p>Een {{HTMLElement("label")}} element is gebonden aan zijn widget door het <code>for</code> attribuut. Het <code>for</code> attribuut refereert naar het <code>id</code> 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 <code>for</code> attribuut te gebruiken omdat sommige ondersteunende technologieën niet overweg kunnen met expliciete relaties tussen labels en widgets.</p> + +<p>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.</p> + +<pre class="brush:html;"><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></pre> + +<p>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.</p> + +<p>Bekijk volgend voorbeeld:</p> + +<pre class="brush:html;"><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></pre> + +<p>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.</p> + +<p>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.</p> + +<p>Het tweede form element werkt op dezelfde manier. Zo weet de gebruiker hoe hij de datum moet ingeven.</p> + +<h3 id="Het_<output>_element">Het <output> element</h3> + +<p>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.</p> + +<p>Het {{HTMLElement("output")}} element ondersteunt de volgende attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("output")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("for","output")}}</td> + <td></td> + <td>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.</td> + </tr> + </tbody> +</table> + +<h3 id="Gewone_HTML_structuren_gebruikt_bij_formulieren">Gewone HTML structuren gebruikt bij formulieren</h3> + +<p>Ondanks al het voorgaande blijven formulieren gewone HTML structuren. Dus alles over HTML is ook van toepassing op formulieren.</p> + +<p>Zoals in de voorbeelden te zien is worden widgets tussen {{HTMLElement("p")}} of {{HTMLElement("div")}} elementen geplaatst.</p> + +<p>Samen met het {{HTMLElement("fieldset")}} element worden ook HTML titels gebruikt en worden formulieren in secties verdeeld om ingewikkelde formulieren te maken.</p> + +<p>Ook worden vaak HTML lijsten gebruikt bij keuzevakjes en keuzerondjes.</p> + +<p>Ziehier een eenvoudig betalingsformulier:</p> + +<pre class="brush:html;"><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></pre> + +<p>Met behulp van CSS ziet het formulier er zo uit:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("A_payment_form",460,600, "", "HTML/Forms/How_to_structure_an_HTML_form/Example")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form/Example" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form/Example">Probeer de broncode</a></td> + </tr> + </tbody> +</table> + +<h2 id="HTML_widgets">HTML widgets</h2> + +<p>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: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">Basis widgets voor formulieren </a>gaat dieper in op het werken met widgets.</p> + +<h3 id="Het_<input>_element">Het <input> element</h3> + +<p>Dit is een speciaal element omdat het eigenlijk van alles kan zijn. Door eenvoudig zijn <code>type</code> attribuut te wijzigen kan het totaal iets anders worden. Om de zaken te vereenvoudigen kan het <code>type</code> 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 <code>type</code> attribuut.</p> + +<p>Dit wordt overzichtelijk gemaakt in volgende tabel. (Zie voor een volledige lijst van alle attributen de pagina betreffende het {{HTMLElement("input")}} element):</p> + +<table> + <thead> + <tr> + <th scope="col">Waarde van het type attribuut</th> + <th scope="col">Beschrijving</th> + <th scope="col">Vereiste attributen</th> + <th scope="col">Relevante attributen</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" style="text-align: center;">Eenregelige tekstvelden</th> + </tr> + <tr> + <td><code>text</code></td> + <td>Dit is het meest eenvoudige tekstveld. De waarde <em>text</em> voor het <code>type</code> attribuut is de defaultwaarde van dit attribuut. De waarde wordt gelezen zoals zij wordt ingegeven.</td> + <td></td> + <td>{{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")}}</td> + </tr> + <tr> + <td><code>email</code></td> + <td>Een veld dat alleen e-mailadressen toelaat.</td> + <td></td> + <td>{{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")}}</td> + </tr> + <tr> + <td><code>password</code></td> + <td>De waarde van dit tekstveld wordt verborgen.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <td><code>search</code></td> + <td>Een veld om zoekwoorden in te geven.</td> + <td></td> + <td>{{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")}}</td> + </tr> + <tr> + <td><code>tel</code></td> + <td>Een veld om een telefoonnummer in te geven.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <td><code>url</code></td> + <td>Een veld om een absolute URL in te geven.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> + </tr> + <tr> + <th colspan="4" style="text-align: center;">Widgets zonder tekstingave</th> + </tr> + <tr> + <td><code>checkbox</code></td> + <td>Een keuzevakje.</td> + <td></td> + <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>color</code></td> + <td>Een widget om een kleur te kiezen.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>file</code></td> + <td>Een widget om een bestand te kiezen.</td> + <td></td> + <td>{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>hidden</code></td> + <td>Een widget die niet getoond wordt maar waarvan de waarde toch naar de server gestuurd wordt.</td> + <td></td> + <td></td> + </tr> + <tr> + <td><code>number</code></td> + <td>Een widget voor ingave van een getal met drijvende komma.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> + </tr> + <tr> + <td><code>radio</code></td> + <td>Een keuzerondje. Slechts één van een gegeven groep kan gekozen worden.</td> + <td></td> + <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>range</code></td> + <td>Een widget om een getal in te geven waarvan de waarde niet belangrijk is.</td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> + </tr> + <tr> + <th colspan="4" style="text-align: center;">Widgetsvoor datum en tijd + <div class="note">Niet ondersteund.</div> + </th> + </tr> + <tr> + <td><code>date</code></td> + <td>Een veld om de datum in te geven (jaar, maand en dag, geen tijd). + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>Een veld om een datum en tijd in te geven (uur, minuut, seconde en fractie van een seconde) gebaseerd op de UTC tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>datetime-local</code></td> + <td>Een veld om een datum en tijd in te geven zonder tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>month</code></td> + <td>Een veld voor ingave van maand en jaar, zonder tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=446510">bug 446510</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>time</code></td> + <td>Een veld om een tijd in te geven zonder tijdzone. + <div class="note">Niet geïnstalleerd zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <td><code>week</code></td> + <td>Een veld om een datum in te geven bestaande uit een week-jaarnummer en een weeknummer zonder tijdzone. + <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> + </td> + <td></td> + <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> + </tr> + <tr> + <th colspan="4" style="text-align: center;">Knoppen</th> + </tr> + <tr> + <td><code>button</code></td> + <td>Een knop zonder default gedrag.</td> + <td></td> + <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + <tr> + <td><code>image</code></td> + <td>Knop om grafisch element te verzenden.</td> + <td>{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}</td> + <td>{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + <tr> + <td><code>reset</code></td> + <td>Een knop die de inhoud van het formulier terugzet naar de defaultwaarden.</td> + <td></td> + <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + <tr> + <td><code>submit</code></td> + <td>Knop die het formulier verzendt.</td> + <td></td> + <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> + </tr> + </tbody> +</table> + +<p>Als om een of andere reden de waarde van het <code>type</code> attribuut niet ondersteund wordt door de browser wordt het {{HTMLElement("input")}} element weergegeven alsof het <em>text</em> is. Dit verzekert dat het formulier blijft werken, zij het niet zo netjes.</p> + +<p>Ondanks dat het {{HTMLElement("input")}} element krachtig is, kan het niet alles doen. Daarvoor zijn er een aantal andere elementen.</p> + +<h3 id="Het_<textarea>_element">Het <textarea> element</h3> + +<p>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:</p> + +<table> + <caption>Attributen voor het {{HTMLElement("textarea")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("cols","textarea")}}</td> + <td><code>20</code></td> + <td>De zichtbare tekstbreedte in gemiddelde karakterbreedten.</td> + </tr> + <tr> + <td>{{htmlattrxref("rows","textarea")}}</td> + <td></td> + <td>Het aantal zichtbare regels in het tekstveld.</td> + </tr> + <tr> + <td>{{htmlattrxref("wrap","textarea")}}</td> + <td><code>soft</code></td> + <td>Geeft aan hoe het veld de tekst afbreekt. Mogelijke waarden zijn: <code>hard</code> of <code>soft</code></td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<p>Dit heeft twee consequenties:</p> + +<ul> + <li>Om een defaultwaarde voor een {{HTMLElement("input")}} element te <span class="highlighted">definiëren moet het </span><code>value</code> attribuut gebruikt worden maar bij een {{HTMLElement("textarea")}} element moet de defaulttekst tussen de begin- en eindtag van het {{HTMLElement("textarea")}} element geplaatst worden.</li> + <li>Het {{HTMLElement("textarea")}} element accepteert alleen tekst. Dit betekent dat elke HTML inhoud in een {{HTMLElement("textarea")}} element als platte tekst wordt beschouwd..</li> +</ul> + +<p>In het volgende voorbeeld worden beide {{HTMLElement("textarea")}} elementen op dezelfde manier getoond:</p> + +<pre class="brush:html;"><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></pre> + +<h3 id="De_<select>_<option>_en_<optgroup>_elementen">De <select>, <option>, en <optgroup> elementen</h3> + +<p>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: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">De basis widges voor formulieren</a>.</p> + +<p>Elke waarde in het keuzevak wordt gedefinieerd met een {{HTMLElement("option")}} element en deze elementen kunnen gegroepeerd worden binnen {{HTMLElement("optgroup")}} elementen.</p> + +<p>Bijvoorbeeld:</p> + +<pre class="brush:html;"><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></pre> + +<p>Als een {{HTMLElement("option")}} element een <code>value</code> 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.</p> + +<p>Bij het {{HTMLElement("optgroup")}} element wordt het <code>label</code> attribuut getoond voor de waarden. Dit ziet er uit als een keuzemogelijkheid maar dit label kan niet geselecteerd worden.</p> + +<table> + <caption>Attributen van het {{HTMLElement("option")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("label","option")}}</td> + <td></td> + <td>Dit is de tekst van de optie. Het is deze tekst die getoond wordt als het <code>label</code> attribuut niet gedefinieerd is.</td> + </tr> + <tr> + <td>{{htmlattrxref("selected","option")}}</td> + <td>(<em>false</em>)</td> + <td>Geeft aan dat de optie geselecteerd is.</td> + </tr> + </tbody> +</table> + +<table> + <caption>Attributen van het {{HTMLElement("optgroup")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuut naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("label","optgroup")}}</td> + <td></td> + <td>De naam van de groep van opties. <strong>Dit attribuut is verplicht.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="Het_<datalist>_element">Het <datalist> element</h3> + +<p>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.</p> + +<p>Om een widget aan een {{HTMLElement("datalist")}} element te binden wordt het <code>list</code> attribuut van de widget gebruikt. Deze vermeldt het <code>id</code> attribuut van het {{HTMLElement("datalist")}} element dat gebruikt moet worden.</p> + +<p>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:</p> + +<pre class="brush:html;"><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></pre> + +<p>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.</p> + +<table> + <tbody> + <tr> + <th scope="row">Safari 6</th> + <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> + </tr> + <tr> + <th scope="row">Firefox 18</th> + <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> + </tr> + </tbody> +</table> + +<h3 id="De_<meter>_en_<progress>_elementen">De <meter> en <progress> elementen</h3> + +<p>Deze twee elementen geven een grafische voorstelling van een numerische waarde. Het verschil tussen beide is louter semantisch:</p> + +<ul> + <li>Het {{HTMLElement("meter")}} element geeft een statische waarde weer tussen een minimum en een maximumwaarde.</li> + <li>Het {{HTMLElement("progress")}} element geeft een waarde weer die verandert met de tijd tussen een minimum en een maximum waarde. De verandering van de waarde (en daardoor ook de wijziging van de voortuitgangsindicator) moet door middel van JavaScript gebeuren omdat het element geen enkel mechanisme heeft om dat zelf te doen.</li> +</ul> + +<p>Hierdoor hebben deze elementen een specifieke set attributen:</p> + +<table> + <caption>Attributen van het {{HTMLElement("meter")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("min","meter")}}</td> + <td>0</td> + <td>De ondergrens van de numerieke waarde van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("max","meter")}}</td> + <td>1</td> + <td>De bovengrens van de numerieke waarde van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("low","meter")}}</td> + <td>the <code>min</code> value</td> + <td>De hoogste numerieke waarde van de ondergrens van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("high","meter")}}</td> + <td>the <code>max</code> value</td> + <td>De laagste numerieke waarde van de bovengrens van het gemeten interval.</td> + </tr> + <tr> + <td>{{htmlattrxref("optimum","meter")}}</td> + <td></td> + <td>De optimale numerieke waarde.</td> + </tr> + </tbody> +</table> + +<table> + <caption>Attributen van het {{HTMLElement("progress")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("max","progress")}}</td> + <td></td> + <td>Dit attribuut geeft aan hoeveel werk er nog moet gedaan worden door de taak aangeduid door het {{HTMLElement("progress")}} element.</td> + </tr> + </tbody> +</table> + +<h3 id="Het_<button>_element">Het <button> element</h3> + +<p>Een {{HTMLElement("button")}} element toont een knop. Een knop kan drie functies hebben afhankelijk van het <code>type</code> attribuut:</p> + +<ul> + <li>Een verzendknop stuurt de formuliergegevens naar de webpagina die gedefinieerd wordt door het <code>action</code> attribuut van het {{HTMLElement("form")}} element.</li> + <li>Een herstelknop stelt alle formulierwidgets onmiddellijk in op hun defaultwaarden. Dit wordt tegenwoordig als een minder goede werkwijze beschouwd omdat de gebruiker gemakkelijk zijn werk kan verliezen.</li> + <li>Een blanko knop doet niets uit zichzelf en de gebruiker moet door middel van JavaScript er een fuctie aan geven.</li> +</ul> + +<table> + <caption>Attributen van het {{HTMLElement("button")}} element</caption> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{htmlattrxref("type","button")}}</td> + <td><code>submit</code></td> + <td>Het type knop. Mogelijke waarden zijn: <code>button</code>, <code>reset</code>, or <code>submit.</code></td> + </tr> + <tr> + <td>{{htmlattrxref("formaction","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>action</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formenctype","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>enctype</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formmethod","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>method</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formnovalidate","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>novalidate</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + <tr> + <td>{{htmlattrxref("formtarget","button")}}</td> + <td></td> + <td>Bij de verzendknop zal dit attribuut de waarde van het <code>target</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<div class="note"><strong>Nota:</strong> 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 <code>name</code> en een <code>value</code> attribuut in een {{HTMLElement("button")}} element in IE6 en IE7 werd niet de inhoud van het <code>value</code> 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.</div> + +<h3 id="Basis_attributen">Basis attributen</h3> + +<p>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:</p> + +<table> + <thead> + <tr> + <th scope="col">Attribuute naam</th> + <th scope="col">Defaultwaarde</th> + <th scope="col">Beschrijving</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>autofocus</code></td> + <td>(<em>false</em>)</td> + <td>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.</td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>(<em>false</em>)</td> + <td>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 <code>disabled</code> attribuut ingesteld dan is het element actief.</td> + </tr> + <tr> + <td><code>form</code></td> + <td></td> + <td>Het formulierelement waar de widget mee geassocieerd is. De waarde van het attribuut moet het <code>id</code> 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.</td> + </tr> + <tr> + <td><code>name</code></td> + <td></td> + <td>De naam van het element. Deze wordt mee verzonden met de gegevens.</td> + </tr> + <tr> + <td><code>value</code></td> + <td></td> + <td>De <span class="ng-binding">initiële</span> waarde van het element.</td> + </tr> + </tbody> +</table> + +<h2 id="Het_gebruik_van_ARIA_om_HTML_formulieren_te_maken">Het gebruik van <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> om HTML formulieren te maken</h2> + +<p><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C Candidate Recommendation</a> en voegt meer mogelijkheden toe aan HTML om betere internettoepassingen te maken, inclusief formulieren. In "<a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe aangepaste formulierwidgets maken</a>" wordt dieper in gegaan op het maken van formulieren maar hier zijn alvast enkele basisinstructies.</p> + +<p>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.</p> + +<p>De documentatie over ARIA is hier te vinden: <a href="/en-US/docs/Accessibility/ARIA/forms" title="/en-US/docs/Accessibility/ARIA/forms">lees hier de documentaie over ARIA</a>.</p> + +<h3 id="Het_aria-labelledby_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> attribuut</h3> + +<p>Dit attribuut laat toe een label aan te maken zonder het {{HTMLElement("label")}} element. Het <code>aria-labelledby</code> attribuut wordt geplaatst bij de widget en refereert naar het <code>id</code> attribuut van het element dat als label moet gebruikt worden.</p> + +<pre class="brush:html;"><form> + <p id="fruitLabel">What's your favorite fruit</p> + <p> + <input type="text" name="fruit" aria-labelledby="fruitLabel"> + </p> +</form></pre> + +<p>Eigenlijk is het het tegenovergetelde van het <code>for</code> attribuut van het {{HTMLElement("label")}} element. Bij het <code>for</code> attribuut wordt naar de <code>id</code> van de widget gerefereerd maar bij het <code>aria-labelledby</code> attribuut wordt gerefereerd naar de <code>id</code> van het label.</p> + +<h3 id="Het_aria-describedby_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a> attribuut</h3> + +<p>Is eigenlijk gelijk aan het <code>aria-labelledby</code> 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 <code>aria-describedby</code> attribuut wordt niet aangeraden voor formulieren. Hier wordt beter het <code>aria-labelledby</code> attribuut gebruikt tenzij men bredere informatie over het formulier wil geven. Echter wordt het juist aanbevolen om <code>aria-describedby</code> wel te gebruiken om invoervelden te omschrijven (naast het <code>label</code> element). Zoals hoelang een wachtwoord moet zijn (zie voorbeeld).</p> + +<pre class="brush: html"><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></pre> + +<h3 id="Het_aria-label_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute"><code>aria-label</code></a> attribuut</h3> + +<p>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. </p> + +<pre class="brush:html;"><form> + <p> + <input type="search" name="q" aria-label="Search" /> + <input type="submit" value="Go" /> + </p> +</form></pre> + +<h3 id="Het_role_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribuut</h3> + +<p>Dit is het voornaamste ARIA attribuut. Het geeft specifieke semantische informatie aan ondersteunende technologieën voor een bepaald HTML element. Er zijn veel <code>role</code> attributen beschikbaar, sommige speciaal voor formulieren.</p> + +<p>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.</p> + +<p>De <code>role </code>attributen voor formulieren zijn:</p> + +<ul> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li>Radio</li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> +</ul> + +<p>Er zijn ook samengestelde <code>role</code> attributen:</p> + +<ul> + <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a></li> + <li>Radiogroup</li> +</ul> + +<p>En <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques">er zijn er nog meer</a>. ARIA is een zeer grote verzameling. Er kennis van nemen laat toe mooie formulieren te maken, veel beter dan met HTML.</p> + +<h2 id="Conclusie">Conclusie</h2> + +<p>Met deze kennis kunnen volledige HTML formulieren gemaakt worden. Volgend artikel gaat in detail over het maken van formulieren: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">De basis formulier elementen</a>.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">Ter zijde: Zinvolle formulieren: Een controlelijst voor het maken van formulieren</a></li> +</ul> diff --git a/files/nl/learn/forms/index.html b/files/nl/learn/forms/index.html new file mode 100644 index 0000000000..886250cfb7 --- /dev/null +++ b/files/nl/learn/forms/index.html @@ -0,0 +1,359 @@ +--- +title: HTML forms guide +slug: Learn/Forms +tags: + - Featured + - Forms + - Guide + - HTML + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +original_slug: Learn/HTML/Forms +--- +<p><span class="seoSummary">This guide is a series of articles that will help you master HTML forms.</span> 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!</p> + +<h2 id="Articles">Articles</h2> + +<ol> + <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">My first HTML form</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>How to structure an HTML form</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>The native form widgets</span></a></li> + <li>CSS with HTML forms + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Styling HTML forms</span></a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending <s>and retrieving</s> form data</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to <span>build custom form widgets</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using the FormData object</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> +</ol> + +<h2 id="HTML_Documentation">HTML Documentation</h2> + +<h3 id="HTML_Elements">HTML Elements</h3> + +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col">Related DOM interface</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: courier new;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other form elements.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;">The <span style="font-family: courier new;">fieldset</span> is used to group several form elements within a form.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enables a user to submit information to a web server.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> +</div> + +<h3 id="HTML_Attributes">HTML Attributes</h3> + +<table class="standard-table"> + <thead> + <tr> + <th>Attribute Name</th> + <th>Elements</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>List of types the server accepts, typically a file type.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>List of supported charsets.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>The URI of a program that processes the information submitted via the form.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>The element should be automatically focused after the page loaded.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>A challenge string that is submitted along with the public key.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indicates whether the element should be checked on page load.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of columns in a textarea.</td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form data when the <code>method</code> is POST.</td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belong to this one.</td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indicates the maximum value allowed.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the maximum number of characters allowed in the element.</td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indicates the minimum value allowed.</td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Name of the element. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Provides a hint to the user of what can be entered in the field.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the element can be edited or not.</td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether this element is required to fill out or not.</td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Defines the number of rows in a textarea.</td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("img") }}</td> + <td>The URL of the embeddable content.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defines the type of the element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defines a default value which will be displayed in the element on page load.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped or not.</td> + </tr> + </tbody> +</table> + +<h3 id="Normative_reference">Normative reference</h3> + +<ul> + <li><a href="https://www.w3.org/TR/html51/sec-forms.html#sec-forms" lang="en" rel="external" title="https://www.w3.org/TR/html51/sec-forms.html#sec-forms">W3C HTML 5.1 Specification (Forms)</a></li> + <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> +</ul> 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 new file mode 100644 index 0000000000..2b3f8d8db2 --- /dev/null +++ b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,1968 @@ +--- +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 +--- +<p>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.</p> + +<h2 id="Hoe_de_tabellen_lezen">Hoe de tabellen lezen</h2> + +<h3 id="Waarden">Waarden</h3> + +<p>Voor elke eigenschap zijn er vier mogelijke waarden:</p> + +<dl> + <dt>JA</dt> + <dd>De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.</dd> + <dt>GEDEELTELIJK</dt> + <dd>Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.</dd> + <dt>NEEN</dt> + <dd>De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.</dd> + <dt>N.V.T.</dt> + <dd>De eigenschap heeft geen enkele betekenis voor dit type of element.</dd> +</dl> + +<h3 id="Weergave">Weergave</h3> + +<p>Elke eigenschap wordt op twee manieren weergegeven:</p> + +<dl> + <dt>N (Normaal)</dt> + <dd>Betekent dat de eigenschap gewoon toegepast kan worden.</dd> + <dt>A (Aangepast)</dt> + <dd>Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:</dd> +</dl> + +<pre class="brush: css">* { +/* 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; +}</pre> + +<h2 id="Compatibiliteitstabellen">Compatibiliteitstabellen</h2> + +<h3 id="Globaal_gedrag">Globaal gedrag</h3> + +<p>Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:</p> + +<dl> + <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> + <dd>Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.</dd> + <dt>{{cssxref("line-height")}}</dt> + <dd>Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.</dd> + <dt>{{cssxref("text-decoration")}}</dt> + <dd>Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.</dd> + <dt>{{cssxref("text-overflow")}}</dt> + <dd>Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Opera ondersteunt {{cssxref("text-shadow")}} niet voor formulierelementen en IE9 ondersteunt het helemaal niet.</dd> +</dl> + +<h3 id="Tekstvelden">Tekstvelden</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li> Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> + <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>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")}}.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie de nota over {{cssxref("line-height")}}</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td>Zie nota betreffende Opera</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none </code> aangewend worden. Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none</code> aangewend worden . Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Knoppen">Knoppen</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie nota over {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Number">Number</h3> + +<p>Bij browsers die het <code>number </code>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.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie nota over {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td colspan="1" rowspan="3"> + <p>Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.</p> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Text and font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakken_(éénregelig)">Keuzevakken (éénregelig)</h3> + +<p>Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[2]</sup></td> + <td> + <ol> + <li>De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.</li> + <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>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.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>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.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Keuzevakken_(meerregelig)">Keuzevakken (meerregelig)</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td>Zie de nota betreffende {{cssxref("line-height")}}.</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>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.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Alleen ondersteund door Firefox en IE9+.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> + <td> + <ol> + <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datalist">Datalist</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;"> + <p>Neen</p> + </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Bestandslijst">Bestandslijst</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Veel browsers passen deze eigenschap toe op de selectieknop.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Reageert min of meer als een extra linker marge buiten het element.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Border and background</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datumselectie">Datumselectie</h3> + +<p>Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.<br> + </p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Kleurenselectie">Kleurenselectie</h3> + +<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> + +<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome verbergt de {{HTMLElement("progress")}} en {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Bereik">Bereik</h3> + +<p>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.</p> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> + <ol> + <li>{{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Border and background</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Afbeeldingsknoppen">Afbeeldingsknoppen</h3> + +<table> + <thead> + <tr> + <th scope="col">Eigenschap</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">A</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS box model</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Tekst en font</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td style="text-align: center; vertical-align: top;">N.V.T.</td> + <td> </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> + <td colspan="1"> </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 ondersteunt deze eigenschap niet.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p> </p> 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 new file mode 100644 index 0000000000..2ba87686f9 --- /dev/null +++ b/files/nl/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,340 @@ +--- +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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voorafgaande kennis:</th> + <td>Basis computergebruik, <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">inleiding tot HTML</a> en basiskennis <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> en <a href="/en-US/docs/Learn/Server-side/First_steps">programmering aan de kant van de server</a>.</td> + </tr> + <tr> + <th scope="row">Doel:</th> + <td>Begrijpen wat er gebeurt wanneer formuliergegevens verzonden worden met inbegrip van hoe de gegevens verwerkt worden door de server.</td> + </tr> + </tbody> +</table> + +<h2 id="Waar_gaan_de_gegevens_naar_toe">Waar gaan de gegevens naar toe?</h2> + +<p>Hier wordt besproken wat er gebeurt met de gegevens wanneer een formulier wordt verzonden.</p> + +<h3 id="Clientserver_architectuur">Client/server architectuur</h3> + +<p>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 <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>, enz.) gebruik makend van het <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a>. De server beantwoordt het verzoek met hetzelfde protocol.</p> + +<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: Zie <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Eerste stappen in programmering van websites aan de kant van de server</a> om een beter idee te krijgen van hoe de client-server architectuur werkt.</p> +</div> + +<h3 id="Aan_de_zijde_van_de_client_bepalen_hoe_de_gegevens_te_verzenden">Aan de zijde van de client: bepalen hoe de gegevens te verzenden</h3> + +<p>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")}}.</p> + +<h4 id="Het_htmlattrxrefactionform_attribuut">Het {{htmlattrxref("action","form")}} attribuut</h4> + +<p>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.</p> + +<p>In volgend voorbeeld worden de gegevens verzonden naar een absolute URL — <code>http://foo.com</code>:</p> + +<pre class="brush: html"><form action="http://foo.com"></pre> + +<p class="brush: html">Hier wordt gebruik gemaakt van een relatieve URL — de gegevens worden verzonden naar een andere URL op de server:</p> + +<pre class="brush: html"><form action="/somewhere_else"></pre> + +<p class="brush: html">Als er geen attributen gespecifieerd worden, worden de {{HTMLElement("form")}}gegevens verstuurd naar de pagina waarop het formulier staat:</p> + +<pre class="brush: html"><form></pre> + +<p class="brush: html">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.</p> + +<pre class="brush: html"><form action="#"></pre> + +<div class="note"> +<p><strong>Nota:</strong> het is mogelijk om een URL te <span class="highlighted">specifiëren die gebruik maakt van het HTTPS </span> (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.</p> +</div> + +<h4 id="Het_htmlattrxrefmethodform_attribuut">Het {{htmlattrxref("method","form")}} attribuut</h4> + +<p>Dit attribuut bepaalt hoe de gegevens worden verzonden. Het <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> voorziet diverse methoden om een verzoek op te stellen. De twee meest gebruikte methoden zijn de GET en de POST methoden.</p> + +<p>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.</p> + +<h5 id="De_GET_methode">De GET methode</h5> + +<p>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.</p> + +<p>Bekijken we het volgende formulier::</p> + +<pre class="brush: html"><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></pre> + +<p>Als gevolg van de GET methode ziet men bij het verzenden de URL <code>www.foo.com/?say=Hi&to=Mom</code> verschijnen in de adresbalk.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">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:</p> + +<ul> + <li><code>say</code>, dat de waarde <code>Hi</code> heeft</li> + <li><code>to</code>, dat de waarde <code>Mom </code>heeft</li> +</ul> + +<p>Het HTTP-verzoek ziet er zo uit:</p> + +<pre>GET /?say=Hi&to=Mom HTTP/1.1 +Host: foo.com</pre> + +<div class="note"> +<p><strong>Nota</strong>: Dit voorbeeld is ook te vinden op GitHub — zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">see it live also</a>).</p> +</div> + +<h5 id="De_POST_methode">De POST methode</h5> + +<p>De <code>POST</code> 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.</p> + +<p>Nemen we een voorbeeld — dit is hetzelfde formulier als in de GET sectie hierboven, maar met het {{htmlattrxref("method","form")}} attribuut ingesteld op <code>post</code>.</p> + +<pre class="brush: html"><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></pre> + +<p>Als het formulier wordt verzonden met de <code>POST</code> methode worden er geen gegevens gekoppeld aan de URL en het HTTP verzoek ziet er als volgt uit, met de gegevens in het bericht:</p> + +<pre>POST / HTTP/1.1 +Host: foo.com +Content-Type: application/x-www-form-urlencoded +Content-Length: 13 + +say=Hi&to=Mom</pre> + +<p><code>Content-Length</code> geeft de omvang van de inhoud aan en <code>Content-Type</code> geeft het type aan van de gegevensbron die naar de server wordt verzonden. Hier wordt later verder op ingegaan.</p> + +<div class="note"> +<p><strong>Nota</strong>: Dit voorbeeld kan ook gevonden worden op GitHub — zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">see it live also</a>).</p> +</div> + +<h4 id="HTTP-verzoeken_bekijken">HTTP-verzoeken bekijken</h4> + +<p>HTTP-verzoeken worden nooit getoond aan de gebruiker (om ze te zien moeten instrumenten gebruikt worden als <a href="/en-US/docs/Tools/Network_Monitor">Firefox Network Monitor</a> of <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). Bijvoorbeeld in de Chrome network tab:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>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:</p> + +<ol> + <li>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.</li> + <li>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.</li> +</ol> + +<h3 id="Aan_de_kant_van_de_server_ontvangst_van_de_gegevens">Aan de kant van de server: ontvangst van de gegevens</h3> + +<p>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.</p> + +<h4 id="Voorbeeld_Raw_PHP">Voorbeeld: Raw PHP</h4> + +<p><a href="http://php.net/">PHP</a> 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.</p> + +<pre class="brush: php"><?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; +?></pre> + +<p>Dit voorbeeld toont een pagina met de gegevens die we verzonden hebben. Dit wordt getoond in ons <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> voorbeeldbestand. Dit bevat hetzelfde voorbeeld als hierboven met een <code>post</code> methode en als <code>action</code> : <code>php-example.php</code>. Bij verzending worden de formuliergegevens verzonden naar <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, waar de PHP code staat uit bovenstaand voorbeeld. Bij uitvoering toont de browser: <code>Hi Mom</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: 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 <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac en Windows) en <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> +</div> + +<h4 id="Voorbeeld_Python">Voorbeeld: Python</h4> + +<p>Volgend voorbeeld toont het gebruik van Python om hetzelfde te doen: tonen van verzonden gegevens op een webpagina. Dit maakt gebruik van het <a href="http://flask.pocoo.org/">Flask framework</a> om sjablonen te tonen, versturen van formuliergegevens, enz. (zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> + +<pre>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()</pre> + +<p>De twee sjablonen waarnaar gerefereerd wordt in de code zijn de volgende:</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: hetzelfde formulier als hierboven in de {{anch("The POST method")}} sectie maar met als <code>action</code> : <code>\{{ url_for('hello') }}</code>. (Dit is een <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> sjabloon dat in HTML is maar dat de Pythoncode kan aanroepen die loopt op de webserver die aangegeven wordt in de accolades. <code>url_for('hello')</code> wil in principe zeggen "stuur door naar <code>/hello</code> wanneer het formulier verzonden wordt".)</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: deze sjabloon bevat een regel die twee datavelden weergeeft die doorgegeven werden toen het bericht binnenkwam. Dit wordt gedaan via de <code>hello()</code> functie hierboven die loopt wanneer naar de <code>/hello</code> URL genavigeerd wordt.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: 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 <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP</a> <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">geïnstalleerd </a>worden, dan Flask d.m.v. <code>pip3 install flask</code>. Daarna moet het mogelijk zijn het voorbeeld te laten lopen door middel van <code>python3 python-example.py</code> en dan naar <code>localhost:5000</code> te gaan in de browser.</p> +</div> + +<h4 id="Andere_talen_en_omgevingen">Andere talen en omgevingen</h4> + +<p>Er zijn vele andere technologieën aan de serverkant voor behandeling van formulieren met inbegrip van <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>, 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:</p> + +<ul> + <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> voor PHP</li> + <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external" title="https://www.djangoproject.com/">Django</a> voor Python (iets zwaarder dan <a href="http://flask.pocoo.org/">Flask</a>, maar met meer gereedschap en opties)</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> voor Node.js</li> + <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> voor Ruby</li> + <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> voor Java</li> + <li>enzoverder.</li> +</ul> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h2 id="Speciaal_verzenden_van_bestanden">Speciaal: verzenden van bestanden</h2> + +<p>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.</p> + +<h3 id="Het_htmlattrxrefenctypeform_attribuut">Het {{htmlattrxref("enctype","form")}} attribuut</h3> + +<p>Dit attribuut laat toe de waarde van <code>Content-Type</code> 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 <code>application/x-www-form-urlencoded</code>. In mensentaal betekent dit: "Dit zijn formuliergegevens die gecodeerd zijn in URL parameters."</p> + +<p>Om bestanden te versturen moeten er drie stappen ondernomen worden:</p> + +<ul> + <li>Zet het {{htmlattrxref("method","form")}} attribuut op <code>POST</code> omdat bestandsinhoud niet in URL parameters kan geplaatst worden</li> + <li>Zet de waarde van {{htmlattrxref("enctype","form")}} op <code>multipart/form-data</code> omdat de gegevens in meerder delen zal gesplitst worden, één voor elk bestand, plus nog een deel voor de tekstgegevens die vervat zijn in het formulier (als er tekst in het formulier aanwezig is).</li> + <li>Sluit één of meerdere bestandselecties (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">File picker</a>) in om de gebruiker toe te laten de bestanden te kiezen die hij wil uploaden.</li> +</ul> + +<p>Bijvoorbeeld:</p> + +<pre class="brush: html"><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></pre> + +<div class="note"> +<p><strong>Nota:</strong> 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 <code><input></code> 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.</p> +</div> + +<div class="warning"> +<p><strong>Waarschuwing:</strong> 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.</p> +</div> + +<h2 id="Veiligheidsoverwegingen">Veiligheidsoverwegingen</h2> + +<p>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.</p> + +<p>Al naar gelang de toepassing zijn er wel bekende veiligheids problemen die men kan tegenkomen:</p> + +<h3 id="XSS_en_CSRF">XSS en CSRF</h3> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">politiek van dezelfde bron</a>. Het effect van deze aanvallen kan gaan van vervelend tot een ernstig veiligheidsrisico.</p> + +<p>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).</p> + +<p>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.</p> + +<p>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 <span style="line-height: 1.5;">{{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.</span></p> + +<h3 id="SQL_injectie">SQL injectie</h3> + +<p>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). </p> + +<p>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 <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> op een PHP/MySQL systeem).</p> + +<h3 id="HTTP_header_injectie_en_email_injectie">HTTP header injectie en email injectie</h3> + +<p>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.</p> + +<p>Deze aanvallen gebeuren meestal in stilte en wijzigen servers in een <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p> + +<h3 id="Wees_wantrouwig_vertrouw_uw_gebruikers_nooit">Wees wantrouwig: vertrouw uw gebruikers nooit</h3> + +<p>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.</p> + +<p>Alle gegevens die de server bereiken moeten gecontroleerd worden. Altijd. Geen enkele uitzondering:</p> + +<ul> + <li>Potentieel gevaarlijke karakters moeten geweerd worden. Welke karakters dat zijn is afhankelijk van de context waarin de aangewend worden en het platform dat gebruikt wordt. Alle talen gebruikt aan de serverkant hebben deze funktie in zich.</li> + <li>Begrens de hoeveelheid inkomende gegevens tot het meest noodzakelijke.</li> + <li>Sla geüploade bestanden op in de zanbak (sla ze op op een andere server en maak ze alleen toegankelijk door een ander subdomein, of beter nog, door een volledig andere domeinnaam).</li> +</ul> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: Het artikel over <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website beveiliging</a> van de <a href="/en-US/docs/Learn/Server-side">serverkant</a> gaat dieper in op bovenstaande bedreigingen en <span class="ng-binding"><span class="highlighted">potentiële</span></span> oplossingen.</p> +</div> + +<h2 id="Besluit">Besluit</h2> + +<p>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 <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">validatie aan de zijde van de client</a> mogelijk is maar de server kan deze validatie niet vertrouwen omdat hij niet weet wat er zich afspeelt aan de zijde van de client.</p> + +<h2 id="Zie_ook">Zie ook</h2> + +<p>Volgende bronnen gaan dieper in op de beveiliging van websites:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/First_steps">Eerste stappen in programmering van websites aan de kant van de server</a></li> + <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li> + <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> diff --git a/files/nl/learn/forms/styling_web_forms/index.html b/files/nl/learn/forms/styling_web_forms/index.html new file mode 100644 index 0000000000..ec56d4ffb6 --- /dev/null +++ b/files/nl/learn/forms/styling_web_forms/index.html @@ -0,0 +1,345 @@ +--- +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 +--- +<p>In dit artikel leert de gebruiker het om <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>-formulieren vorm te geven met gebruik van <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>. 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.</p> + +<h2 id="Waarom_is_vormgeving_van_formulieren_met_CSS_zo_ingewikkeld">Waarom is vormgeving van formulieren met CSS zo ingewikkeld?</h2> + +<p>In de begindagen van het Web, rond 1995, werden widgets toegevoegd aan de HTML in <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">de HTML 2 specificatie</a>. Door de complexheid van widgets vertrouwden de ontwikkelaars op het onderliggende besturingssysteem.</p> + +<p>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. </p> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/">HTML formulieren</a> vorm te geven.</p> + +<h3 id="Niet_alle_widgets_worden_door_CSS_gelijk_behandeld">Niet alle widgets worden door CSS gelijk behandeld</h3> + +<p>Er zijn nog steeds problemen met CSS-formulieren. Deze kunnen ingedeeld worden in drie categorieën</p> + +<h4 id="The_good">"The good"</h4> + +<p>Enkele elementen leveren geen problemen op. Het zijn de volgende structurele elementen:</p> + +<ol> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("output")}}</li> +</ol> + +<p>Ook de tekstvelden (zowel enkellijnige als meerlijnige) vallen hieronder en de knoppen.</p> + +<h4 id="The_bad">"The bad"</h4> + +<p>Sommige elementen vereisen ingewikkelde trucs waarbij soms gespecialiseerde kennis van CSS3 nodig is.</p> + +<p>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 <a href="/en-US/docs/">Geavanceerde stijlen voor HTML-formulieren.</a></p> + +<h4 id="The_ugly">"The ugly"</h4> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/">Hoe eigen formulier-elementen aanmaken.</a></p> + +<h2 id="Basisprincipe">Basisprincipe</h2> + +<p><a href="/en-US/docs/">Elementen die gemakkelijk aan te passen zijn </a>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.</p> + +<h3 id="Zoekvelden">Zoekvelden</h3> + +<p>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 <code>-webkit-appearance</code> eigenschap. Deze eigenschap wordt besproken in het artikel: <a href="/en-US/docs/">Geavanceerde styling voor HTML-formulieren.</a></p> + +<h4 id="Voorbeeld">Voorbeeld</h4> + +<pre class="brush: html"><form> + <input type="search"> +</form> +</pre> + +<pre class="brush: css">input[type=search] { + border: 1px dotted #999; + border-radius: 0; + + -webkit-appearance: none; +}</pre> + +<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> + +<p>Zoals te zien is op de schermafdruk van Chrome hebben beide velden een rand. Maar de bovenste is gemaakt zonder de <code>-webkit-appearance</code> eigenschap en de onderste met de <code>-webkit-appearance: none</code>. Het verschil is duidelijk.</p> + +<h3 id="Lettertypen_en_tekst">Lettertypen en tekst</h3> + +<p>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:</p> + +<pre class="brush: css">button, input, select, textarea { + font-family : inherit; + font-size : 100%; +}</pre> + +<p>De schermafdruk hieronder toont het verschil. Links staat de systeemeigen weergave in Firefox en Mac OS X. Rechts de weregave met bovenstaande aanpassingen.</p> + +<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> + +<p>Er wordt veel gediscussieerd over wat het beste uitzicht is. Het is aan u als ontwerper van uw website om te kiezen.</p> + +<h3 id="Kadermodel">Kadermodel</h3> + +<p>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.</p> + +<p><strong>Dit komt doordat elk element zijn eigen regels heeft wat betreft rand, uitvulling en marge. </strong>Dus om elk element dezelfde grootte te geven moet de {{cssxref("box-sizing")}} eigenschap gebruikt worden:</p> + +<pre class="brush: css">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; +}</pre> + +<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> + +<p>In de schermafdruk hierboven wordt links de weergave getoond zonder {{cssxref("box-sizing")}}, terwijl rechts deze eigenschap is toegepast met de waarde <code>border-box</code>. Zie hoe ze allemaal dezelfde ruimte innemen ondanks de systeemeigen instellingen.</p> + +<h3 id="Positionering">Positionering</h3> + +<p>Positionering van HTML formulierelementen is over het algemeen geen probleem. Twee elementen echter vragen echter speciale aandacht:</p> + +<h4 id="legend">legend</h4> + +<p>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.</p> + +<p>Om reden van toegankelijkheid is het {{HTMLElement("legend")}} element zeer belangrijk. Het wordt besproken bij ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ë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:</span></p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><fieldset> + <legend>Hi!</legend> + <h1>Hello</h1> +</fieldset></pre> + +<h5 id="CSS">CSS</h5> + +<pre class="brush: css">legend { + width: 1px; + height: 1px; + overflow: hidden; +}</pre> + +<h4 id="textarea">textarea</h4> + +<p>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:</p> + +<pre class="brush: css">textarea { + vertical-align: top; +}</pre> + +<h2 id="Voorbeeld_2">Voorbeeld</h2> + +<p>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:</p> + +<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p> + +<h3 id="HTML_2">HTML</h3> + +<p>De HTML-code verschilt weinig van het voorbeeld uit <a href="/en-US/docs/">het eerste artikelvan deze gids</a>. Er zijn slechts een aantal ID's en een titel toegevoegd.</p> + +<pre class="brush: html"><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></pre> + +<h3 id="CSS_2">CSS</h3> + +<p>Nu begint het leuke. Voor het coderen moeten drie elementen worden toegevoegd:</p> + +<ol> + <li>De <a href="/en-US/docs/">achtergrond </a>van de postkaart</li> + <li>Een schrijfmachine lettertype: <a href="/en-US/docs/">De "Secret Typewriter" van fontsquirrel.com</a></li> + <li>Een handschrift lettertype: <a href="/en-US/docs/">Het "Jounal" van frontsquirrel.com</a></li> +</ol> + +<p>Nu de code. Eerst bereiden we een achtergrond voor met de {{cssxref("@font-face")}} regels en alle basiselementen {{HTMLElement("body")}} en {{HTMLElement("form")}}.</p> + +<pre class="brush: css">@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); +}</pre> + +<p>Dan worden de elementen en de titel geplaatst.</p> + +<pre class="brush: css">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; +}</pre> + +<p>Nu de elementen zelf. Eerst het lettertype van het {{HTMLElement("label")}} element:</p> + +<pre class="brush: css">label { + font : .8em "typewriter", sans-serif; +}</pre> + +<p>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:</p> + +<pre class="brush: css">input, textarea { + font : .9em/1.5em "handwriting", sans-serif; + + border : none; + padding : 0 10px; + margin : 0; + width : 240px; + + background: none; +}</pre> + +<p>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.</p> + +<pre class="brush: css">input:focus, textarea:focus { + background : rgba(0,0,0,.1); + border-radius: 5px; + outline : none; +}</pre> + +<p>De éénregelige en meerregelige tekstvelden moeten nog in overeenstemming gebracht worden, want standaard zien ze er verschillend uit.</p> + +<p>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:</p> + +<pre class="brush: css">input { + height: 2.5em; /* for IE */ + vertical-align: middle; /* This is optional but it makes legacy IEs look better */ +}</pre> + +<p>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 <code>resize</code> eigenschap toe. De {{cssxref("overflow")}} eigenschap wordt gebruikt om het veld consistent te maken over alle browsers. Sommige browsers gebruiken standaard <code>auto</code>, terwijl andere <code>scroll</code> gebruiken. In dit geval is het beter <code>auto</code> te gebruiken.</p> + +<pre class="brush: css">textarea { + display : block; + + padding : 10px; + margin : 10px 0 0 -10px; + width : 340px; + height : 360px; + + resize : none; + overflow: auto; +}</pre> + +<p>Het {{HTMLElement("button")}} element is gemakkelijk in CSS. Men kan zowat alles ermee doen, inclusief <a href="/en-US/docs/">pseudo-elementen!</a></p> + +<pre class="brush: css">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; +}</pre> + +<p>Dat is alles. Klaar om uit te proberen!</p> + +<h2 id="Besluit">Besluit</h2> + +<p>Uit bovenstaande blijkt dat bij het opstellen van formulieren met tekstvelden en knoppen, het vrij gemakkelijk is CSS te gebruiken. Zie het artikel <a href="/en-US/docs/">normalizeer.css project </a>voor meer CSS-trucs in verband met het werken met formulierwidgets.</p> + +<p><a href="/en-US/docs/">In het volgend artikel </a>wordt ingegaan op formulierelementen die vallen in de categorieën "bad" en "ugly".</p> diff --git a/files/nl/learn/forms/your_first_form/index.html b/files/nl/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..0d9705f88e --- /dev/null +++ b/files/nl/learn/forms/your_first_form/index.html @@ -0,0 +1,274 @@ +--- +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 +--- +<p>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 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML">the basics of HTML</a> en <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS</a>.</p> + +<h2 id="Voordat_we_beginnen">Voordat we beginnen</h2> + +<h3 id="Wat_is_een_HTML_formulier">Wat is een HTML formulier?</h3> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Wat_is_er_nodig_om_met_formulieren_te_werken">Wat is er nodig om met formulieren te werken?</h3> + +<p>Een editor (<a href="/en-US/docs/">Sublime</a> of <a href="/en-US/docs/">Atom</a> zijn goede voorbeelden) en een webbrowser. Natuurlijk zijn er volwaardige IDE's zoals <a href="/en-US/docs/Mozilla/Tech/XUL/Using_Visual_Studio_as_your_XUL_IDE">Visual Studio</a>, <a href="/en-US/docs/Mozilla/Developer_guide/Eclipse">Eclipse</a>, <a href="http://www.aptana.com/" rel="external" title="http://www.aptana.com/">Aptana</a> en andere.</p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p> + +<h2 id="Ontwerp_van_het_formulier">Ontwerp van het formulier</h2> + +<p>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:</p> + +<ul> + <li>Smashing Magazine : <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/">an extensive guide web to form usability.</a></li> + <li>UXmatters betreffende<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> voor complexe formulieren, zoals <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php"> </a> <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li> +</ul> + +<p>In dit artikel bouwen we een eenvoudig contactformulier. We beginnen met een ruwe schets.</p> + +<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> + +<p>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.</p> + +<h2 id="Maak_uw_handen_vuil_aan_HTML">Maak uw handen vuil aan HTML</h2> + +<p>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")}}.</p> + +<h3 id="Het_HTMLelement(form)_element">Het {{HTMLelement("form")}} element</h3> + +<p>Alle HTML formulieren beginnen met een {{HTMLelement("form")}} element als volgt:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + +</form></pre> + +<p>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 <code>action</code> attribuut en het <code>methode</code> attribuut te gebruiken.</p> + +<ul> + <li>Het <code>action</code> attribuut bepaalt de locatie (URL) waar de gegevens van het formulier naar toe gezonden worden.</li> + <li>Het <code>methode</code> attribuut bepaalt met welke HTTP methode de gegevens worden verzonden (dit kan zijn "get" of "post").</li> +</ul> + +<p>Zie het artikel <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a> voor getaileerde informatie over hoe attributen werken.</p> + +<h3 id="Widgets_toevoegen_met_de_HTMLelement(label)_HTMLelement(input)_en_HTMLelement(textarea)_elementen">Widgets toevoegen met de {{HTMLelement("label")}}, {{HTMLelement("input")}} en {{HTMLelement("textarea")}} elementen</h3> + +<p>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.</p> + +<p>In HTML taal ziet de code er aldus uit:</p> + +<pre class="brush:html;"><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></pre> + +<p>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 <em>for </em>attribuut<em> </em>in alle {{HTMLelement("label")}} elementen. Dit is een formele manier om een label aan een formulier te linken. Dit attribuut verwijst naar de<em> id </em>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: <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>.</p> + +<p>Voor het {{HTMLelement("input")}} element is het belangrijkste attribuut het <code>type</code> attribuut. Dit attribuut bepaalt hoe het {{HTMLelement("input")}} element zich gedraagt. Dit verdient de nodig aandacht omdat de gevolgen ingrijpend kunnen zijn. Het artikel <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a> geeft meer details hierover. In het voorbeeld wordt de waarde <code>text </code>gebruikt omdat dit de defaultwaarde is voor dit attribuut. Zo accepteert het tekstveld elke tekst zonder verdere controle of validatie. Met de waarde <code>email</code> 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 <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Form data validation</a>.</p> + +<p>Tenslotte iets over de syntax <code><input /></code> vs. <code><textarea></textarea></code>. Dit is een van de eigenaardigheden van HTML. Het element <code><input></code> is een element dat zichzelf afsluit. Dit wil zeggen dat, indien de gebruiker het element formeel wil sluiten, hijzelf "<em>/</em>" 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 <code>value</code> attribuut als volgt gebruikt worden:</p> + +<pre class="brush:html;"><input type="text" value="by default this element is filled with this text" /></pre> + +<p>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:</p> + +<pre class="brush:html;"><textarea>by default this element is filled with this text</textarea></pre> + +<h3 id="En_tenslotte_om_te_eindigen_een_HTMLelement(button)">En tenslotte om te eindigen een {{HTMLelement("button")}}</h3> + +<p>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:</p> + +<pre class="brush:html;"><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></pre> + +<p>Er zijn drie types van knoppen: <code>submit</code>, <code>reset</code>, en <code>button</code>.</p> + +<ul> + <li><code>submit</code> zendt de gegevens naar de webpagina die bepaalt wordt door het <code>action</code> attribuut van het {{HTMLelement("form")}} element.</li> + <li>De <code>reset</code> knop resets alle widges naar hun defaultwaarden. Vanuit het het UX standpuntwordt dit niet aangeraden.</li> + <li>Klikken op een <code>button</code> knop doet in eerste instantie niets maar dat is verbazend nuttig omdat met JavaScript de gebruiker deze toets elke funktie kan geven.</li> +</ul> + +<p>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.</p> + +<h2 id="De_zaken_mooier_maken_met_CSS">De zaken mooier maken met CSS</h2> + +<p>Nu het HTML formuler klaar is kan het bekeken worden in een browser. Maar het ziet er niet erg netjes uit.</p> + +<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> + +<p>Met een CSS stylesheet kan het wat netter gemaakt worden.</p> + +<p>Om te beginnen het formulier zelf. Het kan gecentreerd worden en er kan een boord rond getrokken worden:</p> + +<pre class="brush:css;">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; +}</pre> + +<p>Dan kan er wat ruimte ingevoegd worden tussen de widgets:</p> + +<pre class="brush:css;">form div + div { + margin-top: 1em; +}</pre> + +<p>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.</p> + +<pre class="brush:css;">label { + /* To make sure that all labels have the same size and are properly aligned */ + display: inline-block; + width: 90px; + text-align: right; +}</pre> + +<p>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 <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a>.</p> + +<p>Hier worden enkele klassieke zaken gestyled: fonts, grootte en randen:</p> + +<pre class="brush:css;">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; +}</pre> + +<p>HTML formulieren ondersteunen een aantal pseudoklassen om de toestand van elk element te beschrijven. Bijvoorbeeld het <span class="ng-binding text">highlighten van een aktieve widget geeft aan waar de gebruiker zich bevindt in het formulier.</span></p> + +<pre class="brush:css;">input:focus, textarea:focus { + /* To give a little highlight on active elements */ + border-color: #000; +}</pre> + +<p>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 <code>vertical-align</code> eigenschap van het {{HTMLElement("textarea")}} gewijzigd worden naar <code>top</code>.</p> + +<p>Let ook op de <code>resize</code> eigenschap die toelaat de grootte van het {{HTMLelement("textarea")}} element aan te passen.</p> + +<pre class="brush:css;">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; +}</pre> + +<p>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.</p> + +<pre class="brush:css;">.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; +}</pre> + +<p>Nu ziet hetformulier er veel mooier uit.</p> + +<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> + +<h2 id="Verzenden_van_de_gegevens_naar_de_server">Verzenden van de gegevens naar de server</h2> + +<p>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.</p> + +<p>Het {{HTMLelement("form")}} element bepaalt waar en hoe de gegevens moeten verstuurd worden door de <code>action</code> en de <code>method</code> attributen.</p> + +<p>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.</p> + +<p>Dus om de gegevens een naam te geven wordt een <code>name</code> attribuut gebruikt bij elke widget die een specifiek stuk data produceert:</p> + +<pre class="brush:html;"><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></pre> + +<p>In ons formulier worden 3 stuks data verzonden genaamd "<code>user_name</code>", "<code>user_email</code>" en "<code>user_message</code>". Deze gegevens worden verstuurd naar de URL "<code>/my-handling-form-page</code>" met de HTTP POST methode.</p> + +<p>Op de server zal de script op de URL "<code>/my-handling-form-page</code>" 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 <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a>.</p> + +<h2 id="Tenslotte">Tenslotte</h2> + +<p>Proficiat. Ons eerste HTML formulier is klaar. Hier is een live voorbeeld.</p> + +<table style="height: 267px; width: 772px;"> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live voorbeeld</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}</td> + </tr> + <tr> + </tr> + </tbody> +</table> + +<p>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 <a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">the other articles of this guide.</a></p> |