Las nuevas etiquetas de HTML 4.0 (2)

Estamos haciendo un repaso de las nuevas etiquetas disponibles en el HTML 4.0. Esta información forma parte de una serie de artículos que comenzó en Las nuevas etiquetas de HTML 4.0 y se dio continuidad en el la segunda entrega, bajo el título Las nuevas etiquetas de HTML 4.0 (1).

En el presente texto vamos a hablaros sobre las etiquetas del HTML 4.0 relacionadas con la creación de formularios, que muchas veces son desconocidas, pero no por ello dejan de ser interesantes. El paseo por esta nueva serie de etiquetas del HTML viene de la mano de Luciano Moreno y con revisión en 2011 de Miguel Angel Alvarez.

<FIELDSET>... </FIELDSET>

Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles, si no echábamos mano de elementos que no son del formulario, como tablas o capas (divisiones o elementos DIV, como prefieras llamarles).
Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET, se mostrara un rectángulo alrededor de los campos englobados por dicha etiqueta.

Además, podemos indicar un título en el rectángulo creado por FIELDSET y para ello utilizamos la etiqueta LEGEND, que admite el parámetro align="left / center / right / top / bottom", lo que nos permite alinear el título horizontal y verticalmente.

Para aclarar el aspecto de la agrupación de campos con FIELDSET podemos ver el siguiente efecto obtenido al agrupar un par de elementos de formulario.

Datos personales

Nombre:
Edad:

Ejemplo:

<form action="#" method="post" enctype="text/plain" name="miform">
<table width="200">
<tr>
<td>
<fieldset>
<legend align="left"><font color="red">Caja de texto</font></legend>
pon tu nombre:
<input type="text" size="15">
</fieldset>
</td>
</tr>
<table>
</form>

<LABEL>... </LABEL>

Hasta no hace mucho los textos que ponemos al lado de los campos de formulario no estaban asociados a dichos campos. Es decir, el texto que colocamos al lado de un elemento de formulario, para especificar qué debe escribir el usuario en el campo, no tiene ninguna relacion real con el propio elemento de formulario.

Por ejemplo, si tenemos un código como este:

Dirección: <input type="text" name="direccion">

El texto "Dirección" no está asociado para nada con el campo INPUT. Por ello, al pulsar sobre el texto "Dirección" no ocurre nada. Esto es así también con otros campos de formulario, como las cajas de checkbox o botones de radio.

<input type="checkbox" name="interesado"> Estoy interesado

Si pulsamos sobre el texto que hay al lado del campo de confirmación "Estoy interesado", ¡no sucede nada! Pero ahora, con la utilización de la etiqueta LABEL podemos conseguir que, haciendo clic en el texto "Estoy interesado", el control checkbox cambie de estado.

Ejemplo:

<form action="#" method="post" enctype="text/plain" name="un ejemplo más">
<label>
<input type="checkbox" name="email">
Recibir email
</label>
</form>

Ese ejemplo de LABEL es perfectamente válido y asocia el texto "Recibir email" al campo checkbox de formulario, de manera que si pulsamos sobre "Recibir email" cambiará el estado del campo checkbox asociado. Sin embargo, en la etiqueta LABEL podemos utilizar un atributo llamado FOR, que sirve para indicar explícitamente a qué campo de formulario se está asociando ese texto. Para ello colocamos como valor del atributo FOR el identificador del campo que estamos asociando a ese LABEL. Esto nos permite una mayor versatilidad a la hora de componer el HTML de nuestra página. Veamos el siguiente ejemplo:

<form>
<label for="hombre">Hombre</label>
<input type="radio" name="sexo" id="hombre" value="hombre">
<br>
<label for="mujer">Mujer</label>
<input type="radio" name="sexo" id="mujer" value="mujer">
</form>

Si ponemos este ejemplo en marcha, veremos que pulsando en el texto "Hombre" se activa el botón de radio "hombre". Del mismo modo, si pulsamos sobre el texto "Mujer" se activará la opción del radio button "mujer". Podemos ver ese pequeño código en marcha a continuación:

Hombre
Mujer

<BUTTON>... </BUTTON>

A partir de la implementación de los estándares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo BUTTON una de ellas, bastante útil por cierto. La pega es que las versiones de 4 de Nestcape se lanzaron antes de estas implementaciones, por lo que estas nuevas etiquetas sólo se pueden visualizar correctamente con Internet Explorer 4 y superiores. BUTTON se encuentra ampliamente soportada en la actualidad.

Esta etiqueta proporciona un método único para la implementación de cualquier tipo de botón de formulario. Sus principales atributos son:

• type="tipo", que puede tomar los ya conocidos valores submit (por defecto), reset y button.
• name="nombre", que asigna un nombre identificador único al botón.
• value="texto", que define el texto que va a aparecer en el botón.

La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier elemento de HTML, como imágenes y tablas.

Podemos ver un ejemplo a continuación.

<form action="#" method="post" enctype="text/plain" name="miform">

<button name="boton_1" type="button">
<table width="10" cellspacing="0" cellpadding="2" border="1">
<tr>
<td>uno</td>
<td>dos</td>
</tr>
<tr>
<td>tres</td>
<td>cuatro</td>
</tr>
</table>
</button>
</form>