6.7. Formularios

Los documentos HTML no sólo están pensados para ofrecer información al lector y que éste la reciba pasivamente, sino que permiten asimismo que éste interactúe con el documento, bien para influir directamente sobre él bien para que el navegador retransmita el fruto de esta interacción al servidor web y una aplicación que corre en él, asociada al documento, lleve a cabo alguna tarea. Por ejemplo:

• Un documento HTML podría tener asociados distintos aspectos visuales (temas o estilos) para cada uno de los cuales hubiera un CSS distinto. Un botón, en algún lugar del documento, podría permitir el cambio de estilo (o sea, el cambio del archivo CSS aplicable). Para ello, no se necesita el concurso de ninguna aplicación de servidor, pero el lector interactúa con el documento para hacerle saber su preferencia.

• Un documento HTML como éste de la Consejería de Educación permite rellenar una serie de campos de formulario para determinar cuáles son nuestras preferencias de estudio. Al completarlas y envíar la consulta, se envían los datos al servidor que realiza una consulta en una base de datos y devuelve el resultado de dicha consulta.

Nuestra intención es conocer cómo se construyen estos formularios sin preocuparnos de la acción que desencadenan, puesto que el primer ejemplo requiere de programación con Javascript en el lado del cliente, y el segundo, programación con algún lenguaje de programación apropiado[1].

Como curiosidad, más histórica que otra cosa, los campos de formulario siempre fueron unos de los elemenos HTML para los que más código Javascript se escribía, ya que lo lógico era comprobar la validez de los datos introducidos por el usuario antes de enviarlos al servidor. Sin embargo, HTML5 introdujo muchos atributos para llevar a cabo estas comprobaciones, de manera que la inmensa mayor parte del código Javascript requerido antes para esta tarea, ahora es absolutamente innecesario.

6.7.1. Declaración del formulario

Lo habitual es que todos los campos de formulario estén asociados a un formulario, aunque no es obligatorio[2], ya que el formulario es el que determina qué hacer con los datos recabados.

Campo de formulario

<form>

Declara la existencia de un formulario

form (form)

Es el elemento encargado de definir un formulario, esto es de albergar los campos del formulario y determinador qué se hace con los datos recabados en él. Es un elemento de bloque que puede contener casi cualquier otro elemento[3], con especial excepción de otro elemento <form>. Dicho en otras palabras, no pueden anidarse formularios.

Atributos de form

action	url	URL a la que se envían los datos para que una aplicación en el servidor la procese.
method	get|post dialog	Método de envío de los datos al servidor. El formulario se asocia a un elemento <dialog>.
name	nombre	Nombre del formulario. Útil en algunas ocasiones. En HTML5 se prefiere el uso del atributo id.
target	valor	Con igual significado que el atributo homónimo de <a>.
novalidate	-	No realiza comprobaciones a los campos.
autocomplete	off|on	Permite (o no) que el navegador complete automáticamente los campos de texto atendiendo a los criterios que tenga establecidos (p.e. valores previos introducidos en campos con el mismo nombre).

Los principales atributos del elemento son action y method, aunque el segundo tiene como valor predeterminado «get». Un ejemplo, de uso de este elemento podría ser:

<form id="peticion" action="consulta.php" method="post">
   Nombre: <input type="text" name="nombre"><br>
   Apellidos: <input type="text" name="apellidos"><br>
</form>

Este código implicaría que los nombres y valores de campos de formulario incluidos dentro del elemento <form>:

nombre=Pepe&apellidos=Ruiz%20Valera

se enviarían por el método POST de HTTP a la dirección consulta.php donde debería haber un script PHP que procesara los datos y devolviera una página de respuesta.

Nota

Cuando el método de envío (method) es dialog, los datos del formulario no se envían a ningún servidor, sino que el formulario se asociará a un elemento <dialog> que lo contenga. El envío del formulario supondrá el cierre del <dialog> y, además, el returnValue del <dialog> adoptará el valor del botón con el que se envió. Más adelante, al tratar este elemento, se proporciona un ejemplo de este comportamiento.

6.7.2. Introducción manual de datos

Trataremos bajo este epígrafe los mecanimos de HTML5 que permiten al usuario la introducción de datos no preestablecidos. Los dos elementos HTML destinados a ello son:

Campo de introducción de datos

<input>	Permite la introducción de datos de extensión reducida
<textarea>	Permite la introducción de datos de gran extensión

