En esta lección y en la lección Formularios (2) se comentan las etiquetas relacionadas con los formularios
En esta lección se comentan las etiquetas y atributos más básicos.
El formulario: <form>
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.
La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más importantes de la etiqueta <form> son:
action: contiene el nombre del agente que procesará los datos remitidos al servidor (por ejemplo, un script de PHP)
method: define la manera de enviar los datos al servidor. Los valores posibles son:
get: los valores enviados se añaden a la dirección indicada en el atributo action
post: los valores se envían de forma separada
Si el atributo method no está establecido, el formulario se comporta como si el valor fuera get.
La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento típico de una página web (párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean los controles.
Los etiquetas que crean los controles en los formularios son <input>, <button>, <select>, <optgroup>, <option> y <textarea>. Además, se pueden estructurar los controles con las etiquetas <fieldset> y <legend>. Por último, la etiqueta <label> permite mejorar la accesibilidad de los controles.
El navegador envía únicamente los datos de los controles contenidos en el formulario. En una misma página puede haber varios formularios que envíen datos al mismo o a diferentes agentes.
Atributos comunes de los controles
Algunos atributos se pueden utilizar en varios tipos de controles.
El atributo type
El atributo type de la etiqueta <input> indica el tipo de control de que se trata.
En HTML 4.01 los tipos de <input> eran:
botón para enviar submit,
botón para reiniciar reset,
texto text,
contraseña password,
archivo file,
imagen image y
oculto hidden.
En HTML 5 se añadieron los tipos de <input>:
botón button,
número number,
búsqueda search,
teléfono tel,
dirección web url,
dirección de correo email,
fecha date,
hora time,
color color y
rango range.
En HTML 5.1 se añadieron los tipos de <input>:
mes month,
semana week y
fecha y hora local datetime-local.
El atributo name
El atributo name identifica al control.
Todos los controles de un formulario deben tener el atributo name porque, en general, sólo se envían los controles que lo tienen (aunque hay excepciones, como los controles de tipo imagen o los botones, que no los necesitan).
En general, los atributos name no se deben repetir, porque no se recibiría toda la información al enviarla. La única excepción es el botón radio, como se explica en el apartado correspondiente.
El atributo value
El atributo value permite establecer el valor inicial de un control, aunque cada control lo utiliza de una forma ligeramente distinta y algunos controles no lo admiten (área de texto, archivo o imagen).
En algunos casos (botones) el valor se muestra al usuario y el usuario no puede modificarlo. En otros casos (cajas de texto, contraseña) el valor se muestra en la página y el usuario puede modificarlo. En otros casos (casillas de verificación, botones radio, opciones de menú, oculto) el valor no se muestra en la página y el usuario no puede modificarlo.
En algunos casos (botones, oculto, botones radio) el atributo value es necesario. En otros casos (casilla de verificación, opciones de menú) es conveniente. En otros casos (cajas de texto, contraseña, imagen) puede omitirse. En el caso del selector de archivo, los navegadores no lo admiten por motivos de seguridad.
El atributo required
El atributo required permite indicar qué controles es obligatorio rellenar para enviar el formulario.
El atributo placeholder permite mostrar en los controles de texto un texto que desaparece al escribir en el control.
<p>Apellidos:
<input type="text" name="apellidos" size="40" placeholder="Escriba sus dos apellidos">
</p>
El atributo size
El atributo size permite establecer la longitud de los controles de texto (text, password, search, etc.). Por omisión, las cajas suelen tener 20 caracteres de longitud.
Los atributos maxlength y minlength permiten establecer la longitud máxima y mínima, respectivamente, que puede escribir el usuario en un control de texto (text, password, search, etc.).
El atributo autofocus permite indicar el control que debe tener el foco al cargarse el formulario.
Este atributo facilita la accesibilidad del formulario pues permite que el usuario pueda empezar a rellenar el formulario sin necesidad de hacer clic en el elemento. Como el navegador desplaza automáticamente la página hasta la posición del elemento, se recomienda que el elemento con atributo autofocus se encuentren al principio de la página, para que el desplazamiento no confunda al usuario.
Nota: En estos apuntes (lecciones y ejercicios) no se utiliza este atributo porque como en las páginas se incluyen varios formularios en distintas posiciones de la página, el desplazamiento automático a un elemento con atributo autofocus puede confundir al lector.
Controles: <input> y otros
Los controles son los elementos que permiten al usuario introducir información.
La mayoría de controles se obtienen mediante mediante la etiqueta vacía <input>.
Los botones se crean mediante la etiqueta <input> o mediante la etiqueta <button>. La diferencia entre ellos es que <input> sólo puede contener texto, mientras que <button> permite incluir elementos html como imágenes. El contenido del botón <input> se define mediante el atributo value, por lo que sólo puede contener texto. El contenido del botón <button> se escribe dentro del elemento, por lo que puede incluir texto e imágenes.
Normalmente los botones no suelen llevar atributo name, pero se puede poner si se quiere (tendría sentido si un formulario contuviera dos botones de envío y quisiéramos saber en cuál de ellos ha hecho clic el usuario, pero esto no es muy habitual).
Botones Submit mediante <input> o <button>
El botón Submit es el que permite al usuario remitir los datos al servidor. Se crea mediante una etiqueta <input> o <button> cuyo atributo type tiene el valor submit.
Si un botón <input> no tiene definido el atributo value, Firefox muestra el texto "Enviar consulta", mientras que Google Chrome muestra el texto "Enviar", como se comenta en la página de diferencias entre navegadores. Para garantizar el mismo texto en ambos navegadores, en estos apuntes se incluye siempre en los botones Enviar el atributo value con el valor Enviar.
Botones Reset mediante <input> o <button>
El botón Reset restablece los valores iniciales del formulario. Se crea mediante una etiqueta <input> o <button> cuyo atributo type tiene el valor reset.
Si una caja de texto u otro control similar tienen establecidos los atributos value o placeholder, el botón Reset restablece estos valores, pero no deja vacío el control.
<p>Caja de texto: <input type="text" name="texto" value="Bla bla bla"></p>
<p><input type="reset" value="Borrar"></p>
<p>Caja de texto: <input type="text" name="texto" placeholder="Bla bla bla"></p>
<p><input type="reset" value="Borrar"></p>
Caja de texto: <input type="text">
Las cajas de texto de una sola línea se crean mediante una etiqueta <input> cuyo atributo type tiene el valor text.
<input type="text" name="texto">
El atributo value (optativo) permite incluir un texto en la caja de texto para que el usuario lo modifique. HTML 5 introdujo el atributo placeholder, mucho más cómodo para el usuario, ya que no tiene que borrar el texto de ayuda.
Caja de texto de contraseña: <input type="password">
Las cajas de texto de una sola línea específicas para contraseñas se crean mediante una etiqueta <input> cuyo atributo type tiene el valor password.
<input type="password" name="contrasena">
Al escribir en una caja de contraseña, en vez de letras aparecen puntos gruesos. Es importante señalar que estas cajas no proporcionan ninguna seguridad en la transmisión, simplemente ocultan al usuario lo que este escribe.
Número: <input type="number">
Las cajas de texto de una sola línea específicas para números se crean mediante una etiqueta <input> cuyo atributo type tiene el valor number.
En principio, los valores admitidos por el control son números enteros.
Escriba un número: <input type="number" name="numero">
El atributo step permite que el control admita números decimales. Los navegadores alertan al usuario cuando no ha escrito un valor correcto, como mínimo al enviar el formulario.
En el caso de los números decimales:
Chrome admite la coma (,) y el punto (.) como separadores de la parte decimal.
Firefox sólo admite la coma (,) como separador de la parte decimal.
Escriba un número cualquiera: <input type="number" name="numero" step="any">
El atributo min establece un valor mínimo en la respuesta:
Escriba un número mayor o igual que 20: <input type="number" name="numero" min="20">
El atributo max establece un valor máximo en la respuesta:
Escriba un número menor o igual que 100: <input type="number" name="numero" max="100">
El atributo step establece la cantidad, entera o decimal, en la que aumenta o disminuye el valor:
Escriba un múltiplo de 10: <input type="number" name="numero" step="10">
Escriba un valor de 0,5 en 0,5: <input type="number" name="numero" step="0.5">
Para poder escribir cualquier número, el atributo step debe tener el valor any:
Escriba un número cualquiera: <input type="number" name="numero" step="any">
Fecha: <input type="date">
Las cajas de texto de una sola línea específicas para fechas (días, meses, años) se crean mediante una etiqueta <input> cuyo atributo type tiene el valor date. El dato se envía con el formato AAAA-MM-DD donde AAAA es el número de año, MM el número de mes y DD el número de día.
Fecha: <input type="date" name="fecha">
Hora: <input type="time">
Las cajas de texto de una sola línea específicas para tiempos (horas, minutos) se crean mediante una etiqueta <input> cuyo atributo type tiene el valor time. El dato se envía con el formato HH-MM donde HH son las horas y MM los minutos.
Hora: <input type="time" name="hora">
Casilla de verificación: <input type="checkbox">
Las casillas de verificación se crean mediante una etiqueta <input> cuyo atributo type tiene el valor checkbox.
<input type="checkbox" name="casilla">Casilla 1
Si el atributo checked tiene el valor checked, la casilla aparece marcada.
Las casillas de verificación sólo se envían si se han marcado. El atributo value contiene el valor que envía el formulario si la casilla de verificación está marcada. Si el atributo value no está establecido, el formulario envía el valor on.
Los botones radio sólo se envían si se han marcado. El atributo value contiene el valor que envía el formulario si el botón radio está marcado.Si el atributo value no está establecido, el formulario envía el valor on, así que para poder saber cuál ha sido la opción elegida por el usuario es necesario establecer con valores distintos los atributos value de todos los elementos de un botón radio.
Una vez se ha hecho clic en uno de los botones radio, siempre habrá una opción seleccionada. Para desactivar un botón radio, se necesita un botón Reset.
El inconveniente del botón Reset es que reinicia todos los controles del formulario. Este problema no tiene una solución sencilla. Algunos recomiendan incluir en los botones radio una opción neutra, de manera que el usuario pueda cambiar su respuesta sin tener que reiniciar todo el formulario. El problema es que el usuario puede malinterpretar esa opción como una opción más y elegirla a propósito, por lo que se recomienda valorar en cada caso la mejor solución. Quizás en formularios con pocos controles no merezca la pena incluir esa opción neutra, y hacerlo sólo en formularios con muchos controles en los que el usuario tendría que volver a completar todo el formulario si utiliza el botón Reset
El control de selector de color se crea mediante una etiqueta <input> cuyo atributo type tiene el valor color. Permite elegir un color mediante el selector de color proporcionado por el sistema operativo.
<input type="color" name="colorElegido">
El atributo value permite especificar un color inicial. El color se debe indicar en formato hexadecimal (#RRGGBB).
El control de rango se crea mediante una etiqueta <input> cuyo atributo type tiene el valor range. El rango de valores predeterminado es de 0 a 100 (valores enteros).
Indique su nivel: <input type="range" name="rango">
Los atributos min, max y step permiten elegir respectivamente el valor mínimo, el máximo y el incremento.
Indique su nivel (de 1 a 10, de 3 en 3):
<input type="range" name="rango"
min="1" max="10" step="3">
Indique su nivel (de 0 a 1, de 0,1 en 0,1):
<input type="range" name="rango"
min="0" max="1" step="0.1">
El atributo list debería permitir añadir etiquetas al control, pero actualmente (enero de 2023) los navegadores admiten el atributo parcialmente
Si el atributo list contiene el id de un elemento datalist que contiene elementos option con atributos value, el control muestra marcas en la posición correspondiente a esos valores:
Indique su nivel (de 0 a 6):
<input type="range" name="rango"
min="0" max="10" list="lista-rango">
<datalist id="lista-rango">
<option value="2">
<option value="4">
<option value="6">
<option value="8">
</datalist>
Si el elemento datalist contiene elementos option con atributos label, el control debería mostrar esas etiquetas en las posiciones de las marcas, pero actualmente (enero de 2023), ni Chrome ni Firefox lo hacen:
El control oculto se crea mediante una etiqueta <input> cuyo atributo type tiene el valor hidden. Lógicamente, los navegadores no muestran estos controles en la pantalla (aunque pueden verse en el código fuente).
Los controles ocultos se pueden utilizar, por ejemplo, para dividir en varias páginas un formulario largo. El problema de dividir en varias páginas es que cada página es independiente de las demás y HTML no permite relacionar una con otra por lo que no se sabría que la información enviada en el segundo formulario completa la del primero (los lenguajes de programación de servidor, como PHP, sí que disponen de mecanismos para relacionar unas páginas con otras, por ejemplo mediante cookies o sesiones). Una solución es guardar en el segundo formulario la información enviada en el primer formulario en controles ocultos, de manera que cuando el usuario envía el segundo formulario, está enviando a la vez la información del primero y así sucesivamente en los siguientes formularios.
Escriba su nombre: <input type="text" name="nombre">
Escriba su edad: <input type="number" name="edad"><br>
<input type="hidden" name="nombre" value="...">
Hay un caso especial de control oculto. Si un control oculto tiene el atributo name con el valor _charset_ y no tiene atributo value, ese control envía el juego de caracteres de los datos enviados
<input type="hidden" name="_charset_">
Área de texto: <textarea>
Las cajas de texto de varias líneas se crean mediante la etiqueta <textarea>. Los atributos obligatorios rows y cols establecen el número de filas y columnas iniciales de la caja, aunque los navegadores permiten modificarlo arrastrando la esquina inferior derecha.
Si se escribe texto en el interior de la etiqueta, este se muestra en la caja de texto. HTML 5 introdujo el atributo placeholder que puede ser más cómodo para el usuario si tiene que borrar todo el texto incluido.
El problema de mostrar una de las opciones de forma predeterminada es que al recibir el formulario no se puede saber si el usuario ha elegido realmente esa opción o simplemente no ha modificado el control. Por ello, se aconseja incluir una opción en blanco al principio de los menús
El atributo multiple permite elegir varias opciones simultáneamente (con ayuda de la tecla Control o Mayúsculas). En este caso el atributo name debe incluir corchetes ([]) para que se puedan enviar en su caso varios valores en forma de matriz.
