home | sitemap

Formulieren

Formulieren die onderdeel van een standaard module zijn (en/of gemaakt via de formulierenmodule) hebben altijd dezelfde opbouw voor wat betreft de invoervelden, namelijk:

...
<label for="myinput">Mijn invoerveld</label><input type="text" name="myinput" id="myinput" /><br>
...

(Waarbij INPUT natuurlijk ook radio of checkbox kan zijn of een SELECT of TEXTAREA.)

En de (minimale) css:

label, input, textarea, select {
  display: block; /* zodat we ze een vaste breedte kunnen geven en padding/margin */
  float: left;    /* zodat alle elementen netjes naast elkaar gaan staan */
}
label {
  width: 100px; /* label heeft een vaste breedte */
  vertical-align: top; 
}
input, textarea, select {
  width: 250px; /* alle invoer ook */
}
.radio, .checkbox {
  width: auto; /* radio en checkboxen hebben geen harde breedte nodig */
}
form br {
  clear: left; /* zorgt er voor dat een volgend LABEL netjes op een nieuwe regel begint */
}

Bovenstaande css zorgt er voor dat een LABEL en bijbehorende INPUT/SELECT/TEXTAREA altijd naast elkaar gaan staan, of, als de ruimte te smal is, onder elkaar, en dat zonder gebruik te maken van een tabel! Dat er geen tabel wordt gebruikt biedt meer mogelijkheden in opmaak en is flexibeler voor de layout, zoals het automatisch onder elkaar gaan staan van de labels en velden (wat er nog steeds overzichtelijk uit ziet.)