Dependència de camps en formularis

Publicat el 16/12/2007

El problema

Quan es planteja un formulari X/HTML amb una jerarquia entre ells poden apareixer diversos problemes:

Marcatge més idòni que deixi clara la jerarquia
Textos (LABEL) relacionats amb dos camps alhora

Un dels casos més típics és el d'un grup de radiobutton on cada un d'ells té associat un camp de text.

Possibles solucions

Primera aproximació (fallida)

Es podria considrar és quelcom del tipus:


<label for="dni">
   <input type="radio" name="identificador" id="dni" value="dni" />
   <label for="numero-dni">
      DNI: <input type="text" name="numero-dni" id="numero-dni" />
      </label>
</label>

Aquesta estructura intenta resoldre la relació posant un LABEL dins de l'altre i alhora plantejar la parella LABEL/INPUT filla com a text del LABEL pare.

Aquest planteig és erroni ja que l'especificació HTML no permet usar un LABEL dins d'un altre:


<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

Segona aproximació

Donat que els agrupadors preferibles per formularis són els FIELDSET i que aquests poden titular-se mitjançant LEGEND es pot considerar el següent:


<fieldset>
   <legend>
      <label for="dni">
         <input type="radio" name="identificador" id="dni" value="dni" />
         DNI
      </label>
   </legend>
   <label for="numero-dni">
      Número:
      <input type="text" name="numero-dni" id="numero-dni" />
   </label>
</fieldset>

D'aquesta manera la relació de jerarquia queda perfectament descrita. El LABEL del radiobutton passa a ser “DNI” mentre que el del camp de text quedaria com a “Número:”

Aquesta solució pot donar problemes a l'hora de canviar l'aparença mitjançant CSS ja que l'element LEGEND té un comportament erràtic i poc consistent entre els diferents navegadors.

Tercera aproximació

Una altre manera de marcar la jerarquia de parelles títol/contingut és mitjançant llistes de definició per tant es pot considerar:


<dl>
   <dt>
      <label for="dni">
         <input type="radio" name="identificador" id="dni" value="dni" />
         DNI
      </label>
   </dt>
   <dd>
      <label for="numero-dni">
         Número:
         <input type="text" name="numero-dni" id="numero-dni" />
      </label>
   </dd>
</dl>

Així, cada DT contindria un radiobutton mentre que al DD hi hauria els camps dependents.

Aquest darrer exemple, a més a més, deixa clara la relació de llista dels radiobutton.

Un exemple sencer:


<dl>
   <dt>
      <label for="dni">
         <input type="radio" name="identificador" id="dni" value="dni" />
         DNI
      </label>
   </dt>
   <dd>
      <label for="numero-dni">
         Número:
         <input type="text" name="numero-dni" id="numero-dni" />
      </label>
   </dd>
   <dt>
      <label for="passaport">
         <input type="radio" name="identificador" id="passaport" value="passaport" />
         Passaport
      </label>
   </dt>
   <dd>
      <label for="numero-passaport">
         Número:
         <input type="text" name="numero-passaport" id="numero-passaport" />
      </label>
   </dd>
</dl>

esbudellant estàndards

Menú