HTML Items groeperen
Je kunt de layout van een formulier bepalen en overzichtelijker maken door gebruik te maken van de elementen en attributen die hieronder worden beschreven, zo kun je je items binnen een formulier groeperen.
Fieldset element
Het
fieldset element dient om een kader te tonen rond gegroepeerde elementen. Het
fieldset element is een nuttig hulpmiddel voor het organiseren en groeperen van gerelateerde items binnen een formulier.
Voorbeeld:
<fieldset>
<p>Naam: <input type="text"></p>
<p>Email: <input type="text"></p>
</fieldset>
Legend element
Wanneer het
fieldset element wordt gecombineerd met het
legend element kun je een titel opgeven, dat in het kader geplaatst wordt.
Voorbeeld:
<fieldset>
<legend><b>Geef je gegevens op:</b></legend>
<p>Naam: <input type="text"></p>
<p>Email: <input type="text"></p>
</fieldset>
Label element
Het
label element wordt gebruikt om een label aan een element toe te kennen om er meer informatie over te kunnen geven. Indien je op het
label klikt, dan wordt het item specifiek geactiveerd. Je kunt gebruikers meer informatie over een element op een formulier geven. Bijvoorbeeld als een gebruiker de gegevens op een bepaalde manier moet invoeren dan kun je deze informatie met
label doorgeven.
Voorbeeld:
<fieldset>
<legend><b>Geef je gegevens op:</b></legend>
<p><label>Naam: <input name="naam"></label></p>
<p><label>Email: <input name="email"></label></p>
</fieldset>
For attribuut
Het
for attribuut koppelt het
label expliciet aan een formulierelement met behulp van het
id van dat element. Als dit attribuut ontbreekt, wordt het
label gekoppeld aan de tekst die het bevat. De waarde van het attribuut
"for" moet gelijk zijn aan de waarde van het attribuut
"id".
Voorbeeld:
<fieldset>
<legend><b>Geef je gegevens op:</b></legend>
<p><label for="nm">Naam: </label><input id="nm" name="naam"></p>
<p><label for="em">Email: </label><input id="em" name="email"></p>
</fieldset>
Voorbeeld formulier
Hieronder volgt een voorbeeld van een formulier met de op deze pagina besproken elementen en attributen waar een PHP script wordt gebruikt om de informatie uit het formulier te verwerken.
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="forms/fieldset/style.css">
</head>
<body>
<form action="fieldset/check.php" method="post">
<fieldset>
<legend><b>Geef je gegevens op:</b></legend>
<p><label for="n">Naam: </label><input id="n" name="naam" size="30"></p>
<p><label for="a">Adres: </label><input id="a" name="adres" size="30"></p>
</fieldset>
<p>
<fieldset>
<legend><b>Volgende cursus zou ik graag willen volgen:</b></legend>
<input type="radio" name="taal" value="HTML" checked>HTML<br>
<input type="radio" name="taal" value="CSS">CSS<br>
<input type="radio" name="taal" value="PHP">PHP<br>
<input type="radio" name="taal" value="SQL">SQL<br>
</fieldset>
<p>
<fieldset>
<legend><b>Inschrijven voor nieuwsbrief:</b></legend>
<input type="radio" name="nbrief" value="Ja" checked>Ja
<input type="radio" name="nbrief" value="Nee">Nee</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Verzenden">
</form>
</body>
</html>
