Las nuevas etiquetas de HTML 4.0 (2)

Explicación de las nuevas etiquetas de HTML 4.0 para uso en formularios.
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:

Nota: La única pega es que deberemos introducir el conjunto en una celda de tabla o una capa DIV o cualquier otro tipo de contenedor. A ese contenedor podemos asignarle un ancho determinado, ya que si no lo hacemos así, el recuadro abarcara todo el ancho de pantalla disponible. Otra posibilidad es aplicar estilos CSS sobre la etiqueta FIELDSET, en el caso que sepamos usar las Hojas de Estilo en Cascada.

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>

Referencia: Para los interesados, cabe señalar que en DesarrolloWeb.com existe un artículo que explica estas etiquetas desde otro punto de vista y con las palabras de otro autor, que se puede leer en el link Etiquetas FIELDSET y LEGEND de formularios.

<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:


<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>

Referencia: Si deseas aprender algo más sobre la etiqueta BUTTON te recomendamos leer el artículo Botones HTML con la etiqueta BUTTON.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Compartir

Comentarios

08/6/2006
Deberian explicar en que consiste la sintaxis de las etiquetas. Gracias

jose ignacio

09/1/2007
hola
muy buena la pagina
pero tengo un problema con la etiqueta button
he pensado que se veria muy atractivo si hago estos links con esta etiqueta pero al poner la etiqueta en el link no me funciona el link y cuando saco button si me funciona
que se debe hacer?