input (input)

Es el elemento destinado a la introducción de datos de pequeña extensión. Es un elemento muy versátil, ya que gracias a su atributo type, permite preparar al navegador para recibir datos de muy distinta naturaleza. Por este motivo no declararemos de una sola vez cuáles son todas sus posibilidades, sino que iremos desglosando estas a lo largo de toda la lección. Por ahora, nos limitaremos a declarar cuáles son sus atributos comunes y cómo usarlos para escribir texto en general.

Atributos comunes de input

autocomplete	off|on	Permite al navegador autocompletar este campo de manera análoga al atributo de <form> que se aplica en general sobre todos los campos del formulario.
autofocus	-	Atrae hacia sí el foco. Por tanto, debería tener este atributo aquel campo que queremos que sea el primero en rellenar el usuario.
disabled	-	Deshabilita el campo. Comúnmente se añade con intención de que alguna acción de usuario (como rellenar otro campo), borre el atributo.
form	id	Identificador del formulario al que pertenece el campo. Si no se incluye, pertenecerá al formulario que contiene al campo.
list	id	Identificador de la <datalist> con valores predefinidos para sugerir al usuario.
name	nombre	Nombre identificativo del campo usado cuando se envía al servidor.
pattern[4]	regexp	Expresión regular con la que debe concordar el valor del campo para considerarse válido.
placeholder	valor	Sugerencia al usuario. Aparecerá en un color gris claro.
readonly	-	Campo de sólo lectura.
required	-	El campo es obligatorio.
value	valor	Valor inicial del campo.
type	tipo	Tipo de campo. Esta es la madre del cordero.

Prudencia

Un campo deshabilitado no solamente no puede ser rellenado, sino que además no se envía al remitir el formulario al servidor. Esto es lo que los diferencia de un campo de sólo lectura.

Ver también

Si quiere saber más sobre expresiones regulares consulte este extenso tutorial.

En cuanto a los tipos de campos posibles, algunos de ellos son:

Valores de type para texto general.

type	text	Texto libre. Es el valor predeterminado.
type	search	Términos de búsqueda.
type	password	Contraseñas (no se ven los caracteres).
type	hidden	Campo oculto. No aparece, pero es enviado.
type	url	Exige una URL.
type	email	Exige una dirección de correo electrónico.

Los tipos url e email no permiten cualquier valor, sino uno que el navegador considera válido para el tipo correspondiente.

Nota

Con el atributo pattern podemos restringir los valores posibles, de modo que en muchos casos para la validez podríamos prescindir del tipo. Sin embargo, no debe ser así, puesto que la semántica es importante y, además, el tipo puede provocar cambios en el comportamiento del navegador. Por ejemplo, cuando el tipo es numérico, no es posible escribir letras aunque se pulsen y, en el caso de ser el dispositivo un teléfono móvil, aparecerá un teclado numérico exclusivamente.

Ejemplo:

<form id="ej1" action="">
   Nombre: <input name="nombre" required pattern="[A-Z][A-Za-z ]*"><br>
   Apellidos: <input name="apellidos" pattern="[A-Z}[A-Za-z ]*"><br>
   Escríbame aquí su vida: <textarea cols=50 rows=15 name="rollo"
   placeholder="Cuénteme aquí todo"></textarea>
   <button>Envíar</button>
</form>

Nombre:
Apellidos:
Escríbame aquí su vida: Envíar

Nota

Puede usarse title para informar al usuario de cuáles son las restricciones sobre los campos.

textarea (textarea)

Permite rellenar un campo de texto de gran extensión.

Atributos de textarea

rows	num	Número de filas del recuadro de texto.
cols	num	Número de columnas del recuadro de texto.
maxlength	num	Longitud máxima en caracteres del contenido
minlength	num	Longitud mínima en caracteres del contenido
spellcheck	true|false|default	Define si se comprueban errores ortográficos

Nota

spellcheck es un atributo global que puede usarse en cualquier otro elemento. Cuando en un elemento su valor es «default», el elemento heredará el valor que tuviera este atributo en otro elemento HTML antecesor suyo.

6.7.2.1. Datos numéricos

Hay tres tipos de campos <input> relacionados con valores numéricos:

Valores de type para campos numéricos

type	number	Valor numérico
type	range	Valor numérico de dentro de un rango
type	tel	Número de teléfono.

El tipo number permite escribir números (enteros o decimales) y admite tres atributos propios:

