3.20 HTML: Formularios - Parte 2
En el vídeo anterior vimos las etiquetas <form> e <input> así como sus atributos. Si llegaste a este vídeo antes que a la primera parte, te recomiendo que antes de continuar, veas “Formularios – 1ª parte” para no perderte.
<select> permite generar listas desplegables y listas de selección múltiple.
Además del atributo “name”, que es fundamental para el manejo de los datos enviados por el formulario, como ya vimos en la primera parte del vídeo;
<select> permite utilizar el atributo “multiple” para generar listas de selección múltiple.
Cuando te haya presentado todos los elementos necesarios te enseñaré un ejemplo de lista desplegable y lista múltiple.
Para definir cada una de las opciones de la lista, utilizamos la etiqueta <option>, cuyo atributo “value” será el valor del elemento <select> cuando se envíe el formulario.
Entre <option> y </option> incluimos el texto que queramos mostrar al usuario.
Este sería un ejemplo de lista desplegable que seguro utilizas habitualmente.
Y al añadirle el atributo “multiple” a la etiqueta <selectZ, se transforma en una lista de selección múltiple.
Para seleccionar más de un valor, es necesario mantener pulsada la tecla “Ctrl” en PC o la tecla “command” en Mac antes de hacer clic sobre los elementos a seleccionar a partir del segundo.
Además, podemos agrupar las opciones encerrándolas entre etiquetas <optgroup> y </optgroup> para facilitar el uso de listas con muchos elementos.
En el ejemplo puedes ver cómo quedaría el control con agrupación de opciones.
Fíjate que la etiqueta <optgroup> tiene un atributo “label” mediante el cual se especifica el texto que aparece en el desplegable.
Los títulos de grupo no son seleccionables.
Seguramente habrás notado que resulta incómodo insertar grandes cantidades de texto mediante <input /> de tipo texto. Para ello, existe un control específico en HTML llamado <textarea>.
De nuevo, el atributo “name” es necesario (fíjate si lo será que no dejo de repetirlo).
<textarea> permite definir el área visible de una forma un tanto peculiar.
Del mismo modo que “size” en los <input /> de tipo “text” tomaba como parámetro el número de caracteres de ancho, <textarea> define la anchura mediante el atributo cols, por defecto a 20;
y el alto mediante “rows”, por defecto a 2.
En los campos <textarea> es posible hacer uso de la tecla “intro” para introducir saltos de línea. (CLIC)
Cuando el área visible sea demasiado pequeña para el texto contenido, el control <textarea> mostrará barras de desplazamiento, típicamente la barra de desplazamiento vertical.
El elemento <label> no muestra absolutamente nada en pantalla y, sin embargo, es una etiqueta que mejora la usabilidad y accesibilidad de los formularios.
Una etiqueta <label> asocia un texto a un control, de forma que al pulsar sobre ese texto, se activa el control asociado en la mayoría de los navegadores.
Además, relaciona el control con su propósito, fundamental para usuarios que utilicen algún tipo de ayuda a la navegación.
Para relacionar un <label> con su control de formulario, se utiliza el atributo “for” del primero. Este atributo espera el identificador del control de formulario con el que se va a asociar.
En este ejemplo puedes ver cómo el atributo “for” coincide con el atributo “id” del componente de formulario con el que se quiere asociar.
Al pulsar sobre el texto de las etiquetas <label>, se activará la casilla asociada, mejorando la usabilidad, ¿quién no ha hecho clic sobre el texto de una casilla de verificación esperando que ésta se marcara?
y además, también mejora la accesibilidad: ¿o en tu smartphone no te resulta más fácil pulsar sobre un texto que sobre una pequeña casilla?
Recuerda incluir el atributo “value” que he omitido para mejorar la legibilidad del código.
<fieldset> agrupa elementos de un formulario que están relacionados entre sí.
Por ejemplo, podríamos agrupar los datos personales de un usuario en un <fieldset> y los datos bancarios en otro.
Además, este control dibuja un marco alrededor de los componentes encerrados entre <fieldset> y </fieldset>.
Para facilitar la lectura del formulario, es posible dotar de un título a los componentes agrupados, escribiéndolo entre las etiquetas <legend> y </legend>.
Por supuesto, la etiqueta <legend> se debe ubicar entre <fieldset> y </fieldset>.
En el ejemplo puedes ver un formulario en el que un usuario incluiría su nombre y correo electrónico y los temas que quiere cursar.
Mediante la etiqueta <fieldset> he agrupado los datos personales en un grupo, y los temas en otro.
Utilizando la etiqueta <legend> he titulado el primer grupo como “Perfil” y el segundo como “Temas”.
Y eso es todo sobre formularios, por el momento.
- En esta segunda parte hemos visto el uso de las etiquetas <select> y <option> para insertar listas desplegables o de selección múltiple;
- permitir al usuario escribir texto con más de una línea de forma cómoda mediante <textarea>;
- cómo hacer más accesibles nuestros formularios utilizando etiquetas <label> para asociar texto a controles ;
- y a agrupar controles en conjuntos con <fieldset> para hacer los formularios más digeribles para el usuario.
Y si me lo permites, te dejo tres consejos que espero te sean de utilidad:
Utiliza <textarea> en lugar de <input /> de tipo texto cuando el usuario vaya a escribir cantidades de texto considerables.
Usa <select> en lugar de <input /> de tipo “radio” cuando ofrezcas tres o más posibilidades al usuario.
Y, en la medida de lo posible, facilita el trabajo a tus usuarios mediante la etiqueta <label>.
Recuerda que, como dice Tim Berners Lee, el poder de la web reside en la universalidad; facilitarle el acceso a todo el mundo, sin importar limitaciones, es un aspecto esencial.
Puedes ampliar información y ver ejemplos utilizando tu buscador favorito, en alguna de las páginas de tutoriales HTML como html.conclase.net y htmlquick.com; o probando y modificando online los ejemplos Try it yourself de la w3schools.
Actividad
1. En la actividad anterior se te proponía realizar el siguiente formulario:
Crea una página web que contenga un formulario con los siguientes campos de información:
- El nombre, con un control de tipo texto.
- Los apellidos, con un control de tipo texto.
- El sexo, con dos opciones excluyentes hombre o mujer.
- El correo electrónico, con un control de tipo texto.
- Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
- Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
- Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
- El título de la página debe ser Formulario de registro - Mi web.
- El método de envío del formulario debe ser GET.
- El destino del envío del formulario debe ser "".
- La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
- La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.
Al formulario anterior le tienes que añadir los siguientes campos de información:
- Población, una lista desplegable con las opciones Alicante, Madrid, Sevilla y Valencia.
- Descripción, un área de texto multilínea.
Además, tienes que asociar la etiqueta de cada control a su control para mejorar la usabilidad y la accesibilidad.
Resultado
<html>
<head>
<title>Formulario de registro - Mi web</title>
</head>
<body>
<h1>Formulario de registro</h1>
<form action="" metod=get>
<p>
<label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50"/>
</p>
<p>
<label for="apellidos">Apellidos:</label> <input type="text" name="apellidos" id="apellidos" maxlength="50"/>
</p>
<p>
Sexo: <input type="radio" name="sexo" id="sexo-h" value="h"/> <label for="sexo-h">Hombre:</label>
<input type="radio" name="sexo" id="sexo-m" <value="m"/> <label for="sexo-m">Mujer:</label>
</p>
<p>
<label for="correo">Correo:</label> <input type="text" name="correo" id="correo" maxlength="100"/>
</p>
<p>
<label for="poblacion">Población</label>
<select name="poblacion" id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
</p>
<p>
<label for="descripción">Descripción:</label>
<textarea name="descripcion"id="descripcion" rows="6" cols="60"></textarea>
</p>
<p>
<input type="checkbox" name="info" id="info" checked="checked"/>
<label for="info">Deseo recibir información sobre novedades y ofertas.</label>
</p>
<p>
<input type="checkbox" name="condiciones" id="condiciones"/>
<label for="condiciones">Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario