Cursus HTML - deel 10: fieldsets en labels

Trefwoorden: HTML, website, cursus, fieldset, label, formulier

1. Inleiding


Dit is één van de laatste delen van de cursus HTML. In dit deel gaan we fieldsets en labels van naderbij bekijken. Beide zijn een uitbreiding voor formulieren.
Met fieldsets kan je sommige formuliervelden samennemen in een kader. Je kan dan ook een titeltje plaatsen in het kader, zo kan je voor de gebruiker heel veel duidelijk maken.
Zo kan een fieldset eruit zien:

http://www.multidesk.be/bijlage/e71e835b2f928f7c3c479d0226e5aca4.jpg


Een label is onzichtbaar voor de gebruiker maar is een zeer handige functie voor een goed gebruik van formulieren. Als je bij de vorige delen het één en ander aan het uittesten was bij formulieren heb je waarschijnlijk al gemerkt dat het soms moeilijk is om iets te activeren. Bij een keuzerondje of selectievakje kan het soms moeilijk zijn om juist erop te mikken met je muis. Daarvoor bestaan er labels.
Met labels kan je tekst verbinden met een formulierveld, als er dan op de tekst geklikt is, wordt het bijhorende formulierveld automatisch geactiveerd. Klikken op de keuze zelf i.p.v. precies op het rondje zal al voldoende zijn :).

2. Een fieldset


2.1. De basis

Een fieldset wordt opgebouwd met de fieldset-tag en wordt op de normale manier afgesloten. Het is gebruikelijk om enkel hetgeen dat in de fieldset hoort binnen de fieldset te zetten (een tabel, formuliervelden, ...). Het is dus best om bijvoorbeeld de form-tag buiten de fieldset te houden.

Een voorbeeld van een fieldset met form-tag en enkele formuliervelden in een tabel vindt je hier:
CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2. <fieldset>
  3.  
  4. <table>
  5.         <tr>
  6.                 <td>Voornaam & Naam:</td>
  7.                 <td><input type="text" name="naam" size="15" /></td>
  8.         </tr>
  9.         <tr>
  10.                 <td>emailadres:</td>
  11.                 <td><input type="text" name="email" size="15" /></td>
  12.         </tr>
  13. </table>
  14.  
  15. </fieldset>
  16. </form>


2.2. Attributen bij een fieldset

Voor de fieldset-tag zijn er geen attributen beschikbaar. Een opmaak kan wel gegeven worden, maar enkel via CSS.

3. Een legend


3.1. De basis

Een legend is het titeltje die in het kader staat van een fieldset. Een legend maak je aan met de legend-tag die op de gewone manier afgesloten wordt. De legend-tag bevindt zich altijd binnen de fieldset en is eigenlijk verplicht als je gebruik maakt van een fieldset.

Bij wijze van voorbeeld vind je hieronder de code voor deze afbeelding, daarin wordt een formulier opgemaakt met een fieldset en legend. Om de formuliervelden mooi te positioneren wordt een tabel gebruikt.

http://www.multidesk.be/bijlage/e71e835b2f928f7c3c479d0226e5aca4.jpg

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2. <fieldset>
  3. <legend>Persoonlijk informatie</legend>
  4.  
  5. <table>
  6.         <tr>
  7.                 <td>Voornaam & Naam:</td>
  8.                 <td><input type="text" name="naam" size="15" /></td>
  9.         </tr>
  10.         <tr>
  11.                 <td>emailadres:</td>
  12.                 <td><input type="text" name="email" size="15" /></td>
  13.         </tr>
  14. </table>
  15.  
  16. </fieldset>
  17. </form>


3.2. Attributen bij een legend

Er zijn ook geen attributen bij een legend. Voor opmaak kan je zorgen via CSS. Maar je kan de tekst ook gewoon tussen HTML-tags plaatsen om opmaak te geven (denk aan strong voor vette tekst, u voor onderlijning, ...).

4. een label


4.1. De basis

Een label wordt aangemaakt met de label-tag en wordt op de normale manier afgesloten. Het label bevindt zich rond de tekst die bij een formulierveld hoort. Als je dan op dat label klikt wordt het bijhorende formulierveld geactiveerd.

Ons voorbeeld vind je hieronder, herwerkt met de label-tags erin.

Opgelet!: Als je onderstaande code uitprobeert in de browser zal je zien dat het nog niet zal werken. Daarvoor heeft het label een (verplicht) attribuut nodig.
CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2. <fieldset>
  3. <legend>Persoonlijk informatie</legend>
  4.  
  5. <table>
  6.         <tr>
  7.                 <td><label>Voornaam & Naam</label>:</td>
  8.                 <td><input type="text" name="naam" size="15" /></td>
  9.         </tr>
  10.         <tr>
  11.                 <td><label>emailadres</label>:</td>
  12.                 <td><input type="text" name="email" size="15" /></td>
  13.         </tr>
  14. </table>
  15.  
  16. </fieldset>
  17. </form>


4.2. Attributen bij een label

4.2.1. For

Het for-attribuut is verplicht bij een label. Hiermee verbind je een label met een formulierveld. Dit houdt in dat we het formulierveld ook zullen moeten aanpassen. De input-tag krijgt er dus nog het attribuut id bij. Om een label en een veld te verbinden geven we respectievelijk het for- en id-attribuut dezelfde waarde. Zo weet de browser dat ze tesamen horen.

CODE
  1. <form name="formulier" method="post" action="../pagina.php">
  2. <fieldset>
  3. <legend>Persoonlijk informatie</legend>
  4.  
  5. <table>
  6.         <tr>
  7.                 <td><label for="naam">Voornaam & Naam</label>:</td>
  8.                 <td><input type="text" name="naam" id="naam" size="15" /></td>
  9.         </tr>
  10.         <tr>
  11.                 <td><label for="mail">emailadres</label>:</td>
  12.                 <td><input type="text" name="email" id="mail" size="15" /></td>
  13.         </tr>
  14. </table>
  15.  
  16. </fieldset>
  17. </form>

Als je bovestaande code uittest zal je zien dat de velden wel geactiveerd worden als je op de tekst klikt.

5. Slot


Fieldsets en labels vormen een handige en nuttige uitbreiding op formulieren. Het wordt door velen aangeraden om ze te gebruiken (vooral dan labels). Zeker bij grote en ingewikkelde formulieren kan het voor de gebruiker veel duidelijkheid brengen.

Als je nog vragen hebt mag je ze (zoals altijd :)) stellen in de forums.

Klik hier om deel 11 cursusoverzicht, taglijst en oefeningen te lezen.Dit artikel werd geschreven door Simon op donderdag 12 juli 2007 om 15:25 en werd sindsdien 10773 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.