Atributos para los tipos number y range

max	num	Número máximo admisible
min	num	Número mínimo admisibles
step	num	Paso entre valores adminisbles

Por ejemplo, esto permitirá indicar la edad en años de una persona:

Edad: <input type="number" name="edad" max=120 min=0 step=1> años

Por su parte, range habilita la introducción de un valor numérico que se mueve dentro de un pequeño rango[5]. Tiene los mismos atributos que el tipo anterior, pero el navegador lo suele presentar de un modo muy distinto:

<input type="range" min=0 max=10 value=8 name="satisfaccion" step="2"> Grado de satisfacción

Grado de satisfacción

tel permite indicar valores que son números de teléfono. Este ejemplo permite escribir números válidos en España:

Teléfono: <input type="tel" name="tlfo" pattern="[6-9][0-9]{2}-[0-9]{6}">

6.7.2.2. Fechas

Existen también tipos de <input> especiales para escribir horas y fechas:

Valores de type para fechas

type	date	Fecha.
type	month	Fecha (sólo mes y año)
type	week	Semana del año
type	time	Hora.
type	datetime-local	Fecha y hora

Para todos estos tipos, el navegador facilitará la introducción de los datos:

Fecha: <input type="date" max="2019-12-12" min="2018-01-01" name="fecha"><br>
Hora: <input type="time" max="14:45" min="8:00" name="hora"><br>

Fecha:
Hora:

6.7.2.3. Colores

Para seleccionar colores existe un tipo particular:

Valores de type para selección de color

type

color

Color

Ejemplo:

Fondo: <input type="color" name="bgcolor" value="#ff00ff"><br>
Texto: <input type="color" name="fgcolor"><br>

Fondo:
Texto:

6.7.3. Selección de datos

Bajo este epígrafe trataremos los campos de formulario que habilita HTML5 para seleccionar entre un conjunto predefinido y finito de valores. La diferencia con las listas de sugerencias que podían ofrecernos los campos anteriores es que, en este caso, estamos obligados a escoger entre las alternativas propuestas.

6.7.3.1. Campos de selección

Trataremos dos tipos distintos de <input>:

Valores de type para campos de selección

type	checkbox	Genera casillas de verificación
type	radio	Genera botones de opción

Ambos campos se comportan de forma semejante: son necesarios varios elementos <input>, todos con el mismo valor del atributo name y permiten marcar el campo mediante el uso del ratón. Además permiten el siguiente atributo:

Atributos para los tipos checkbox y radio

checked

-

Marca preventivamente la opción

La diferencia fundamental es que radio define opciones excluyentes, mientras que las alternativas de checkbox no lo son. Por ejemplo:

Escoja su sexo: <br>
<input name="sexo" type="radio" value="V"> Varón <input name="sexo" type="radio" value="H"> Hembra

Escoja su sexo:
Varón Hembra

Frente a esto otro:

<p>¿Cuál son sus medios de locomoción favoritos?</p>
<p><input name="transporte" type="checkbox" value="coche" checked> El coche<br>
<input name="transporte" type="checkbox" value="barco"> El barco<br>
<input name="transporte" type="checkbox" value="moto"> La motocicleta<br>
<input name="transporte" type="checkbox" value="bici"> La bicicleta<br>
<input name="transporte" type="checkbox" value="tren" checked> El tren<br>
<input name="transporte" type="checkbox" value="avion"> El avión<br>
<input name="transporte" type="checkbox" value="otros"> Otros<br>
</p>

¿Cuál son sus medios de locomoción favoritos?

El coche
El barco
La motocicleta
La bicicleta
El tren
El avión
Otros

6.7.3.2. Ficheros

Existe un tipo particular para seleccionar uno o más ficheros locales:

Valores de type para selección de color

type

file

Selecciona ficheros locales

El tipo tiene algunos atributos propios:

Atributos de input para tipos file

accept	valores	Tipos de ficheros admisibles. Pueden usarse tipos MIME, o extensiones de ficheros separados por comas
multiple	-	Permite seleccionar más de un fichero

Ejemplo:

Seleccione avatar: <input type="file" accept=".png,image/jpeg">

Seleccione avatar:

Nota

HTML5 tiene una API Drag & drop (arrastrar y soltar) para Javascript que entre otras muchas finalidades, puede servir para obtener archivos arrastrándolos a un área definida en la página, en vez de eligiéndolos como se ha expuesto aquí. Como esto requiere programar, que no es el objetivo de esta unidad, lo dejaremos estar. Para más información, puede consultarse este artículo de web.dev sobre el asunto.

