UT 2: Lenguajes de Marcas: HTML

2.13.- Formularios
No es necesario navegar mucho tiempo por internet para encontrar páginas web en las que se piden
datos a los navegantes. El estándar HTML/XHTML permite crear formularios para que los usuarios
interactúen con las aplicaciones web.

De un modo más formal podemos decir lo siguiente:

 Los formularios son elementos, que, como los enlaces, permiten una interacción del usuario con
la página web.
 Su tarea principal es recoger información. El usuario, por tanto, debe introducir esa información
en los campos del formulario.
 Una vez se ha recogido esa información el formulario la enviará al servidor, por correo o donde
decida el programador para ser tratada, mostrada y/o almacenada.

Para la creación de formularios XHTML proporciona la etiqueta <form>...</form>, y entre ambas

insertamos todos los controles que deseemos formen parte del formulario.

Uno de los controles siempre presentes en todo formulario, es el botón de envío. Cuando el usuario
pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor
para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que
procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para
ello, utiliza el valor del atributo name para obtener los datos de cada control del formulario.

En el servidor el nombre de la aplicación que procesa los datos vendrá dado por un atributo de form
llamado action.

Por ejemplo, si cuando enviamos los datos del formulario, queremos que la aplicación que procese
dichos datos sea una que se llama procesa_datos.php, que se encuentra ubicada en el sitio web, pero
concretamente en la carpeta php, tendremos que poner:

<form action=”php/procesa_datos.php”...>...</form>

Otros atributos a usar con form son:

✔ method:

Especifica el método HTTP usado para enviar el formulario al agente procesador. Este
atributo puede tener dos valores:

1. get: El conjunto de datos del formulario se agrega al URI especificado por el

atributo action(con un signo de interrogación ("?") como separador) y este
nuevo URI se envía al agente procesador. Se ve en la barra del navegador.

57
 UT 2: Lenguajes de Marcas: HTML

2. post:El conjunto de datos del formulario se incluye en el cuerpo del formulario

y se envía al agente procesador.

2.13.1.- Controles de formulario

Todos los controles que pueden usarse a la hora de crear un formulario permitirán al navegante
insertar información.

Unas veces esta información consistirá en la inserción de un texto, que podrá ser de una sola línea o
varias y que podrá estar oculto o no. En otras ocasiones se ofrecerá entre una serie de opciones entre
las que simplemente hay que elegir una o varias.

Labels e Input

Normalmente para la recogida de información los formularios usando etiquetas <input>. Pero, para
poder saber qué campos estamos rellenando una buena práctica (se puede de otras maneras menos
elegantes) es poner una etiqueta (etiqueta)delante de cada input para dar nombre y asociar ambas.

Un ejemplo sería:

<label for="nombre">Nombre:</label>
<input type="text" id=”name” name="nombre" /> << vincular una etiqueta con un control a través de un for y un id

id="nombre" ese name asigna nombre al control. todos los controles tienen que tener un
nombre propio
La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado y se mejora
su accesibilidad. Además, al pinchar sobre el texto del <label>, el puntero del ratón se posiciona
automáticamente para poder escribir sobre el campo de formulario asociado. Este comportamiento es
especialmente útil para los campos de tipo radiobutton y checkbox.

Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta input.

Para diferenciar entre unos controles y otros se hará uso del atributo type.
Cajas de texto

En este caso el atributo type tomará el valor text. El caso más sencillo es aquel en el que el
usuario introduce cualquier texto. El resultado de este componente lo podemos ver en la
siguiente figura:

Figura 33. Caja de texto de formulario

<INPUT TYPE="TEXT"

58
 UT 2: Lenguajes de Marcas: HTML

Consta de los siguientes atributos adicionales:

➢ name: Nombre único asignado al componente.

SIZE nos da el ➢ size: Determina la anchura de la caja de texto. El valor por defecto de este atributo es
numero 20 caracteres.
máximo de caracteres ➢ maxlength: Con este atributo limitamos el número máximo de caracteres que pueden
en una caja
MAXLENGTH nos ser escritos en una caja de texto. El valor de este atributo puede ser mayor o menor
maximiza el SIZE que el especificado en size, y es totalmente independiente. Si es mayor cuando
pero los caracteres lleguemos al final de la caja de texto los nuevos caracteres que insertemos irán
añadidos en la caja, desplazando hacia la izquierda a los primeros, que dejarán de estar a la vista (OJO,
no se podrán apreciar esto no quiere decir que sean borrados).
➢ value: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto,
antes de que el usuario escriba nada. Este texto suele ser, en general, o bien
instrucciones o bien la respuesta más probable.
➢ alt: Descripción del control.

