Styling HTML forms

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

In dit artikel leert de gebruiker het gebruik van CSS om HTML-formulieren een fraaier uitzicht te geven. Dit is echter niet  zo eenvoudig. Om historische en technische redenen gaan widgets en CSS niet zo goed samen. Daarom maakten vele ontwikkelaars hun eigen HTML widgets om het uitzicht en het aanvoelen van hun browsers in de hand te houden. Thans hebben webontwikkelaars meer en meer controle over het ontwerp van formulierelementen.

Vormgeving van widgets in formulieren

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

Omdat stijl niet meer weg te denken was bij het opstellen van formulieren werd enkele jaren later CSS ontwikkeld. 

Omdat gebruikers gewoon werden aan mooi opgestelde formulieren zorgden de verkopers van browsers ervoor dat de stijl van de widgets kon aangepast worden en tot op vandaag is het nog altijd moeilijk om dit waar  te maken.

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

Niet alle widgets worden op dezelfde manier aangemaakt in CSS

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

"The good"

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

  1. <form>
  2. <fieldset>
  3. <label>
  4. <output>

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

"The bad"

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

Zoals bijvoorbeeld het <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 placeholder element kan niet rechtstreeks aangepast worden  maar de browsers die het ondersteunen hebben hun eigen CSS pseudo-elementen of pseudoklassen die toelaten het aan te passen. Deze worden behandeld in het artikel Geavanceerde stijlen voor HTML-formulieren.

"The ugly"

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

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

Basisprincipe

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

Zoekvelden

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

Voorbeeld

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

  -webkit-appearance: none;
}

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

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

Lettertypen en tekst

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

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

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

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

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

Kadermodel

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

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

input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box;
}

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

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

Positionering

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

legend

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

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

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

textarea

Alle browsers beschouwen standaard het <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 display eigenschap gebruikt worden en door de vertkale uitlijning aan te passen:

textarea {
  vertical-align: top;
}

Voorbeeld

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

This is what we want to achieve with HTML and CSS

HTML

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

<form>
  <h1>to: Mozilla</h1>

  <div id="from">
    <label for="name">from:</label>
    <input type="text" id="name" name="user_name">
  </div>

  <div id="reply">
    <label for="mail">reply:</label>
    <input type="email" id="mail" name="user_email">
  </div>

  <div id="message">
    <label for="msg">Your message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
 
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

CSS

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

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

Nu de code. Eerst bereiden we een achtergrond voor met de  @font-face regels en alle basiselementen  <body> en <form>.

@font-face{
  font-family : "handwriting";

  src : url('journal.eot');
  src : url('journal.eot?') format('eot'),
        url('journal.woff') format('woff'),
        url('journal.ttf') format('truetype');
}

@font-face{
  font-family : "typewriter";

  src : url('veteran_typewriter.eot');
  src : url('veteran_typewriter.eot?') format('eot'),
        url('veteran_typewriter.woff') format('woff'),
        url('veteran_typewriter.ttf') format('truetype');
}

body {
  font  : 21px sans-serif;

  padding : 2em;
  margin  : 0;

  background : #222;
}

form {
  position: relative;

  width  : 740px;
  height : 498px;
  margin : 0 auto;

  background: #FFF url(background.jpg);
}

Dan worden de elementen en de titel geplaatst.

h1 {
  position : absolute;
  left : 415px;
  top  : 185px;
 
  font : 1em "typewriter", sans-serif;
}

#from {
  position: absolute;
  left : 398px;
  top  : 235px;
}

#reply {
  position: absolute;
  left : 390px;
  top  : 285px;
}

#message {
  position: absolute;
  left : 20px;
  top  : 70px;
}

Nu de elementen zelf. Eerst het lettertype van het <label> element:

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

De tekstvelden moeten enkele gezamenlijke regels krijgen. Hiertoe worden de eigenschappen borders en backgrounds verwijderd en padding en margin worden aangepast:

input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;

  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;

  background: none;
}

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

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

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

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

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

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

textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 340px;
  height  : 360px;

  resize  : none;
  overflow: auto;
}

Het <button> element is gemakkelijk in CSS. Men kan zowat alles ermee doen, inclusief pseudo-elementen!

button {
  position     : absolute;
  left         : 440px;
  top          : 360px;

  padding      : 5px;

  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;

  cursor       : pointer;

-webkit-transform: rotate(-1.5deg);
   -moz-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
     -o-transform: rotate(-1.5deg);
        transform: rotate(-1.5deg);
}

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}

Dat is alles. Klaar om uit te proberen!

Besluit

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

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

 

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: coenegrachts
 Laatst bijgewerkt door: coenegrachts,