Items groeperen


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.

VoorbeeldVoorbeeld:
<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.

VoorbeeldVoorbeeld:
<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.

VoorbeeldVoorbeeld:
<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".

VoorbeeldVoorbeeld:
<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.

VoorbeeldVoorbeeld:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="forms/fieldset/style.css">
</head>
 <body>
 <form action="forms/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>