Mejora la usabilidad y accesibilidad de los formularios en HTML 4.0

Acabo de descubrir varias etiquetas para formularios HTML 4.0 que no conocía y que nos permiten  mejorar la usabilidad y la accesibilidad de nuestros formularios considerablemente. Desde Eslomas nos ofrecen una  explicación de éstas y varios ejemplos donde comprobar el resultado. Tal y como nos indican, estas  etiquetas están admitidas por la W3C, por lo que no tendremos ningún problema al validar nuestro formulario.

Fieldset y Legend

Estas etiquetas nos permiten crear un área visible dentro del formulario agrupando varios controles que estén relacionados facilitando al usuario su comprensión y usabilidad, ya que permite desplazarse de un control a otro a través de la tecla TAB. La etiqueta Fieldset crea el recuadro que agrupa a los controles, mientras que Legend nos permite implementar el título del área.

<fieldset>

<legend>Datos personales:</legend>
Nombre:  <input size="20" type="text" />
Dirección:  <input size="20" type="text" />
Teléfono:  <input size="20" type="text" />

</fieldset>

Label

Aunque no es una etiqueta desconocida, puede que el uso que se la da no sea el apropiado o simplemente que no es explota todo su potencial. Esta etiqueta permite definir un título a un control del formulario. Cada etiqueta label sólo puede estar asignada a un control, y digo asignada porque aquí es donde está el verdadero uso de esta etiqueta. Mediante el atributo for (propio de la etiqueta label) podemos especificar el id del control de formulario al que queremos asignar el label, de esta forma el usuario podrá hacer click sobre el control o sobre el label al realizar las operaciones con el formulario. Donde realmente podemos ver su efecto es en controles radiobutton ó checkbox, ya que para seleccionarlos o chequearlos podremos hacer click sobre el label o sobre los propios controles. De esta forma se mejora considerablemente la usabilidad del formulario. Cabe mencionar que dentro de la etiqueta label podemos incluir tanto texto como imágenes.

Selecciona tu vehículo

<input id="bmw" name="coche" type="radio" />
<label for="bmw">BMW
<input id="audi" name="coche" type="radio" />
<label for="audi"><img src=""/> Audi

Optgroup

Esta etiqueta nos permite crear grupos dentro de desplegables select. Los grupos están definidos por un título que aparecerá en negrita y cursiva, y que no será seleccionable.

La utilidad de optgroup reside en facilitar al usuario la lectura y comprensión de la lista desplegable.

<select name="Modelo">

<option selected="selected" value="none">Seleccione...</option>

<optgroup label="BMW">
   <option value="bmw120d">BMW 116d
   <option value="bmw118d">BMW 118d
   <option value="bmw120d">BMW 120d
   <option value="bmw318d">BMW 318d
   <option value="bmw320d">BMW 320d
</optgroup>

<optgroup label="AUDI">
   <option value="A1">A1
   <option value="A2">A2
   <option value="A3">A3
   <option value="A4">A5
</optgroup>

</select>

Más info | http://www.eslomas.com/campos-fieldset-legend-label-optgroup