Los formularios son la parte fundamental de las paginas web para que los usuarios puedan enviar información a los servidores.
Estructura básica:
La estructura básica de un formulario se compone de 4 elementos:
<form>:
Es la etiqueta que engloba el formulario.
<label>:
Sirve para escribir el nombre del campo a rellenar. Debe tener el atributo for al cual se le indica un id que lo que hará será emparejar el label con su input correspondiente.
<input>:
Sirve para crear un campo que permitirá al usuario interactuar. El único atributo obligatorio del input es name.
<button>:
Crea un botón que permitirá enviar el formulario.
Forma 1 asociar <input> con <label>:
Forma 2 asociar <input> con <label>:
Ejemplo:
Tipos de <input>:
Input
Descripción
Ejemplo
button
Visualmente es igual a un <button>, pero el formulario no se enviará.
submit
Se utiliza para enviar el formulario.
date
Se utiliza para introducir una fecha.
time
Se utiliza para introducir una hora.
datetime-local
Fecha y hora, no funciona en firefox.
month
Se utiliza para introducir un mes.
week
Se utiliza pra introducir el número de semana del año.
search
Se utiliza para las barras de búsqueda.
tel
Se utiliza para introducir números telefónicos.
email
Se utiliza para introducir un email.
password
Se utiliza para contraseñas.
url
Se utiliza para introducir URLs.
color
Se utiliza para especificar un color.
number
Se utiliza para valores numéricos.
range
Se utiliza para establecer un rango.
Atributo
Descripción
step
Atributo para determinar de cuanto en cuanto se mueve la barra.
min
Valor mínimo.
max
Valor máximo.
reset
Se utiliza para resetear el formulario.
text
Valor por defecto.
radio
Permite seleccionar una única opción de una lista de opciones relacionadas. Deben tener el mismo valor en el atributo name para que funcione correctamente. El atributo checked selecciona una opción por defecto.
checkbox
Permite seleccionar varias opciones de una lista de opciones relacionadas. Deben tener el mismo valor en el atributo name para que funcione correctamente. El atributo checked selecciona una o varias opciones por defecto.
<select>:
Crea una lista de opciones donde podemos seleccionar una o varias opciones. Cada opción irá dentro de una etiqueta <option> <option/>. El atributo multiple permite seleccionar varias opciones con la tecla ctrl. Si hay muchas opciones se pueden ordenar por categorías a través de la etiqueta <optgroup> con el atributo label para nombrar la categoría.
Select
Ejemplo
Select normal
Select con atributo multiple
Select con categorías
<datalist>:
Funciona de forma similar al <select> solo que esta contiene un filtro para obtener más rapido las opciones disponibles. Está compuesto por un input el cual tiene un atributo llamado list al que se le asigna el id del <datalist> al que se quiere acceder.
Otros elementos:
<fieldset>:
Se utiliza para agrupar elementos dentro de un formulario.
<legend>:
Representa una etiqueta para el contenido del fieldset.
<file>:
Este input se utiliza para cargar archivos y enviarlos desde un formulario. Es necesario indicar en la etiqueta <form> el atributo enctype="multipart/form-data". Con esto se asegura que las cabeceras del formulario indican que se está enviando archivos adjuntos.
multiple;
Atributo booleano el cual da la opción al usuario de pulsar la tecla CTRL para adjuntar varios archivos a la vez, y no uno solo.
<meter>:
Representa un valor dentro de un rango conocido. Sus atributos son:
min:
Valor mínimo.
max:
Valor máximo.
value:
Valor actual.
low:
Hasta que valor son valores bajos.
high:
Hasta que valor son valores altos.
optimum:
Valor óptimo.
<progress>:
Representa el progreso de una tarea. Sus atributos son:
min:
Valor mínimo.
max:
Valor máximo.
value:
Valor actual.
<textarea>:
Se utiliza para introducir texto en un formulario. Sus atributos son:
col:
Número de columnas.
row:
Número de filas.
wrap:
Indica si el texto debe enviarse recolocado o como se ve visualmente.
Ejemplo:
Atributos:
action:
Define la ubicación (URL) donde se deben enviar los datos recopilados del formulario cuando se envía.
method:
Establece el método http (GET o POST) para enviar el formulario.
name:
Nombre del formulario y los input. Sirve para el posterior procesamiento de los datos.
target:
Url de la página donde se abrirá el formulario tras ser enviado.
enctype
Codificación para el envío del formulario. Importante para envío de archivos.
autocomplete:
Activa o desactiva (on o off) el autocompletado para los campos del formulario.
novalidate:
Atributo booleano. El formulario obvia la validación HTML5.
value:
Valor por inicial del input.
placeholder:
Da una pista o indicación de lo que el usuario tiene que introducir.
size:
Tamaño visual (número de carácteres) del campo de datos.
required:
Hace que un campo sea obligatorio.
readonly:
Hace que un campo sea de solo lectura.
disabled:
Desactiva el campo, no se podrá escribir en el.
min - max:
Establecen el mínimo y máximo de un campo numérico.
minlenght - maxlenght:
Establece el minimo y máximo de caracteres de un campo de texto.
selected:
Equivale a checked en los select, sirve para establecer una opción por defecto.
autofocus:
Para poner el foco por defecto al cargar el formulario.
spellcheck:
Atributo booleano mediante el cuál se indica al navegador si debe revisar la ortografía del texto escrito en dicho elemento.