6.7.3.3. Listas de selección

Otra posibilidad que ofrecen los formularios HTML es la creación de listas de selección, para las cuales se usan otros elementos distintos a <input>:

Campos para listas de selección.

<select>	Declara una lista desplegable
<option>	Define un ítem de la lista
<optgroup>	Agrupa ítems de la lista

select (select)

Elemento dentro del cual se define una lista de selección. Dispone de muchos de los atributos aplicables a <input> con idéntico significado como autofocus, disabled, form, name o required. Añade además:

Atributos adicionales de select

multiple	-	Permite seleccionar más de un ítem
size	num	Cantidad de ítem que se visualizan a la vez

option (option)

Define cada uno de los ítem de la lista desplegable. Sus posibles atributos son:

Atributos de option

disabled	-	Deshabilita la selección de ese ítem
selected	-	Marca esta opción como seleccionada
value	valor	El valor que se enviará si se selecciona este ítem.
label	texto	Texto del ítem

El elemento permite incluir contenido de texto que será el que se muestre a menos que se incluya también el atributo label. Por ejemplo:

Nacionalidad:
<select name="nacionalidad">
   <option disabled selected label="-- Escoja una opción --">
   <option value="es">Española
   <option value="pt">Portuguesa
   <option value="fr">Francesa
   <option value="uk">Británica
   <option value="it">Italiana
</select>

se verá así:

Nacionalidad: Española Portuguesa Francesa Británica Italiana

Obsérvese que cada opción posible tiene un valor y que todos comparten el nombre (name) definido a través del elemento <select>. De este modo, si se eligiera la nacionalidad portuguesa, por mor de este campo se enviaría name=pt.

Nota

Obsérvese que hay tres aspectos relacionados con el valor y cómo se muestra en pantalla:

• El atributo value es el valor enviado, pero no es obligatoria su presencia y, si no se encuentra, se envía el contenido del elemento.

• El contenido se muestra siempre que no exista la etiqueta label y se usa como valor, siempre que no exista el atributo value.

• El atributo label es la leyenda que representa la opción, pero no se usa como valor de envío.

optgroup (optgroup)

Permite agrupar varios ítem bajo una misma categoría. Para ello, lo que se hace es incluir los elementos <option> dependientes dentro de un mismo <optgroup>.

Atributos de optgroup

disabled	-	Deshabilita la selección de todos los ítem incluidos dentro.
label	texto	Texto que se usará para representar al grupo

Por ejemlo:

Nacionalidad:
<select name="nacionalidad">
   <optgroup label="Europa">
      <option value="es">Española</option>
      <option value="pt">Portuguesa</option>
      <option value="fr">Francesa</option>
      <option value="uk">Británica</option>
      <option value="it">Italiana</option>
   </optgroup>
   <optgroup label="América">
      <option value="mx">Mejicana</option>
      <option value="us">Estadounidense</option>
      <option value="cu">Cubana</option>
      <option value="ar">Argentina</option>
      <option value="ve">Venezolana</option>
   </optgroup>
</select>

que se verá:

Nacionalidad: Española Portuguesa Francesa Británica Italiana Mejicana Estadounidense Cubana Argentina Venezolana

Por último, hemos eludido hasta ahora el uso de las opciones multiple y size. Cuando size es mayor que 1, lo navegadores tienden a dejar de mostrar la lista como una lista desplegable y pasan a mostrarla como una lista con barra de scroll. El uso de multiple, además de permitir la selección de varios ítem a la vez, pasa a mostrar la lista con barra de scroll:

Nacionalidad:
<select name="nacionalidad" size=3>
   <option value="es">Española</option>
   <option value="pt" selected>Portuguesa</option>
   <option value="fr">Francesa</option>
   <option value="uk">Británica</option>
   <option value="it">Italiana</option>
</select>

que se ve:

Nacionalidad: Española Portuguesa Francesa Británica Italiana

6.7.4. Botones

Ningún formulario que se precisa sería tal, sino habilitamos un modo de enviar los datos al formularios. Para ello se habilitan los botones de envío, aunque no es su única función. Se encargan de:

• El envío del formulario.

• El reseteo del formulario, para recuperar los valores iniciales.

