En el transcurso de los días con respecto a los artículos colgados en PaginasWebs.com ya se ha visto diferentes temas para la elaboración de formularios en el HTML. Pero aún queda por conocer un par de etiquetas, que si bien no son necesarias para la elaboración de formularios, sí os pueden ayudar a constituirlos, optimizando la interfaz de usuario de vuestros sitios.
Los atributos FIELDSET y LEGEND se manejan en conjunto y funcionan proporcionalmente para concretar y etiquetar conjuntos lógicos de resúmenes de formularios. La verdad no altera la operativa del formulario, pero funcionan para unir elementos en distintas áreas, de manera que se limpie la entrada de datos del usuario. Al constituir distintos grupos de elementos se logra elaborar una organización mucho más fácil de asemejar por el usuario, sobre todo si se trata de formularios que posean diversos elementos.
Etiqueta FIELDSET
La etiqueta FIELDSET funciona para unir los elementos. Se maneja con su concerniente etiqueta de cierre y lo que logra es elaborar un recuadro que envuelve a los elementos de formulario situados dentro de ella.
Por ejemplo, se puede manejar de esta forma:
<fieldset>
Elemento de formulario: <input type=”text” name=”elemento1″>
<br>
Otro elemento: <input type=”text” name=”otro”>
</fieldset>
Sencillamente hará un cuadrado que unirá los dos elementos del formulario añadidos dentro del FIELDSET.
Etiqueta LEGEND
LEGEND es útil a la hora de darle nombre o etiquetar un grupo hecho con FIELDSET. Incluye sencillamente una nota explicativa sobre qué tipo de información se está amontonando en el recuadro. En realidad no sirve para nada en especial, de no ser porque queda linda y porque puede valer para ayudar a una persona y optimizar la interfaz y la claridad de los formularios.
La etiqueta LEGEND se pone luego de la etiqueta FIELDSET. Posee su propia etiqueta de cierre. Entre <LEGEND> y </LEGEND> colocando el texto con el que quieren señalar el recuadro concretado con FIELDSET.
A la etiqueta LEGEND se le lograría colocar el atributo align para señalar el sitio donde tiene que mostrarse la leyenda. Por ejemplo se puede señalar align=right para que surgiese en la parte de la derecha, en vez de la izquierda, que es donde se muestra por defecto.
Se verá a continuación un ejemplo simple de como manejar las etiquetas FIELDSET y LEGEND en conjunto.
<form>
<fieldset>
<legend align=”right”>Datos personales</legend>
Nombre: <input type=”text” name=”nombre”>
<br>
Edad: <input type=”text” name=”edad” size=”2″>
<br>
Dirección: <input type=”text” name=”direccion”>
</fieldset>
<br>
<fieldset>
<legend align=”right”>Datos de tu ordenador</legend>
Modelo de ordenador: <input type=”text” name=”modelo”>
<br>
Sistema que te da el problema:
<select>
<option value=cpu>CPU
<option value=impresora>Impresora
</select>
</fieldset>
<br>
<fieldset>
<legend align=”right”>Descripción del problema</legend>
<textarea cols=”55″ rows=”8″ name=”descripcion”></textarea>
</fieldset>
</form>
Se puede verificar como se muestran tres bloques en el formulario, creados por tres etiquetas FIELDSET, con distintos campos de formulario añadidos en cada una. Asimismo, cada uno de los FIELDSET posee dentro un LEGEND que funciona para darle nombre con una leyenda a cada uno de los 3 bloques.
Etiqueta LABEL
Si bien no está dentro del objetivo de este tema, siempre es bueno nombrar asimismo otra etiqueta nombrada LABEL que sí posee una ventaja específica en la elaboración de formularios, asimismo de la estética. Funciona para colocarle texto al lado de los elementos de formulario y que ese texto esté confederado al propio elemento. El texto, que colocarán con el tag LABEL, se coliga a un elemento definitivo con el atributo FOR, situando como valor del atributo el que identifica el campo que se está coligando.
<label for=”edad”>Edad</label> <input type=”text” name=”edad” id=”edad”>
Como se puede ver, se ha elaborado un LABEL y se ha puesto en el atributo FOR el nombre del campo de formulario que se está sindicando a ese texto. El resultado es que el texto puesto adentro de LABEL es un componente participativo, al que se le puede hacer clic y es como si le hicieran clic en el propio campo vinculado al LABEL.