Ejemplo 26: Código XHTML

<!DOCTYPE html>
<html>
<head>
<title>XHTML :: Formularios :: Campo de texto </title>
<meta charset=”UTF-8"> se redimensiona el tamaño de
size y maxlength
</head>
<body>
<h1> Formulario de ejemplo</h1>
<form>
<p> <label for=”nombre”>Introduzca su nombre</label><br/>
<input type="text" id=”nombre” name="nombre" size="10"
maxlength="20"/><br/>
<label for=”apellidos”>Introduzca sus apellidos</label><br/>
<input type="text" id=”apellidos” name="apellidos"
maxlength="15"/>
</p>

</form>

</body>

</html>

59
 UT 2: Lenguajes de Marcas: HTML

Figura 34. Ejemplo 26. Cajas de texto de un formulario

Cajas de texto para claves

En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial
como puede ser una clave de acceso o password.

Figura 35. Cajas de texto para password

Para ello debemos usar type="password" en la etiqueta input. Un ejemplo típico de uso de
password es al pedir una identificación.

60
 UT 2: Lenguajes de Marcas: HTML

Ejemplo 27: Código XHTML

<!DOCTYPE html>
<html>
<head>
<title>XHTML :: Formularios :: Campo de clave</title>
<meta charset="UTF-8">
</head>
<body>
<h1> Formulario de Autenticación</h1>
<form>
<p>
<label for=”nombre”>Introduzca su nombre</label><br/>
<input type="text" id=”nombre” name="nombre" size="20"
maxlength="15"/><br/><br/>
<label for=”apellidos”>Introduzca sus apellidos</label><br/>
<input type="text" id=”apellidos ”name="apel" size="20"
maxlength="45"/><br/><br/>
<label for=”dni”> Introduzca su dni </label><br/>
<input type="text" id=”dni” name="dni" size="20"
maxlength="9" value="dni"/><br/><br/>
<label for=”pass”> Introduzca su password </label><br/>
<input type="password" id=”pass” name="pass"
size="30" maxlength="8"/>
</p>
</form>
</body>
</html>

Figura 35. Ejemplo 27. Cajas de password de un formulario

61
 UT 2: Lenguajes de Marcas: HTML

Radio buttoms

Para su creación asignaremos el valor radio al atributo type.