• No hacer nada. En realidad, más que no hacer nada lo que no tienen este tipo de botones es una función predefinida, de modo que para que sean útiles es necesario definirla a través de Javascript, lo cual se sale del propósito de esta unidad.

Para implementar los botones hay dos elementos distintos con los que se puede lograr la misma funcionalidad: el omnipresente <input> y <button>:

Elemento button

<button>

Permite definir botones en el formulario

button (button)

Es el elemento que permite la inclusión con botones en los formularios HTML y comparte esta función con algunos de los tipos de <input>. El contenido del elemento define la forma en que se ve. Por tanto:

<button>Soy un botón</button>

Mostrará un botón de texto y:

<button><img alt="Soy un botón" src="images/boton.png"></button>

una imagen pulsable.

Tipos de botones con el elemento button

type	submit	Envía los datos del formulario. Este es el valor predeterminado
type	reset	Resetea el formulario.
type	button	Sin funcionalidad definida.

Estos tipos de botón tienen su equivalencia con input:

Tipos de botones con el elemento input

type	submit	Equivale a <button type="submit">.
type	image	Equivale a <button type="submit">, pero usando una imagen en vez de texto.
type	reset	Equivale a <button type="reset">.
type	button	Equivale a <button type="button">.

En principio ambos elementos son equivalentes y, salvando el hecho de que uno (<input>) usa su atributo value y el otro (<button>) su contenido para definir su representación, no hay diferencias, de modo que todo lo indicado es aplicable a ambos.

En principio, la función de estos elementos es desencadenar una acción, por lo que no es necesario que aporten información alguna. En consecuencia es muy común que no incluyan atributo name. Así este formulario:

<form id="formulario" action="">
   <input type="hidden" name="oculto" value="foobar">
   <button>Enviar</button>
</form>

enviaría al pulsar sobre el botón la información oculto=foobar. Aunque por lo general se desea que ocurra esto, podría darse la circunstancia de que en el formulario dispusiéramos varios botones de envio y que quisiéramos saber en la aplicación de servidor cuál fue el botón que pulsó el usuario. Ello se podría resolver usando un mismo name para todos lo botones y modificando el valor que envía cada uno:

<form id="formulario" action="">
   <input type="hidden" name="oculto" value="foobar">
   <button name="submit" value="1">Enviar 1</button>
   <button name="submit" value="2">Enviar 2</button>
</form>

De este modo, al pulsar el primer botón la información enviada sería oculto=foobar&submit=1 y al pulsar el segundo oculto=foobar&submit=2.

En cuanto a los atributos posibles para ambos elementos, aparte de los ya definidos como name, value, type, autofocus, disabled o form se incluyen que alteran, si se usa tal botón, el envío del formulario definido en la etiqueta <form>:

Atributos de input y button para definir comportamiento

formaction	url	Redefine el atributo action del formulario.
formmethod	get|post	Redefine el atributo method del formulario.
formnovalidate	-	Redefine el atributo novalidate del formulario.
formtarget	valor	Redefine el atributo target del formulario.

6.7.5. Otros aspectos

6.7.5.1. Organización

Es común que al crear un formulario con varios campos de formulario, éstos puedan agruparse lógicamente de algún modo. Por ejemplo, todos los elementos <input> que implementan una selección de campos forman una unidad. Para la reunión de campos de formulario se usa:

Campos para listas de selección.

<fieldset>	Agrupa campos de formulario.
<legend>	Primer elemento opcional de <fieldset> que añade una texto explicativo al grupo

fieldset (legend)

Básicamente es un contenedor de campos de formularios, aunque puede contener otros elementos que ayuden a estructurarlos mejor (<div>, <p>, etc.).

Puede incluir algunos atributos:

Atributos de fieldset

disabled	-	Deshabilita todos los campos de formulario intermos.
form	id	Identificador del formulario al que pertenece.
name	nombre	Nombre del grupo.

legend (legend)

Es un elemento que puede aparecer como primer hijo de un elemento <fieldset> para definir un texto que sirva de título al grupo de campos que reúne dicho elemento. Puede contener elementos en línea.

Retomando un ejemplo anterior, podríamos hacer:

<fieldset>
   <legend>Sexo</legend>
   <input name="sexo" type="radio" value="V"> Varón
   <input name="sexo" type="radio" value="H"> Hembra
</fieldset>

que se verá:

Sexo

Varón Hembra

6.7.5.2. Asociación de texto al campo

