Un formulario en HTML5 es una sección de una página web que permite a los usuarios ingresar y enviar información. Este puede incluir diferentes tipos de campos como cajas de texto, botones de opción, casillas de verificación, botones, etc. La estructura básica de un formulario utiliza la etiqueta <form>, y los distintos elementos de entrada se definen con la etiqueta <input> junto con atributos que especifican el tipo de entrada, tales como "text", "password", "submit", entre otros.
Cuando el usuario completa y envía un formulario, la información se envía a un servidor para ser procesada. El atributo action de la etiqueta <form> especifica la URL a la que se enviarán los datos del formulario, y el atributo method define cómo se enviarán esos datos, comúnmente mediante los métodos "GET" o "POST". HTML5 introduce mejoras en los formularios, ofreciendo nuevos tipos de <input> (como "email", "date", y "url") y atributos adicionales que permiten validación de datos y control de formulario mejorados sin necesidad de JavaScript. Esto facilita la creación de formularios más interactivos y accesibles para los usuarios en la web.
La estructura básica de un formulario se encuentra formada por:
action: Especifica la URL a la que se enviarán los datos del formulario cuando este sea sometido.
method: Define el método HTTP para el envío de datos, comúnmente `GET` (incluye los datos en la URL) o `POST` (envía los datos en el cuerpo de la solicitud).
<form action="URL_DE_PROCESAMIENTO" method="POST">
<!-- Campo de Texto -->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" >
<!-- Campo de Texto -->
<label for="password">Contraseña:</label>
<input type="text" id="password" name="password" required>
<!-- Botón de Envío -->
<input type="submit" value="Enviar">
</form>
Para comprobar que los datos han sido enviados correctamente, se utilizará la siguiente web de procesamiento:
<form action="https://www.htmlquick.com/form-result.php" target="_blank">
Los controles de texto en un formulario se realizan principalmente utilizando la etiqueta <input> con diferentes atributos y tipos para manejar las distintas necesidades del control de texto. A continuación, se presentan algunas de las opciones y atributos que puedes utilizar para controlar la entrada de texto en un formulario HTML5:
<form action="" method="POST">
<label for="username">Nombre de usuario:</label>
<input type="text" id="usuario" name="usuario" required minlength="4" maxlength="15" >
<input type="submit" value="Enviar">
</form>
type: Este atributo define el tipo de campo de entrada. Para texto, se usa type="text".
required: Este atributo indica que el campo debe ser llenado antes de que el formulario pueda ser enviado.
minlength y maxlength: Estos atributos indican la longitud mínima y máxima permitida para el valor del campo de entrada, respectivamente.
Correo Electrónico: Este control válida automáticamente si la entrada tiene formato de correo electrónico.
<input type="email" id="email" name="email" required>
Número : Este campo permite solo números y también puedes especificar valores mínimos y/o máximos con los atributos min y max.
<input type="number" id="age" name="age" min="18">
Fecha: Este control proporciona una interfaz de usuario para seleccionar una fecha.
<input type="date" id="birthdate" name="birthdate">
URL: Este campo valida automáticamente si la entrada tiene formato de URL.
<input type="url" id="website" name="website" required>
Para crear un control de texto de múltiples líneas, se utiliza el elemento <textarea>. El elemento <textarea> crea un área de texto que el usuario puede llenar con múltiples líneas de texto. Este elemento es comúnmente utilizado en formularios HTML (<form>) para recoger inputs de texto de múltiples líneas, como comentarios, descripciones, y demás.
<form action="" method="post" >
<label for="comentario">Comentario:</label>
<textarea id="comentario" name="comentario" rows="4" cols="50" placeholder="Escribe tu comentario...">
</textarea>
<input type="submit" value="Enviar">
</form>
rows: Este atributo define el número de líneas visibles en el área de texto.
cols: Este atributo define el número de columnas (ancho) visible en el área de texto.
name: Este atributo es fundamental para que los datos escritos en el área de texto sean correctamente enviados al servidor cuando el formulario es sometido.
placeholder: Este atributo permite establecer un texto guía o de sugerencia que se muestra en el área de texto antes de que el usuario comience a escribir.
maxlength: Este atributo define la longitud máxima del texto que puede ser ingresado en el área de texto.
Los controles de opción se refieren típicamente a los elementos que permiten a los usuarios seleccionar entre varias opciones, como los botones de radio (<input type="radio">) y las casillas de verificación (<input type="checkbox">).
Los botones de radio permiten a los usuarios seleccionar una opción de un conjunto predefinido. Hay que tener en cuenta que todos los botones de radio que pertenecen a un mismo grupo deben tener el mismo nombre (name), de esta manera, sólo uno puede ser seleccionado a la vez.
<form action="" method="post">
<label for="radio1" > Rojo </label>
<input type="radio" id="radio1" name="color" value="rojo">
<label> Verde </label>
<input type="radio" id="radio2" name="color" value="verde">
<label for="radio3"> Azul </label>
<input type="radio" id="radio3" name="color" value="azul"> Azul
<input type="submit" value="Seleccionar Color">
</form>
Las casillas de verificación permiten a los usuarios seleccionar múltiples opciones de un conjunto. A diferencia de los botones de radio, las casillas de verificación no requieren un nombre compartido para funcionar de manera independiente.
<form action="" method="post">
<label for="manzana"> Manzana </label>
<input type="checkbox" id="manzana" name="manzana" value="manzana">
<label for="naranja"> Naranja</label>
<input type="checkbox" id="naranja" name="naranja" value="naranja">
<label for="uva"> Uva</label>
<input type="checkbox" id="uva" name="uva" value="uva">
<input type="submit" value="Seleccionar Frutas">
</form>
name: Especifica el nombre del control y es usado para identificar el dato después del envío del formulario.
value: Define el valor que será enviado al servidor cuando el formulario se someta.
checked: Especifica si el control debería estar seleccionado por defecto cuando la página carga.
Una lista de opciones generalmente se refiere a un elemento <select> que proporciona una lista desplegable de opciones de las cuales el usuario puede elegir una. Cada opción dentro del <select> se define con un elemento <option>.
<label for="coches">Elige un coche:</label>
<select id="coches" name="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Para garantizar que un formulario en HTML sea tanto accesible como tenga validación de datos adecuada, debemos prestar atención a varios aspectos importantes. La accesibilidad asegura que todos los usuarios, incluidos aquellos con discapacidades, puedan utilizar el formulario, mientras que la validación es importante para asegurar que la información proporcionada sea completa y correcta antes de que se envíe el formulario.
Etiquetas asociadas con controles de formulario: Usa la etiqueta <label> para cada entrada y asocia la etiqueta con el control del formulario mediante el atributo for, que debe coincidir con el id del control del formulario. Esto permite que las tecnologías de asistencia identifiquen la relación entre la etiqueta y el control del formulario.
Instrucciones claras: Proporciona instrucciones claras para que los usuarios sepan qué deben hacer con cada campo del formulario.
Uso de fieldset y legend para grupos de controles: Cuando tienes un conjunto de controles relacionados, como botones de opción o casillas de verificación, agrúpalos con <fieldset> y proporciona una leyenda con <legend>.
El botón "Submit" en un formulario HTML es utilizado para enviar los datos del formulario al servidor. Cuando un usuario hace clic en el botón "Submit", los datos de todos los campos del formulario se envían a la URL especificada en el atributo action del elemento <form>, utilizando el método de solicitud HTTP definido en el atributo method (comúnmente "GET" o "POST").
<input type="submit" value="Enviar formulario">
<!-- o -->
<button type="submit">Enviar formulario</button>
El botón "reset" se utiliza para restablecer todos los campos del formulario a sus valores predeterminados. Esto significa que cualquier entrada o selección realizada por el usuario será eliminada y los campos del formulario volverán a su estado inicial.
<input type="reset" value="Reiniciar formulario">
<!-- o -->
<button type="reset">Reiniciar formulario</button>
El elemento HTML <fieldset> se utiliza para agrupar elementos relacionados dentro de un formulario y combina muy bien con la etiqueta <legend>. No sólo proporciona una manera organizada de manejar grupos de campos, sino que también ayuda a mejorar la accesibilidad del formulario para las personas que utilizan lectores de pantalla u otras tecnologías asistivas.
El elemento HTML <legend> representa un título para el contenido del elemento <fieldset> al que pertenece. Mejora la comprensión del grupo de campos encapsulado dentro de un fieldset .
<fieldset>
<legend>Información de Contacto</legend>
<!-- Campos del formulario -->
</fieldset>
Una expresión regular, a menudo abreviada como "regex", es una secuencia de caracteres que define un patrón de búsqueda. En el contexto de la validación de formularios en HTML o en la manipulación de texto en general, las regex se utilizan para determinar si una cadena de caracteres coincide con un patrón específico.
Sintaxis Básica de Regex:
Caret ^: Indica el inicio de una línea.
Dólar $: Indica el final de una línea.
Punto . : Coincide con cualquier carácter único, excepto los saltos de línea.
Asterisco *: Coincide con 0 o más repeticiones del carácter anterior.
Más +: Coincide con 1 o más repeticiones del carácter anterior.
Interrogación ?: Hace que el carácter anterior sea opcional (0 o 1 coincidencia).
Barra invertida \: Se utiliza para escapar un carácter especial.
Corchetes []: Coincide con cualquier carácter dentro de los corchetes.
Guion - (dentro de []): Especifica un rango de caracteres.
Caret ^ (dentro de []): Niega el conjunto de caracteres, coincidiendo con cualquier cosa fuera del conjunto.
Paréntesis (): Agrupa parte de la regex.
Barra vertical |: Operador lógico "O".
Llaves {}: Especifica el número exacto o un rango de ocurrencias.
\d: Coincide con cualquier dígito.
\w: Coincide con cualquier carácter alfanumérico.
\s: Coincide con cualquier espacio en blanco.
No olvides añadir etiquetas <label> para mejorar la accesibilidad y, si es posible, realiza validaciones tanto en el lado del cliente como del servidor para asegurar que los datos enviados sean válidos y seguros. Si usas JavaScript para validación en el cliente, asegúrate de validar también en el servidor, ya que las validaciones del cliente pueden ser eludidas.