se selecciona una, según lo
que se escoja, se manda un
valor u otro.
Van a tener el mismo
nombre, pero va a cambiar
el valor Figura 36. Radio buttoms de un formulario

Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado
(OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un
botón determinado esté seleccionado inicialmente insertando el atributo checked en la etiqueta
input de la siguiente manera:
El nombre es el mismo porque estamos hablando del mismo campo
<input type="radio" checked>id=" " name="Sexo" value="Hombre"/><Labe... Hombre><labe/>
<input type="radio" id=" " name="Sexo" value="Mujer"/><Labe... Mujer><labe/>
Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario
la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio
le pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción
del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno
de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese
seleccionado previamente dejará de estarlo.

Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos
incluir el mismo valor en el atributo name en todos ellos. Además debemos usar el atributo
value para dar un nombre distinto a cada uno de los botones.

62
 UT 2: Lenguajes de Marcas: HTML

Ejemplo 28: Código XHTML

<!DOCTYPE html>
<html>
<head>
<title>XHTML :: Formularios :: Radio Buttoms</title>
<meta charset="UTF-8">
</head>
<body>
<h1> Indique el tipo de música que más le guste:</h1>
<form>
<p>

<input type="radio" id=”Jazz” name="musica" value="Jazz"/>

<label for=”Jazz”> Jazz</label><br/>
El nombre siempre <input type="radio" id=”Pop” name="musica" value="Pop"/>
es e mismo, lo que <label for=”Pop”> Pop</label><br/>
varía es el value <input type="radio" id=”Rock” name="musica" value="Rock"/>
<label for=”Rock”> Rock</label><br/>
<input type="radio" id=”Country” name="musica" value="Country"/>
<label for=”Country”> Country</label>
</p>

</form>

</body>

</html>

CHECKED
Figura 37. Ejemplo 28. Radio Buttoms de un formulario

63
 UT 2: Lenguajes de Marcas: HTML

Checkbox (Casillas de Verificación)

Son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones

[Link] utilizan cuando el usuario puede activar y desactivar varias opciones
relacionadas pero no excluyentes.
Un único campo, puede ser
verdadero o falso.
Cada uno tendrá su name y cada
uno tendrá su value.

Figura 38. Check box de un formulario

Para insertar un campo de este tipo en un formulario debemos usar de nuevo la etiqueta input,
pero esta vez con type="checkbox". Veamos un ejemplo de uso de este tipo de controles:

Ejemplo 29: Código XHTML

<!DOCTYPE html>
<html>
<head>
<title> XHTML :: Formularios :: CheckBox</title>
<meta charset="UTF-8">
</head>
<body>
<h1> Puestos de trabajo buscados</h1>
Nombres y valores independientes
<form>
<input type="checkbox" id=”directivo” name="directivo" value="direccion"/>
<label for=”directivo”> Dirección </label><br/>
<input type="checkbox" id=”tecnico” name="tecnico" value="tecnico"/>
<label for=”tecnico”> Técnico </label><br/>
<input type="checkbox" id=”empleado” name="empleado" value="empleado"/>
<label for=”empleado”> Empleado </label><br/>
</form>
</body>
</html>
Pulsando sobre cada caja de selección se cambia de seleccionado a no seleccionado,
independientemente de la posición del resto.

64
 UT 2: Lenguajes de Marcas: HTML

Figura 39. Ejemplo 29. Checkbox de un formulario

En la figura de a continuación, mostramos el resultado de ejecutar este código, en el cual hemos

seleccionado de forma simultánea varias opciones.

Si queremos que
salga
preseleccionado,
usamos cheked

Figura 40. Ejemplo 29. Varios Checkbox seleccionados de un formulario

Como se muestra en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se
puede establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente fuera del
control del formulario. Si no se añade un texto al lado de la etiqueta <input /> del checkbox, el
usuario sólo ve un pequeño cuadrado sin ninguna información relativa a la finalidad de ese checkbox.

El valor del atributo value, junto con el valor del atributo name, es la información que llega al servidor
cuando el usuario envía el formulario.

Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. Si el valor
del atributo es checked, el checkbox se muestra seleccionado. En cualquier otro caso, el checkbox
permanece sin seleccionar.

Botones de formulario

Para la creación de botones de formulario utilizamos la etiqueta input, y especificamos en el

atributo type el tipo de botón que queremos crear. Su valor puede ser:

65
 UT 2: Lenguajes de Marcas: HTML

1. submit: Usado para enviar los datos del formulario. En value ponemos el texto que
queremos mostrar en el botón. Si no se establece el atributo value, el navegador
muestra el texto predefinido Enviar consulta.

Figura 41. Botón submit de un formulario

<label for=”buscar”></label><br/>
<input type="submit" id=”buscar” name="buscar" value="Buscar" />

2. reset: Usado para resetear los valores de todos lo controles del formulario a un valor
por defecto.

Figura 42. Botón reset de un formulario

<label for=”limpiar”></label><br/>
<input type="reset" id=”limpiar” name="limpiar" value="Borrar datos del formulario"
/>

Si el formulario no contenía originalmente ningún valor, el botón de reset lo vuelve a

mostrar vacío. Si no es utiliza el atributo value, el navegador muestra el texto
predefinido del botón, que en este caso es Restablecer.

3. button: Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de
programación JavaScript. Si la página incluye código JavaScript, los botones de este
tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa
sobre ellos.
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
también se puede hacer con input, tiene una ligera diferencia
Ficheros Adjuntos

Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde
el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número,
tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden
restricciones por motivos de seguridad.

66
 UT 2: Lenguajes de Marcas: HTML

Figura 44. Adjuntar ficheros en un formulario

El valor del atributo type para este control de formulario es file. El navegador se encarga de
mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que
permite navegar por los directorios y archivos del ordenador del usuario.

Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la

etiqueta <form> del formulario. El valor del atributo enctype debe ser multipart/form-data,
por lo que la etiqueta <form> de los formularios que permiten adjuntar archivos siempre es:
<form action="..." method="post" enctype="multipart/form-data"> ...</form>

Campos ocultos estos dos se van a usar poco.

Los campos ocultos se emplean para añadir información oculta en el formulario:

<input type="hidden" name="url_previa" value="/articulo/[Link]" />

El valor del atributo type para este control de formulario es hidden. Los campos ocultos no se
muestran por pantalla, de forma que el usuario desconoce que el formulario los incluye.
Normalmente los campos ocultos se utilizan para incluir información que necesita el servidor
pero que no es necesario o no es posible que la establezca el usuario.

Ejemplo 30: Código XHTML

Para la elaboración de este ejemplo hay que tener en cuenta lo siguiente:
1. Elegir el método más adecuado para el formulario (GET o POST) y cualquier otro atributo
necesario.
2. La aplicación que se encarga de procesar el formulario se encuentra en la raíz del servidor,
carpeta "php" y archivo "insertar_cv.php" .
3. El nombre puede tener 30 caracteres como máximo, los apellidos 80 caracteres y la contraseña
10 caracteres como máximo.
4. Asignar los atributos adecuados al campo del DNI.
5. Por defecto, debe estar marcada la casilla de suscripción al boletín de novedades.

67
 UT 2: Lenguajes de Marcas: HTML

<!DOCTYPE html>
<html>
<head>
<title> XHTML :: Formularios :: Rellena tu CV</title>
<meta charset="UTF-8">
</head>
<body>
<h3>Rellena tu CV</h3>
<form action="/php/insertar_cv.php" method="post" enctype="multipart/form-
data">
<label for=”nombre”>Nombre</label><br/>
<input type="text" name="nombre" value="" size="20" maxlength="30"
/> <br/>
<label for=”apellidos”>Apellidos</label><br/>
<input type="text" name="apellidos" value="" size="50" maxlength="80"
/> <br/>
<label for=”contraseña”>Contraseña</label><br/>
<input type="password" name="contrasena" value="" maxlength="10" /> <br/>
<label for=”dni”>DNI</label><br/>
<input type="text" name="dni" value="" size="10" maxlength="9" /><br/>
<label for=”sexo”>Sexo</label><br/>
<input type="radio" name="sexo" value="hombre" checked="checked"
/>Hombre <br/>
<input type="radio" name="sexo" value="mujer" /> Mujer <br/><br/>
<label for=”foto”>Incluir mi foto</label><br/>
<input type="file" name="foto" /> <br/><br/>
<input name="suscribir" type="checkbox" value="suscribir"
checked="checked"/>
<label for=”suscribir”> Suscribirme al boletín de novedades </label><br/>
<br/>
<input type="submit" name="enviar" value="Guardar cambios" />
<input type="reset" name="limpiar" value="Borrar los datos introducidos" />
</form>
</body>
</html>

68
 UT 2: Lenguajes de Marcas: HTML

Figura 45. Ejemplo 30. Ejemplo completo de formulario

2.14.- Agrupando atributos. Estética.

HTML define algunos elementos adicionales para mejorar la estructura de los formularios creados.

Hay situaciones en las que los campos de los formularios por significado, por importancia o por
cualquier razón, queremos que se muestren agrupados. Para estos casos tenemos la etiqueta <fieldset>
que agrupa de forma lógica campos del formulario. Se utiliza conjuntamente con la etiqueta
<legend>. La usaremos siguiente el siguiente esquema:

69
 UT 2: Lenguajes de Marcas: HTML

Conjunto de campos -> Se le pone una etiqueta, con el nombre "Legend"

Siendo:

 <legend> una etiqueta que contiene el nombre del grupo y que se mostrará en la parte de arriba.
 controles todos los campos que queramos meter.

NOTA: la etiqueta tiene un borde por defecto

Atributos interesantes de los elementos de los formularios

Además, existen una serie de atributos interesantes que podemos añadir a los controles o elementos de
los formularios:

 required que indica que un control es obligatorio de rellenar.

 disabled que mostrará el elemento como deshabilitado.
 readonly que nos dice que el campo es de sólo lectura.
 placeholder que muestra un mensaje en los inputs dando pistas de lo que debemos poner. Al
empezar a rellenarlo desaparece.
 selected indica la opción seleccionada.
 value el valor que tiene el elemento.
 tabindex para asegurarnos que podemos navegar por los elementos usando el tabulador
podemos establecer un orden para cada uno.
 multiple para seleccionar varias opciones en una lista desplegable.
 Y muchos más…

70
 UT 2: Lenguajes de Marcas: HTML

Ejemplo 31: Código XHTML

<!DOCTYPE html>
<html>
<head>
<title>XHTML :: Formularios :: Fieldset y legend</title>
<meta charset="UTF-8">
</head>
<body>
<h3>Agrupación lógica de campos de formulario</h3>
<form action="maneja_formulario.php" method="post">
<fieldset> legend se pone al principio después de fieldset
<legend>Datos personales</legend>
C <label for=”nombre”>Nombre</label> <br/>
O
<input type="text" name="nombre" value="" />
N
T <br/>
R <label for=”apellidos”>Apellidos</label> <br/>
O <input type="text" name="apellidos" value="" />
L
E <br/>
S <label for=”dni”>DNI</label> <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
</fieldset>
<fieldset>
<legend>Datos de conexión</legend>
<label for=”nombre”>Nombre de usuario</label> <br/>
<input type="text" name="nombre" value="" maxlength="10" />
<br/>
<label for=”password”>Contraseña</label> <br/>
<input type="password" name="password" value="" maxlength="10" />
<br/>
<label for=”password2”>Repite la contraseña</label> <br/>
<input type="password" name="password2" value="" maxlength="10" />
</fieldset>
</form>
</body>
</html>

71
 UT 2: Lenguajes de Marcas: HTML

legend

Figura 46. Ejemplo 31. Ejemplo de fieldset y legend en un formulario

textarea (Áreas de texto) <TEXTAREA NAME="___">

</TEXTAREA>
Al contrario de lo que sucedía con las cajas de texto convencionales, en esta ocasión será
posible escribir varias líneas de texto, lo que es muy útil para campos en los que se requiere
una respuesta extensa. Por ejemplo, si deseamos que el usuario pueda escribir el texto de un
mail , o escribir una serie de comentarios largos, las áreas de texto serán tremendamente útiles.

La etiqueta usada para insertar este nuevo control es textarea, que consta de cuatro atributos:

1. name: El nombre que queremos asignarle al control. Como siempre, este nombre será
enviado junto con los datos del área de texto al mandar el formulario.
2. rows: El número de líneas de la caja de texto.
3. cols: El número de caracteres visibles de cada línea. Este atributo es similar al atributo
SIZE que vimos en las cajas de texto convencionales.

72
 UT 2: Lenguajes de Marcas: HTML

Ejemplo 32:Código XHTML

<!DOCTYPE html>
<html>
<head>
<title>XHTML :: Formularios :: textarea</title>
<meta charset="UTF-8">
</head>
<body>
<h3>Campos de áreas de texto de un formulario</h3>
<form>
<label for="nombre">Nombre del producto</label> <br/>
<input type="text" id="nombre" name="nombre" value="" /> <br/>
<label for="descripcion">Descripción del producto</label> <br/>
<textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea>
</form> Si escribimos algo dentro de textarea,
</body> aparecerá en dicha caja de texto
</html>

TEXTAREA

Figura 47. Ejemplo 32. Ejemplo de textarea en un formulario

En el caso de que queramos que aparezca con un texto por defecto, simplemente debemos
poner dicho texto entre <textarea> y </textarea>.

73
 UT 2: Lenguajes de Marcas: HTML

Listas desplegables

Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir
una o varias de ellas. Existen tres formas de mostrar estas opciones, como una lista con
desplazamiento con una sola opción elegible, como una lista con desplazamiento con varias
opciones elegibles, o mediante una lista desplegable.

<SELECT>
<OPTION>…</OPTION>
<OPTION>…</OPTION>
<OPTION>…</OPTION>
</SELECT>

74
 UT 2: Lenguajes de Marcas: HTML

Ejemplo 33: Código XHTML

<!DOCTYPE html>
<html>
<head>
<title>XHTML :: Formularios :: listas desplegablesç</title>
<meta charset="UTF-8">
</head>
<body>
<h3>Listas de formulario</h3>
<form>
<label for="so">Sistema operativo</label> <br/>
<select id="so" name="so">
<option value="" selected="selected">- selecciona -</option>
<option value="windows">Windows</option> Lista simple -> solo se
<option value="mac">Mac</option> selecciona una opción
<option value="linux">Linux</option>
<option value="otro">Otro</option><br/>
</select><br/><br/>
<label for="so2">Sistema operativo</label><br/>
<select id="so2" name="so2" size="5">
<option value="windows" selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select><br/><br/>
<label for="so3">Sistema operativo</label> <br/> Permite seleccionar
<select id="so3" name="so3" size="5" multiple="multiple"> más de una opción
<option value="windows" selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
</form>
</body>
</html>

La imagen siguiente muestra los tres tipos de listas desplegables disponibles. El primero es el
de las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar

75
 UT 2: Lenguajes de Marcas: HTML

un valor. El segundo tipo de lista es el que sólo permite seleccionar un valor pero muestra
varios a la vez. Por último, el tercer tipo de lista desplegable es aquella que muestra varios
valores y permite realizar selecciones múltiples.

Figura 48. Ejemplo 33. Listas desplegables en un formulario

Para insertar un cuadro de selección usaremos la etiqueta <select>, que consta de una etiqueta
de inicio y de una de fin, entre las cuales introduciremos las diferentes opciones para el
usuario. Para insertar estas opciones usaremos una nueva etiqueta, <option>, que no tiene
cierre, y a continuación de la cual pondremos el valor de la opción.

La etiqueta <option> tiene un atributo selected, que nos permitirá elegir la opción que debe
estar seleccionada por defecto.

En ocasiones puede ser conveniente que todas, o al menos algunas de las posibilidades sean
mostradas directamente, sin tener que pulsar un botón. Para conseguir esto el lenguaje HTML
ofrece el atributo size, que determina el número de opciones que pueden ser vistas
simultáneamente. Si este valor es 1 (o no se usa el atributo size), se mostrará una persiana
desplegable, como hemos visto hasta ahora. Si es mayor, se mostrará una lista, que podrá tener
barras de desplazamiento si no caben todas las opciones disponibles.

76
 UT 2: Lenguajes de Marcas: HTML

Si no indicamos lo contrario, los cuadros de selección actúan como los botones de radio, es
decir, sola una opción puede ser elegida simultáneamente. Afortunadamente, es posible
cambiar este comportamiento, y permitir la selección de varias opciones, usando el atributo
multiple en el interior de la etiqueta <select>.

Ejemplo 34: Código XHTML

Figura 49. Ejemplo 34. Listas desplegables en un formulario

77
 UT 2: Lenguajes de Marcas: HTML

Si queremos agrupar esas opciones las meteremos a su vez dentro de una etiqueta <optgroup>.

Un ejemplo sería:

<select name="provincia">
<optgroup label="Aragon">
<option value="Z">Zaragoza</option> Dentro de una lista podemos hacer que
<option>Huesca</option> dentro de una opción, aparezcan más
<option selected>Teruel</option> subopciones
</optgroup>

</select>

Data Lista

Es una nueva forma en HTML5 de hacer una lista de valores posibles para un input.

Un ejemplo sería:

<label>Elige un editor:</label><br/>
<input list="editor" name=”mieditor”></label><br/>
<FORM ACTION="MAILTO:__@__"
<datalist id="editor"> METOD="POSS">
<option value="Atom"> .
<option value="NotePad++"> .
<option value="VsCode"> .
<option value="Sublime"> </FORM>
<option value="Brackets">
</datalist>

Con el atributo list indicamos la lista de opciones que vamos a tener y en la etiqueta metemos las que
queramos.

Es importante destacar que podríamos meter otras opciones en el Input pero al usar esta estructura se
nos ayuda a rellenarlo y a elegir la opción correcta.

78