diff options
Diffstat (limited to 'files/nl/learn/forms/advanced_form_styling/index.html')
| -rw-r--r-- | files/nl/learn/forms/advanced_form_styling/index.html | 437 |
1 files changed, 437 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> |