MODULO 3 - Lección 20: HTML FORMULARIOS - PARTE 2

SELECT: Permite generar:

• Listas desplegables
• Listas de selección múltiples

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.

Para definir cada una de las opciones de la lista utilizaremos la etiqueta option, cuyo atributo value será el valor del elemento <select> cuando se envíe el formulario.

Entre <option> y </option> escribiremos el texto que queramos mostrar al usuario.

<option value="valor">

texto

</option>

Este seria un ejemplo de lista desplegable:

<select>

<option value="HTML">

HTML

</option>

<option value="CSS">

CSS

</option>

</select>

Al añadirle el atributo multiple a la etiqueta select, se convertiria en una lista de selección multiple:

<select multipe="multiple">

<option value="HTML">

HTML

</option>

<option value="CSS">

CSS

</option>

</select>

Para seleccionar más de un valor, hay que  mantener pulsada la tecla CONTROL en PC o comand en Mac, antes de hacer clic en los elementos a seleccionar a partir del segundo.

Podemos también agrupar las opciones encerrándolas entre etiquetas <optgroup> y </optgroup> para facilitar el uso de listas con muchos elementos.

<optgroup label="texto"> 

<option> </option> 

<option> </option> 

...

</optgroup> 

Un ejemplo de control con agrupación de opciones:

<select>

<optgroup label="HTML">

<option value="tables">Tablas</option>

<option value="forms">Formularios</option>

</optgroup> 

</optgroup label="CSS">

...

</select>

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.

Resulta incomodo insertar grandes cantidades de texto mediante un input de tipo texto. Para ello existe el control <textarea>

De nuevo, el atributo name es necesario

textarea permite definir el área visible de un modo peculiar. Del mismo modo en que size en los inputs de tipo texto 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,

cols ="número" (20 por defecto)

rows="número" (2 por defecto)

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 visible, el control textarea mostrará barras de desplazamiento.

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 pasar sobre el texto, se activa el control asociado en la mayoría de los navegadores.

Relaciona el control con su proposito, fundamental para usuarios que usen algún tipo de ayuda a la navegación.

Para relacionar un label con su control de usuario, se utiliza el atributo for del primero. Este atributo espera el identificador del control de usuario con el que se va a asociar.

Fieldset, agrupa elementos de un formulario que están relacionados entre si. Además dibuja un marco entre los componentes que están encerrados entre <fieldset> y </fieldset>

Para facilitar la lectura del formulario, es posible dotar de un título a los componentes agrupados, escribiendolo entre las etiquetas <legend> y </legend>, que deben ubicarse entre <fieldset> y </fieldset>