Actualizado el 14-01-2007
versión para imprimir
Formularios ( III )
Label
Como hemos visto, los formularios son métodos de entrada de datos. Salvo los botones, ninguno de los controles disponibles para los formularios tiene automáticamente un texto explicativo asociado. Sin embargo, para facilitar la tarea a quien debe rellenar los datos, es prácticamente obligado identificar el tipo de dato que se espera con un pequeño texto al lado de cada campo.
Hasta ahora nos hemos limitado a escribirlo, sin mas:
<form> <h3>selecciona tu editor favorito:</h3> <input type="radio" name="editorfavorito" value="html-kit"/> html-kit <br /> <input type="radio" name="editorfavorito" value="front-page"/> front-page <br/> </form>
Hay, sin embargo, una etiqueta específica para el texto que identifica cada elemento del formulario: la etiqueta label, que indica al navegador la asociación existente entre el campo de entrada de datos y dicho texto, de tal forma que, por ejemplo, podemos activar dicho campo del formulario haciendo click sobre el texto ademas de sobre el elemento del formulario asociado.
Para hacer uso de label debemos añadir un atributo mas a nuestros formularios: id:
<h3>selecciona tu editor favorito:</h3> <form> <input type="radio" id="htmlkit" name="editorfavorito" value="html-kit"/> <label for="htmlkit">HTML-Kit</label><br> <input type="radio" id="frontpage" name="editorfavorito" value="front-page"/> <label for="frontpage">Front-page</label><br/> </form>
selecciona tu editor favorito:
Observa como ahora haciendo click en el texto asociado, se activa el control correspondiente, incluso aunque por razones de diseño de la pagina (mal diseño, claro) el texto este visualmente separado del control:
selecciona tu editor favorito:
Recuerda que la id debe ser unica en TODA la pagina (no solo dentro del mismo formulario) y recuerda tambien que puedes emplear label con todos los controles que integran un formulario (inputs, textareas, checkboxs)
Asociacion implicita con label
La asociación de un texto a un control puede hacerse implicitamente, sin mas que encerrar el contro html (y el texto a asociar) dentro de un par de etiquetas label sin atributos:
<label><input type="radio" name="editorfavorito" value="html-kit"/> html-kit </label>
lamentablemente este atajo no es recomendable pues no es reconocido por internet explorer
Fieldset y legend
La etiqueta fieldset permite agrupar visualmente un grupo de controles de un formulario. La etiqueta legend permite asignar un titulo o caption al grupo fieldset:
Su uso es sencillo, siguiendo esta estructura:
<form> <fieldset> <legend>titulo aqui ...</legend> controles aqui </fieldset> </form>