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