Structureren van een formulier zonder tabel.

Bron: http://www.sceneone.nl/tips_tricks/formulieren.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Het maken van een html formulier is echt zo'n moment dat we eens lekker uit ons dak gaan met een tabel. Handig!
Da's waar. Een formulier structureren met een tabel is handig en het werkt prima. En voor grote gecompliceerde formulieren zou ik ook gewoon tabellen blijven gebruiken.

Maar ik zou ik niet zijn als ik niet ook een goed (ja, zelfs beter) alternatief aan zou bieden, so here we go: een formulier zonder gebruik te maken van een tabel, maar met gebruikmaking van:

Fieldset, legend en label

Hele mooie html elementen. En daar houden wij van, van mooie html elementen. Vooral omdat we die later ook weer via onze css kunnen aanspreken en vormgeven. En dat vinden we leuk.
Met een fieldset groepeer je een aantal bij elkaar horende formuliervelden.
Via de legend geef je aan die groep formuliervelden een omschrijving
Via een label geef je een formulierveld een omschrijving.

Rock 'n roll

CSS: GEEN HTML: <form name="personalia" action="" method="post">

<fieldset>

<legend>persoonlijke gegevens</legend>

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />

<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" />

<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" />

<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select>

<input type="submit" name="submit" value="cook!"/>

<input type="reset" name="reset" value="wissen"/>

</fieldset>

</form>

bekijk het resultaat

Je ziet dat het nog een beetje een rommeltje is, maar dat komt wel goed als we dadelijk css gaan toevoegen.
Als je met Internet Explorer werkt (dan doe je nog steeds iets fout, maar dat terzijde) dan heb je gezien dat de tekst 'persoonlijke gegevens' blauw is. Dat heb ik niet gedaan. Dat doet IE. Waarom weet niemand.

Eerst nog even dit

Het is niet mijn bedoeling om hier de technische functionaliteiten van een formulier uit te gaan leggen. Het gaat mij puur om de html en css. Dus geen php of javascript in deze tutorial.

Oke, dan gaan we de verschillende elementen eens uit elkaar trekken en onder de loep nemen.
Eerst de form tag zelf:

<form name="personalia" action="" method="post">
hier komen de inputvelden en buttons
</form>

Je ziet dat de form tag niet self-closing is, maar een sluit-tag heeft: </form>
Verder zie je dat een form tag minimaal 3 attributen heeft: name, action en method. Alle drie deze attributen zijn nodig om het formulier in technische zin te doen werken. Ik ga ze dus hier niet verder bespreken.

Dan de fieldset en de legend tags:

<fieldset>
<legend>persoonlijke gegevens</legend>
hier komen de inputvelden en buttons
</fieldset>

De fieldset is niet meer dan een openings - en en sluit tag. Bij het resultaat van het bovenstaande voorbeeld heb je kunnen zien dat om het formulier een kader heen zit. Dit kader is het resultaat van de fieldset.
Als je dus een fieldset gebruikt krijg je automatisch zo'n kader om je formulier.
Het kader wordt onderbroken op de plaats waar 'persoonlijke gegevens' staat. Dat is de manier waarop de fieldset en legend met elkaar samenwerken.

Als laatste de label tag met een bijhorend inputveld:

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />

Je ziet dat de label tag verwijst naar 'voornaam' via het for attribuut. Die verwijzing slaat op de id van het inputveld. Het inputveld kent verder nog de attributen name en type.
Het attribuut name is net als bij de form tag aanwezig om technische redenen en dat zal ik dan ook verder niet bespreken.
Van het attribuut type kennen we de volgende meest voorkomende waarden:

En nu opmaken die handel

Zoals je in voorgaande hoofdstukken hebt kunnen lezen kunnen we aan html elementen css stijlen koppelen met zogenaamde element selectors om op die manier die html elementen op te maken.
Dus dat gaan we doen. We beginnen eenvoudig, als we het label element een display: block geven weten we (als we het gedeelte over block elementen in het hoofdstuk over de flow van een pagina gelezen hebben) dat het label element geen andere elementen meer op dezelfde regel zal dulden:

CSS: label{
display: block;
}
HTML: <form name="personalia" action="" method="post">

<fieldset>

<legend>persoonlijke gegevens</legend>

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />

<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" />

<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" />

<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select>

<input type="submit" name="submit" value="cook!"/>

<input type="reset" name="reset" value="wissen"/>

</fieldset>

</form>

bekijk het resultaat

Zo, dat ruimt lekker op.
Nu gaan we de boel een beetje opmaken:

CSS: label{
display: block;
}

fieldset{
width: 250px;
padding: 5px 0 10px 10px;
border: 1px solid #000;
font-family: verdana;
}

legend{
background-color: #000;
color: #FFF;
font-weight: bold;
padding: 4px 6px 4px 6px;
text-transform: uppercase;
margin: 0 0 5px 0;
font-size: 0.8em;
}

input{
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: #DDD;
width: 200px;
}
HTML: <form name="personalia" action="" method="post">

<fieldset>

<legend>persoonlijke gegevens</legend>

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />

<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" />

<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" />

<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select>

<input type="submit" name="submit" value="cook!"/>

<input type="reset" name="reset" value="wissen"/>

</fieldset>

</form>

bekijk het resultaat