A lo largo del documento hemos usado algunos campos de formulario que en sí mismos no aclaran cuál es su función. Es el caso, de muchos de los tipos de <input>:

<input type="color" name="color" value="#ffff00">

o sea:

Bien, ese selector de color, ¿para qué narices sirve? Es obvio que necesita un texto aclaratorio, de ahí que en nuestro ejemplo hiciéramos algo de este estilo:

Color de fondo: <input type="color" name="color" value="#ffff00">

Es obvio que al verlo junto el lector entenderá que el selector se refiere a la elección de un color de fondo, pero esta es sólo una relación visual que no está reflejada semánticamente en el documento. Para crear esta relación debe hacerse uso del elemento <label>:

<label for="color">Color de fondo:</label> <input id="color" type="color" name="color" value="#ffff00">

que se ve:

Color de fondo:

Definámoslo más formalmente:

Etiqueta label

<label>

Define el texto asociado a un campo de formulario

label (label)

Define el texto asociado a un campo del formulario y puede tomar un atributo:

Atributos de label

for

id

Identificador del campo con el que está relacionado.

En el último ejemplo queda claro como se hace esta relación: se añade un identificador al campo y se usa en el atributo for de <label>. Una alternativa, que no requiere el uso del atributo for en <label> ni del identificador id en el campo es incluir el campo dentro de la etiqueta:

<label>Color de fondo: <input type="color" name="color" value="#ffff00"></label>

que se ve:

Color de fondo:

Lo interesante de <label> no es solamente la relación semántica, sino también la relación en el comportamiento: pinchar sobre la etiqueta equivale a pinchar sobre el propio campo[6].

6.7.5.3. Lista de sugerencias

Cuando se trataron los atributos de los tipos de <input> que permtían introducir texto, nos limitamos a citar el atributo list e indicar que servía para generar una lista precargada de sugerencias. No profundizamos más, porque ello requería la introducción de un nuevo elemento HTML:

Etiqueta datalist

<datalist>

Define una lista de sugerencias.

datalist (datalist)

Define una lista de sugerencias para un campo de texto, más allá de las sugerencias que pueda mostrar el navegador como consecuencia de que esté habilitado el autocompletado (autocomplete). El elemento, que no es visible, no presenta más atributo que un identificador para que pueda referenciarlo el atributo list del campo <input> y usa los elementos <option> ya vistos al tratar <select> para definir cuáles son estas sugerencias:

<label for="esp">Especialidades: </label>
<input list="especialidades" id="esp" name="especialidad"
       autocomplete="off" pattern="[A-Z0-9]{2}[0-9]{6}">
<datalist id="especialidades">
   <option value="00590107">Informática
   <option value="00590006">Matemáticas
   <option value="00590011">Inglés
   <option value="00590004">Lengua
</datalist>

Especialidades:

Nota

Obsérvese que deshabilitamos el autocompletado para que a las sugerencias predefinidas no se añadan otras que vaya recordando el navegador. También hemos limitado los valores válidos usando un patrón.

Advertencia

Este solución no es equivalente al uso de un <select>, puesto que este elemento restringe los valores posibles a los incluidos en la lista, mientras que un <input> con lista de sugerencias sigue dando libertad para escribir otros. Ahora bien, haciendo uso de Javascript podemos lograr que los valores válidos se restrinjan exclusivamente a los sugeridos lo cual puede ser interesante si los valores posibles son muy numerosos y buscarlos en la lista puede causar gran engorro al usuario. Como ejemplo de ello, puede echarle un ojo a este caso alojado en codepen.

Nota

Es posible incluir dentro del elemento <datalist> un elemento <select> dentro del cual se colocan las opciones. Es válido para la especificación y no tiene efecto alguno, pero si el navegador es algo antiguo y no soporta listas de sugerencias, las sugerencias se verán como una lista desplegable; y con ayuda de código Javascript podremos hacer algún apaño para que el formularion funcione correctamente.

6.7.5.4. Cuadro de diálogo

HTML5 provee un sencillo mecanismo para crear diálogos emergentes a través del elemento <dialog>:

Etiqueta datalist

<dialog>

Define un dialogo emergente

dialog (dialog)

Define un cuadro de diálogo emergente que se superpone al resto del contenido de la página a imitación de las ventanas emergentes.

Atributos de label

open

-

Abre la ventana al cargar la página

