Spring naar inhoud

 

U bent hier : Home ›› Nieuwsberichten ›› Het label element in forms

gepost op 4 december 2009Het label element in forms

Het label element in forms

Als we formulieren opmaken in html moeten we naast een aantrekkelijke opmaak ook rekening houden met de gebruiksvriendelijkheid.

Het label element en het tabindex attribuut voor de verschillende invoer elementen zoals select, input en textarea maken het voor de gebruiker veel aangenamer om het formulier te doorlopen.

Correct gebruik van het label element

Labels in formulieren geven de beschrijving aan een invoer veld. Een klein voorbeeldje :

Voorbeeld:

Code:

   1:  <label for="locatie">Locatie : </label>
   2:  <input type="text" name="locatie" id="locatie" />

Als we nu op de tekst 'Email' klikken gaan we automatisch focussen op het bijhorende input-veld.

Tabindexen gebruiken op invoer elementen

Veel mensen navigeren door html formulieren door middel van de tab toets. Als we op de tab toets drukken gaan we automatisch naar het volgende invoerveld.

In de meeste formulieren zal er automatisch neerwaarts in de code doorlopen worden, maar meestal zit er ook een logische volgorde in de invoervelden. Een postcode komt logischerwijs ook voor een gemeente en niet voor een emailadres.

Om de volgorde van de invoervelden te bepalen maken we gebruik van de tabindex.

Voorbeeld :




Code:

   1:  <label for="name">Name : </label>
   2:  <input type="text" tabindex="1" name="name" id="name" />
   3:   
   4:  <label for="email">Email : </label>
   5:  <input type="text" tabindex="2" name="email" id="email" />

Ik moet wel vertellen dat het tabindex attribuut niet altijd noodzakelijk is. Als we ons formulier zo opmaken dat er verschillende velden naast elkaar staan kunnen we een volgorde instellen.

Voorbeeld :




Code:

   1:  <table>
   2:      <tr>
   3:          <td>
   4:              <label for="pass1">Wachtwoord: </label>
   5:              <input type="password" name="pass1" id="pass1"
   6:                     tabindex="1"/>
   7:          </td>
   8:          <td>
   9:              <label for="tel">Telefoonnummer: </label>
  10:              <input type="text" name="tel" id="tel"
  11:                     tabindex="3" />
  12:          </td>
  13:      </tr>
  14:      <tr>
  15:          <td>
  16:              <label for="pass2">Wachtwoord herhalen: </label>
  17:              <input type="password" name="pass2" id="pass2"
  18:                     tabindex="2" />
  19:          </td>
  20:          <td>
  21:              <input type="submit" name="submit" 
  22:                     id="submit" value="submit" tabindex="4" />
  23:          </td>
  24:      </tr>
  25:  </table>

Als we de tabtoets gebruiken in bovenstaand voorbeeld merken we dat de focus van het eerste wachtwoord naar het tweede wachtwoord springt, ookal staat het veld 'telefoon' in de code achter het eerste wachtwoord veld.

 

Reacties

Er zijn nog geen reacties.


Plaats een reactie

ok   Uw reactie is toegevoegd! Nog een reactie toevoegen.

ok ok
ok ok
http:// ok ok
ok ok

Wat is koud: ijs of vuur?