Oke, dat gaat lekker. Maar ik wil nog wat met die knoppen. Dat kan zo niet.
Als ik die knoppen een andere opmaak wil geven dan de andere input elementen zal ik ze een class moeten geven.
zo gezegd, zo gedaan:

CSS: label{
display: block;
}

fieldset{
width: 250px;
padding: 5px 0 10px 10px;
border: 1px solid #000;
font-family: verdana;
}

legend{
background-color: #000;
color: #FFF;
font-weight: bold;
padding: 4px 6px 4px 6px;
text-transform: uppercase;
margin: 0 0 5px 0;
font-size: 0.8em;
}

input{
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: #DDD;
width: 200px;
}

.button{
background-color: #000;
color: #FFF;
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
}
HTML: <form name="personalia" action="" method="post">

<fieldset>

<legend>persoonlijke gegevens</legend>

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />

<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" />

<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" />

<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select>

<input class="button" type="submit" name="submit" value="cook!"/>

<input class="button" type="reset" name="reset" value="wissen"/>

</fieldset>

</form>

bekijk het resultaat

Je ziet dat de knoppen nu ineens naast het dropdown menu staan............
Als iets dergelijks je voor een eerste keer overkomt kun je jezelf er helemaal suf over piekeren hoe dat nou kan. Ik wel in ieder geval. Het is ook een beetje een vuiligheidje.
We hadden van de label elementen block-elementen gemaakt. Daardoor staat ieder label element op zijn eigen regel en dwingt het iedere keer de inputvelden naar een eigen regel.
Maar boven de knoppen staat geen label, dus die worden niet naar een volgende regel gedwongen.
Maar in het vorige voorbeeld stonden ze nog wel op hun eigen regel hoor ik je denken. Da's waar, maar dat kwam door de breedte van de fieldset. We hebben de fieldset 250px breed gemaakt.
Toen die knoppen nog niet hun eigen class hadden waren ze net als de andere input elementen 200px breed. Toen waren ze dus gewoonweg te breed om nog naast dat dropdown menu te passen.
Nu passen ze wel en daarom staan ze er nu naast.

En daar gaan wij nu dus wat aan doen:

CSS: label{
display: block;
}

fieldset{
width: 250px;
padding: 5px 0 10px 10px;
border: 1px solid #000;
font-family: verdana;
}

legend{
background-color: #000;
color: #FFF;
font-weight: bold;
padding: 4px 6px 4px 6px;
text-transform: uppercase;
margin: 0 0 5px 0;
font-size: 0.8em;
}

input{
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: #DDD;
width: 200px;
}

.button{
background-color: #000;
color: #FFF;
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
}

select{
margin: 2px 0 15px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: #DDD;
display: block;
}
HTML: <form name="personalia" action="" method="post">

<fieldset>

<legend>persoonlijke gegevens</legend>

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" />

<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" />

<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" />

<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select>

<input class="button" type="submit" name="submit" value="cook!"/>

<input class="button" type="reset" name="reset" value="wissen"/>

</fieldset>

</form>

bekijk het resultaat

he he........

Nou, dat is een hele lap geworden, maar het staat er.
Je ziet dat je op een mooie strakke manier een formulier kunt structureren zonder tabel. En dat je de boel met behulp van css mooi op kunt maken zonder allerlei gelazer in je html te zetten.

Hieronder geef ik nog een voorbeeld.
Ik geloof niet dat ik daar nog veel over uit hoef te leggen. Behalve misschien het volgende.
Ik maak gebruik van een achtergrond afbeelding en daar kun je hier meer over lezen als je het niet begrijpt. Verder maak ik gebruik van de eigenschap float. Daar kun je hier meer over lezen. En ik maak gebruik van een css hack. Daar heb ik het in deze turuorials nog niet over gehad, maar dat komt vast nog wel. Dus dat moet je maar even voor kennisgeving aannnemen........of even googlen natuurlijk.

CSS: fieldset{
background: url(../_img/form_bg.gif) no-repeat 0 0;
width: 340px;
padding: 5px 0 10px 10px;
border: 0;
font-family: verdana;
}

legend{
color: #999;
font-weight: bold;
padding: 4px 6px 4px 0;
margin: 0 0 5px 0;
font-size: 0.8em;
}

label{
width: 100px;
float: left;
padding: 2px 0 0 0;
}

input{
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: transparent;
width: 200px;
}

select{
margin: 2px 0 15px 0;
padding: 1px 0 2px 3px;
border: 1px solid #000;
background-color: transparent;
}

.button{
background-color: transparent;
color: #000;
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
float: right;
}

/* begin hack \*/
* html .button{
padding: 0;
}

* html legend{
margin-left: -5px;
}
/* einde hack */
HTML: <form name="personalia" action="" method="post">

<fieldset>

<legend>persoonlijke gegevens</legend>

<label for="voornaam">voornaam:</label>
<input type="text" name="voornaam" id="voornaam" /><br />

<label for="achternaam">achternaam:</label>
<input type="text" name="achternaam" id="achternaam" /><br />

<label for="woonplaats">woonplaats:</label>
<input type="text" name="woonplaats" id="woonplaats" /><br />

<label for="aanhef">aanhef:</label>
<select name="aanhef" id="aanhef">
<option>Dhr.</option>
<option>Mevr.</option>
</select><br />

<input class="button" type="submit" name="submit" value="cook!" />

<input class="button" type="reset" name="reset" value="wissen" />

</fieldset>

</form>

bekijk het resultaat

naar het begin van de pagina