El elemento sólo tiene un atributo propio open, que hace que el cuadro aparezca emergido al cargar la página. De lo contrario, se encontrará oculto y sólo mediante programación con Javascript se podrá mostrar:

<dialog><p>Esto es una ventana emergente</p></dialog>

En principio, el elemento no es exclusivo de formularios, pero da pie a que se incluya en ellos un formulario con algún campo que requiera respuesta. De hecho, para posibilitarlo se ha definido un nuevo valor dialog para el atributo method, de modo que cuando se envía el formulario no se abandona la página, sino que se oculta el cuadro y se recupera el valor a través de Javacript. Para que el elemento sea funcional, es necesario el uso de Javascript, por lo que no se profundizará más en él.

Si tiene curiosidad, puede consultar este ejemplo en codepen.io.

6.7.5.5. Progreso

HTML5 permite también la inclusión de una barra de progreso que, aunque no es propiamente un campo de formulario, suele estar relacionada con alguna tarea en la que está involucrado un formulario:

Etiqueta progress

<progress>

Muestra una barra de progreso.

progress (progress)

Muestra la barra de progreso de una supuesta tarea. Ello, por supuesto, requiere que seamos capaces de especificar cuál es el grado de completitud de tal tarea, para lo cual podemos utiliar algunos atributos:

Atributos de progress

max	num	Número que representa la terminación de la tarea. Su valor predeterminado es 1.
value	num	Número que representa el grado de completitud. Debe estar comprendido entre 0 y max.

<progress> es un elemento en línea que, además, puede contener elementos en línea. Su contenido no se representa, pero puede ser útil si el navegador no tiene soporte para él:

<label for="load">Carga del elemento:</label>
<progress id="load" value=".75">75%</progress>

que el navegador muestra:

Carga del elemento: 75%

Nota

El elemento, obviamente, es estático, por lo que para presentar el carácter dinámico de una verdadera barra de progreso es necesario código Javascript que cambie el valor de value en sincronía con el progreso de la tarea.

6.7.6. Ejercicios propuestos

1. Escriba una página HTML que contenga un formulario con los siguientes campos agrupados en dos categorías:

   Información personal

   1. Nombre.

   2. Apellidos.

   3. Fecha de nacimiento.

   4. Sexo (Hombre/Mujer).

   5. Estado civil (Soltero/Casado/Viudo/Divorciado).

   6. Teléfono.

   7. Teléfono móvil.

   8. Aficiones: Debe ser una lista que incluya los siguientes aspectos (que no son excluyentes entre sí):

      • Literatura.

      • Cine.

      • Música.

      • Informática.

      • Actividades deportivas.

      • Manualidades.

      • Otras (especifíquelas).

      Debe haber, además, un cuadro de texto deshabilitado que se habilitaría si se marcase la opción «Otras». Como esto último requiere Javascript, quedará pendiente de hacer.

   Información de usuario:

   1. Nombre de usuario (debe ser una sola palabra y el primer carácter una letra).

   2. Contraseña (debe repetirse dos veces).

   3. ¿Cómo llegó a esta web?

      • Publicidad.

      • A través de un amigo.

      • A través de buscadores.

   4. Puntúe la web (entre 0 y 10).

   El formulario debería enviarse por el método POST

Solución propuesta.

Notas al pie

[1]

Los habituales son Python, PHP, Java o el propio Javascript.

[2]

Especialmente cuando no se piensa enviar ninguna información al servidor y el dato de un campo de formulario, se procesa en el propio navegador para provocar algún cambio en el mismo.

[3]

Entiéndase que, aunque este epígrafe esté dedicado exclusivamente a elementos relacionados con los formularios, un elemento <form> puede contener elementos que no son propios de formulario como un elemento <p> o un elemento <div>.

[4]

En realidad, pattern no es un atributo común a todos los tipos de <input>, ya que hay algunos tipos que no permiten introducir datos y, en consecuencia, para los que no tiene sentido.

[5]

Por su naturaleza, pues, este campo permie seleccionar un conjunto discreto de número y, en consecuencia, debería haberse incluido en el epígrafe dedicado a la selección de datos.

[6]

Esto último posibilita efectos interesantes si se sabe algo de CSS. Por ejemplo, podríamos asociar una etiqueta a un input| de tipo checkbox, y con CSS volver invisible la casilla de verificación y hacer que la etiqueta simule una tecla sin pulsar cuando la casilla no está marcada y una tecla pulsada cuando la casilla si lo está.