Módulo 3 - Lección 20 - Formularios select
Un formulario es una sección de un documento
que contiene:
<select>
<label for="poblacion">Población:</label>
<select name="poblacion"
id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
Permite generar listas desplegables y listas de selección múltiple.
Atributos:
Permite generar listas desplegables y listas de selección múltiple.
Atributos:
·
“name”,
es fundamental para el manejo de los datos enviados por el formulario, como ya
vimos en la primera parte;
·
“multiple”
para generar listas de selección múltiple.
·
<option>,
Para definir cada una de las opciones de la lista, utilizamos la etiqueta <option>,
Atributos:
Para definir cada una de las opciones de la lista, utilizamos la etiqueta <option>,
Atributos:
·
“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 <select>, 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.
<optgroup>,
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.
<textarea>
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>.
Atributos:
·
name
De nuevo, el atributo “name” es necesario (fíjate si lo será que no dejo de repetirlo).
De nuevo, el atributo “name” es necesario (fíjate si lo será que no dejo de repetirlo).
·
cols y rown
<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.
<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.
<label>
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.
Atributos:
for
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>, el cursor pasa a la
casilla asociada, mejorando la usabilidad, en el ejemplo si pulsamos sobre la
etiqueta HTML el cursor se sitúa en el campo an blanco asociado.
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í.
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>.
<legend>
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>.
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”.
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.
Consejos
·
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.
Ejemplo de formulario de registro
<h1>Formulario
de registro</h1>
<form
action="http://www.rutadestino.com" method="get">
<p>
<label for="nombre">Nombre:
</label>
<input type="text"
name="Nombre" id="nombre">
<br/> <br/>
<label
for="apellido">Apellidos: </label>
<input type="text"
name="apellido" id="apellido">
<br/> <br/>
<label for="sexo">Sexo:
</label>
<input type="radio"
name="sexohombre" id="sexohombre"
value="hombre">
<label for="sexo">hombre
</label>
<input type="radio"
name="sexomujer" id="sexomujer" value="hujer">
<label for="sexo">mujer
</label>
<br/> <br/>
<label for="correo">Correo:
</label>
<input type="text"
name="correo" id="correo">
<br/> <br/>
<input type="checkbox"
name="infor" checked="checked"
id="infor">
<label for="infor">Deseo
recibir información sobre novedades y ofertas: </label>
<br/> <br/>
<input type="checkbox"
name="condiciones" id="condiciones">
<label for="infor">Declaro
haber recibido informacion sobre condiciones generales del programa y normativa
sobre protección de datos: </label>
<br/> <br/>
<label
for="poblacion">Población:</label>
<select name="poblacion"
id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
<br/> <br/>
<br/> <br/>
<input type="submit"
value="Enviar">
<input type="reset">
</p>
</form>
Comentarios
Publicar un comentario