Hola, soy Guzmán Fernández García, desarrollador web, y esta es la segunda parte del tema formularios HTML del curso “Introducción al desarrollo web”. Puedes encontrarme en mi web guzmanfernandez.com y en Twitter como pieizquierdo. También puedes contactarme a través de mi correo electrónico guzman.fg@gmail.com.

En el vídeo anterior vimos las etiquetas <form> y <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.

La etiqueta <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, <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 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. Al añadirle el atributo multiple a la etiqueta <select>, obtendrás 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> 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. <textarea> permite definir el área visible de una forma un tanto peculiar: del mismo modo que “size” en los <input> de tipo texto tomaba como parámetro el número de caracteres de ancho, <textarea> define la anchura mediante el atributo cols (por defecto 20) y el alto mediante rows (por defecto 2). En los campos <textarea> es posible hacer uso de la tecla Intro para introducir saltos de línea. Cuando el área visible sea demasiado pequeña para el texto contenido, el control mostrará barras de desplazamiento, típicamente la barra 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, que 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 y la accesibilidad.

Recuerda incluir el atributo value en los <input> para mejorar la legibilidad del código.

La etiqueta <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. 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>. La etiqueta <legend> se debe ubicar dentro de <fieldset>. En el ejemplo puedes ver un formulario en el que un usuario incluiría su nombre, 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.
• Cómo 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.
• Cómo 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:

1. Utiliza <textarea> en lugar de <input> de tipo texto cuando el usuario vaya a escribir cantidades de texto considerables.
2. Usa <select> en lugar de múltiples <input> de tipo radio cuando ofrezcas tres o más posibilidades al usuario.
3. 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; facilitar 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 W3Schools. Te recuerdo que, para hacerme llegar cualquier duda, tienes disponible mi correo electrónico y mi cuenta en Twitter; y, como te comenté en el primer vídeo, si quieres, puedes pedirme algún caso práctico a través de estas vías.

Este vídeo forma parte del curso “Introducción al desarrollo web”, disponible en la dirección idesweb.es. Muchas gracias por tu atención.