Introducción a los Formularios en HTML

Hola y bienvenido a un nuevo post, donde voy a tratar un tema de mucha importancia tanto para el usuario como para la gestión de datos y es que cuando mencionamos términos como “procesar información”, estamos hablando específicamente de un formulario, pero ¿qué es un formulario?

Es un elemento indispensable en una página web, que nos permite la interacción entre el usuario y el sitio web. Un formulario resulta esencial para muchas tareas entre las cuales están: iniciar sesión o registrarse en algún sitio o servicio de internet, buscar, enviar comentarios, entre muchas otras tareas.

Un formulario se compone de diferentes elementos que permiten al usuario ingresar datos. Estos datos son luego enviados a un servidor para su procesamiento o pueden ser manipulados en el cliente utilizando JavaScript, aunque en este post me enfocare exclusivamente en el lado de HTML, no pasaré por alto mencionar las demás formas que existen para manipular o gestionar los datos de un formulario mediante otras técnicas.

En esta guía la cual he nombrado como “Formularios un recorrido profundo hacia los formularios en HTML” aprenderás a como crear un formulario, conocerás todo desde su creación, cada uno de sus elementos y atributos, también, aprenderás a construirlo y a seccionar sus partes de modo que aspectos como el de accesibilidad, no pasen desapercibidos, conocerás cada uno de los elementos ya sea de, agrupación, selección única, selección múltiple entre otros, conocerás los distintos métodos de envío de un formulario, también, las formas que existen para validad la información antes de su envío al servidor, entre muchas cosas más.

Por ahora te invito a seguir leyendo y a que te prepares, acompáñame a conocer todo lo que conlleva el uso y creación de formulario en HTML, de antemano te anticipo que esta es una guía muy completa compuesta tanto de ejemplos prácticos como conceptos teóricos, así que siéntete cómodo y prepárate para conocer conceptos que quizás antes no conocías porque te aseguro que así será. ¡Empecemos!

Breve historia de los formularios

Los formularios en HTML han sido una parte fundamental de la web desde sus primeros días. Se remontan a la década de 1990, cuando Tim Berners-Lee inventó la World Wide Web. Los primeros formularios eran simples y se usaban principalmente para recopilar información de los usuarios, como direcciones de correo electrónico o comentarios.

Con el tiempo, los formularios en HTML evolucionaron para incluir una variedad de elementos de entrada, como campos de texto, casillas de verificación, botones de opción y más. Esto permitió a los desarrolladores crear formularios más complejos y versátiles para tareas como registros de usuarios, búsquedas en línea, compras en línea y mucho más.

La introducción de JavaScript en el navegador web permitió una mayor interactividad en los formularios, lo que permitió validaciones en tiempo real, autocompletado y otras características avanzadas. Además, la llegada de CSS permitió personalizar el aspecto y la presentación de los formularios.

Hoy en día, los formularios en HTML siguen siendo una parte esencial de la experiencia web, utilizados en una amplia gama de aplicaciones, desde el inicio de sesión en redes sociales hasta la reserva de boletos de avión en línea. Continúan evolucionando con las últimas especificaciones de HTML y tecnologías relacionadas para brindar una experiencia de usuario más rica y efectiva en la web.

Fundamentos de los Formularios

Estructura Básica del Formulario

Un formulario HTML se crea con la etiqueta <form>, que actúa como un contenedor para diferentes tipos de elementos de entrada, como campos de texto, botones de opción, casillas de verificación, botones simples, etc. De igual forma al ser un componente para recolectar información para su procesamiento, el mismo necesita realizar acciones, las cuales se realizan a través del atributo “action”, estas acciones requieren de formas de envío, llamadas “métodos”, definida por el atributo “method”, ambos atributos te los explico a continuación:

Estos atributos deben ir en el cuerpo del formulario sin importar lo básico que este sea, ya que, de no ser así, la función para la que fueron creados los formularios no tomaría sentido.

Los atributos más importantes de la etiqueta <form> o de un formulario son

• Action: Especifica la URL del servidor al que se enviarán los datos del formulario. Cuando el formulario se envía, los datos de entrada son enviados a esta URL para su procesamiento
• Method: Define cómo se enviarán los datos al servidor.
  • Métodos de envío:

El atributo method cuenta con dos métodos de envío:

• Método GET: Mediante el método GET los datos del formulario son agregados a la URL de la forma [nombre]/[valor]. (forma insegura)
  • Método POST: Envía los datos del formulario en el cuerpo de la solicitud HTTP, lo que es más seguro para datos sensibles. (forma segura)

Mi primer formulario

Para empezar a crear un formulario necesitaremos una serie de elementos básicos, los cuales le darán una estructura muy básica al formulario, pero que servirá como punto de partida para, posteriormente ir mejorándolo con más elementos que iremos incorporando a medida los vayamos conociendo:

En este primer acercamiento a la creación de un formulario, creare un ejemplo simulando un log in de una página web, (un ejemplo que nos encontramos casi a diario al navegar por internet), este formulario contará con algunos elementos muy básicos para que entiendas mejor el concepto:

“Por ahora no te preocupes si no entiendes o te pierdes con el nombre o tipo de elementos, a lo largo de la guía, iras topándote con cada uno de ellos, solo disfruta el proceso de ver y aprender, ya llegara la práctica”

Los elementos que necesitaremos para empezar son:

• Un elemento para definir el formulario: Sera el cuerpo principal del formulario donde podremos incluir todos los demás elementos, sería el elemento <form></form>
• Dos elementos para definir el nombre y contraseña de los campos de texto: Será el lugar donde se define el nombre del campo a rellenar con la información que corresponda, en este caso, serán dos elementos <label>
• Dos elementos para recibir el nombre y contraseña: Serán los elementos que recibirán lo que ingrese el usuario: en este caso serán dos Etiquetas <input =”text”> y <input =” password”> respectivamente
• botón de envío: Por último, necesitaremos un elemento de botón para poder enviar el formulario

Ejemplo

<form action="url">
        <label for="nombre">Nombre</label>
        <input type="text" id="nombre" > <br>
        
        <label for="pass">Contrasena</label>
        <input id="pass" type="password">
        <input type = "submit">
</form>

Resultado

Elementos de Formulario Comunes

Dentro de un formulario, se pueden utilizar diferentes elementos para capturar distintos tipos de datos del usuario. Estos elementos son creados utilizando la etiqueta <input>, que es un elemento muy versátil y dinámico, tanto que hasta nos permite configurarlo para diferentes tipos de entrada modificando su atributo type. Debido a su gran variabilidad he decidido crear grupos de elementos que tengan similitudes, para una mayor comprensión del tema.

Las categorías son las siguientes:

Entrada de Texto y Variaciones

• <input type=”text”>
• <input type =” password”>
• <textarea>

Este tipo de elementos te permiten ingresar texto de forma corta y larga, en el caso de un campo simple de texto, sería para incluir un nombre y un apellido, por ejemplo, <input type=”text”>, para texto largo, sería como un comentario de esos que nos encontramos en cualquier web incluso en redes sociales como Facebook, en este caso estaríamos utilizando, <textarea>, aquí se incluye también al campo para contraseña, que te permite ingresar la contraseña dentro de un formulario con la particularidad que oculta el texto ingresado, en este caso sería como <input type=”password”>.

Veamos un ejemplo de cómo se implementan estos tres elementos

<form action="">
    <label for="username">Usuario:</label>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password"><br><br>
    
    <label for="comments">Comentarios:</label><br>
    <textarea id="comments" name="comments" cols="30" rows="10">Esta es un área para dejar un comentario</textarea><br><br>
    
    <input type="submit" value="Enviar">
</form>

Resultado

Selección y Opciones

• <Input type=” checkboxes” >
• <Input type=” radio” >
• <select><option></ select>

Los elementos de selección de opciones permiten seleccionar precisamente eso, “opciones”, existen tres tipos de elementos para esto, podemos seleccionar opciones múltiples, o realizar una única opción dentro de varias propuestas, finalmente podremos elegir dentro de una lista predeterminada una de esas opciones, los elemento que permiten hacer eso son:

• Checkboxes: También llamada “casilla de verificación” muy útil cuando tenemos varias opciones y se requiere enviar más de una, un ejemplo de esto sería, cuando nos aparece un formulario que nos pide que seleccionemos nuestros Hobbies, las opciones serían: jugar futbol, ver televisión, jugar a la play etc.
• radio: Otro elemento de selección es el elemento radio, el cual nos permite seleccionar entre dos o más opciones con la diferencia que solo una entre todas será la seleccionada, no es posible seleccionar más de una.
• Lista desplegable de opciones: El otro elemento que nos permite elegir una opción entre una lista de varias opciones es la que utilizamos por medio del elemento <select> y definimos las opciones a elegir mediante el elemento <option>, este tipo de elementos de selección es muy útil por ejemplo en formularios donde se requiera enviar información concreta ya establecida por el programador como podría ser: País de origen; Honduras, Nicaragua, Costa Rica, Estados Unidos, Canadá, México etc.

Ejemplo

Imagina que estamos creando un formulario para una encuesta sobre preferencias de comida. En este formulario, queremos preguntar a los usuarios sobre sus frutas favoritas (pueden elegir varias), su bebida preferida (pueden elegir solo una) y su país de residencia.

<form>
    <h2>Encuesta sobre Comida</h2>
    
    <!-- Checkbox para seleccionar varias opciones -->
    <label>Frutas favoritas:</label><br>
    <input type="checkbox" name="fruit" value="manzana"> Manzana<br>
    <input type="checkbox" name="fruit" value="banana"> Banana<br>
    <input type="checkbox" name="fruit" value="naranja"> Naranja<br>
    
    <!-- Radio buttons para seleccionar una sola opción -->
    <label>Bebida preferida:</label><br>
    <input type="radio" name="drink" value="agua"> Agua<br>
    <input type="radio" name="drink" value="jugo"> Jugo<br>
    <input type="radio" name="drink" value="refresco"> Refresco<br>
    
    <!-- Select para elegir de una lista desplegable -->
    <label>País de residencia:</label><br>
    <select name="country">
        <option value="argentina">Argentina</option>
        <option value="brasil">Brasil</option>
        <option value="colombia">Colombia</option>
        <!-- Más opciones aquí -->
    </select><br><br>
    
    <input type="submit" value="Enviar">
</form>

En este ejemplo ocurrió lo siguiente:

1. <input type="checkbox">: Permite al usuario seleccionar varias opciones. En este caso, se utiliza para que los usuarios puedan marcar todas las frutas que les gustan.
2. <input type="radio">: A diferencia del checkbox, los radio buttons permiten al usuario seleccionar solo una opción de un grupo. Aquí, se usan para elegir una sola bebida preferida.
3. <select><option></select>: Proporciona una lista desplegable de opciones. En este ejemplo, permite a los usuarios seleccionar su país de residencia de una lista.

Resultado

Campos de Entrada Especializados o avanzados

Los campos de entrada especializados en HTML se utilizan para recoger información específica, ofreciendo características adicionales de validación y facilitando la interacción del usuario. Con este tipo de elementos se nos abren muchas posibilidades ya que contamos con múltiples opciones, ya sea para correo electrónico, o si recogeremos números telefónicos, así como rangos, fecha del registro elegir algún color, enviar una URL entre otros,

Veamos cada uno de estos elementos:

• Correo electrónico: Este elemento es uno de los infaltables en un formulario web, ya que es donde se recoge y envía la información de retroalimentación al usuario que se ha registrado, este lo definimos mediante el elemento <input type=” email”.
• Teléfono: También es posible recibir un número telefónico por parte del usuario, esto es mediante el elemento <input type =”tel”>
• Tiempo: Un usuario puede registrar el tiempo en el que lleno o envió la información desde el formulario seleccionar una hora especifica de algún otro evento, sea reunión, entrevista etc. para eso definimos al formulario un elemento <input type =” time”>.
• Fechas: también es posible el manejo de fecha dentro de un formulario, esta opción generalmente se utiliza cuando necesitamos la fecha de nacimiento del usuario. Definimos esta opción por medio de <input type = “date”> la misma ya cuenta con su formato predefinido
• Color: Es posible que en más de algún formulario exista la opción de seleccionar un color dependiendo la necesidad, podemos incluir esa opción mediante el elemento <input type=” color”>
• Archivos: podemos pedir al usuario que envié archivos a su solicitud, eso se logra con el elemento <input type=” file”>
• Rango: Un formulario puede contener rangos, por ejemplo, se puede solicitar al usuario en escoja un rango de evaluación del servicio recibido dentro de un rango de valores previamente establecido en el formulario, esto lo podemos hacer con el elemento <input type = “range”>
• URL: un formulario también puede incluir url, ya se apara dar más información al usuario o para que ingrese a alguna dirección especifica, eso lo hacemos con el elemento <input type = “url”>
• búsquedas: Dependiendo del tamaño de formulario, este también puede incluir la opción de búsqueda, eso se hace mediante el elemento <input type = “search”>
• Números: Algo muy común es que permitamos al usuario ingresar números en algún campo de texto, uno de los usaos más comunes es cuando el usuario tenga que seleccionar su edad mediante valores por lo general del 1 a 100 y lo hacemos de la forma, <input type=»number»>

Ejemplo

Aquí tienes un ejemplo de cada uno de estos elementos:

<form action="procesar.php" method="post">
    <!-- Correo Electrónico -->
    <label for="email">Correo Electrónico:</label>
    <input type="email" id="email" name="email" placeholder="Ingresa tu email" required>

    <!-- Teléfono -->
    <label for="phone">Teléfono:</label>
    <input type="tel" id="phone" name="phone" placeholder="Ingresa tu teléfono">

    <!-- Tiempo -->
    <label for="appointmentTime">Tiempo:</label>
    <input type="time" id="appointmentTime" name="appointmentTime">

    <!-- Fechas -->
    <label for="birthdate">Fechas:</label>
    <input type="date" id="birthdate" name="birthdate">

    <!-- Color -->
    <label for="favoriteColor">Color:</label>
    <input type="color" id="favoriteColor" name="favoriteColor">

    <!-- Archivos -->
    <label for="document">Archivos:</label>
    <input type="file" id="document" name="document">

    <!-- Rango -->
    <label for="rating">Rango:</label>
    <input type="range" id="rating" name="rating" min="1" max="5">

    <!-- URL -->
    <label for="website">URL:</label>
    <input type="url" id="website" name="website" placeholder="Ingresa la URL de tu sitio web">

    <!-- Búsquedas -->
    <label for="searchQuery">Búsquedas:</label>
    <input type="search" id="searchQuery" name="searchQuery" placeholder="Buscar...">

    <!-- Números -->
    <label for="age">Números:</label>
    <input type="number" id="age" name="age" min="1" max="100" placeholder="Edad">

    <!-- Botón de Envío -->
    <input type="submit" value="Enviar">
</form>

Resultado

Botones y Acciones

• <input type = “submit”>
• <input type = “reset”>
• <button></button>

Los botones de acción son los que nos invitan a hacer clic sobre ellos y para que realicen una acción determinada, en este caso, tratamos con tres tipos de elementos; botón de reinicio del formulario, botón de envío, y botón simple para incorporar acciones mediante JavaScript, veamos cada uno deellos.

• botón de submit  (enviar): es quizás el botón más importante del formulario ya que por medio de este es que se envían los datos para su posterior procesamiento y se crea de la forma <input type = “submit”>
• botón de reinicio: Este tipo de botóncumple su función cuando el formulario es de múltiples campos y tenemos que rellenar muchos de ellos, para evitar borrar campo por campo, solo damos clic en este botón y el formulario se limpiara automáticamente y lo creamos de la forma <input type = “reset”>
• botón simple: El elemento que se utiliza para definir algún evento mediante JavaScript, ya sea para algún tipo de mensaje al usuario o que desencadene diversas acciones y lo creamos de la forma <Button type = “button” onclick=”miFuncionJavaScript()”>Haga clic aquí</button>

Ejemplo

<form action="/submit_form" method="post">
    <!-- Campos de entrada básicos -->
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name"><br><br>

    <!-- Botón de envío -->
    <input type="submit" value="Enviar">

    <!-- Botón de restablecimiento -->
    <input type="reset" value="Restablecer">

    <!-- Botón genérico -->
    <button type="button">Click Me!</button>
</form>

Resultado

Etiquetado y Accesibilidad

• Elemento <label>
• Atributos de accesibilidad
• Usabilidad y navegación por teclado

En la creación de formularios web, los conceptos de «etiquetado» y «accesibilidad» son claves para garantizar que los formularios no solo sean funcionales, sino también accesibles para todos los usuarios, incluyendo aquellos con discapacidades especiales. La accesibilidad es indispensable para cumplir con las expectativas web modernas, asegurando una correcta interpretación y navegabilidad por parte de los navegadores y dispositivos de asistencia.

Los elementos fundamentales en este aspecto son:

• Correcto etiquetado de campos: Esto asegura que cada campo en el formulario sea fácilmente identificable tanto para los usuarios como para las tecnologías asistivas. Esto se logra principalmente a través del elemento <label>.

Veamos el siguiente ejemplo:

<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre">

• Atributos de Accesibilidad: Estos atributos ayudan a mejorar la experiencia de los usuarios con discapacidades, permitiendo una mejor interacción con el contenido del formulario. Y aunque existe una gran variedad de estos, es importante mencionar algunos de vital importancia, por lo menos familiarizarse con unos cuantos puede hacer una gran diferencia

Veamos algunos de ellos:

• aria-label se utiliza para definir una etiqueta de texto que describe el propósito de un elemento. Es especialmente útil cuando no hay un texto visible que describa el elemento.
• aria-labelledby se utiliza para hacer referencia al ID de otro elemento que sirve como etiqueta para el elemento actual. Es útil cuando la etiqueta está separada del elemento que describe.
• aria-describedby: Proporciona una descripción extendida para un elemento. Es útil para dar más contexto o instrucciones detalladas.
• aria-hidden: Indica si un elemento está visible o no para las tecnologías de asistencia. Esto puede ser útil para ocultar elementos puramente decorativos que no agregan información importante.
• aria-live: Indica que un elemento se actualizará, y las tecnologías de asistencia deben estar atentas a esos cambios. Es muy útil para contenido dinámico como feeds de noticias o notificaciones.
• aria-pressed: Usado para botones de palanca para indicar si están activados o no.
• aria-expanded: Indica si los elementos asociados a un elemento colapsable están actualmente expandidos o no. Es comúnmente usado en menús desplegables o acordeones.
• aria-checked: Similar a aria-pressed, pero específicamente para checkboxes, indicando si están marcados o no.
• role: Aunque ya mencionado, es importante resaltar que el atributo role tiene muchos valores posibles, cada uno indicando un tipo diferente de componente de interfaz, como button, dialog, menu, progressbar, entre otros

Veamos un par ejemplos básicos de como implementar estos atributos:

Ejemplo con aria-label

<input type="text" id="email" name="email" aria-label="Dirección de Correo Electrónico">

En este ejemplo estamos definiendo un atributo arial-label donde especificamos de que trata el campo en este caso, indicamos que el campo en cuestión se trata de un campo para ingresar un correo electrónico

Ejemplo usando aria-labelledby

<span id="nombreLabel">Nombre:</span><br>
<input type="text" aria-labelledby="nombreLabel">

Aquí, el campo de entrada está etiquetado por un elemento <span> separado, asegurando que las tecnologías de asistencia puedan identificar correctamente la etiqueta del campo.

• Usabilidad y Navegación con Teclado: Asegurarse de que los formularios sean fácilmente navegables con el teclado y que los elementos interactivos sean accesibles y comprensibles. En este punto, existe una serie de termino clave que vale la pena señalar y que no se pueden pasar por alto, estos conceptos teóricos más que prácticos, es importante que los conozcas como desarrollador, ya que inevitablemente te los tendrás que encontrar en tus proyectos mas temprano que tarde.

• Secuencia Lógica de Tabulación: Los elementos en un formulario deben ser accesibles en un orden lógico y predecible cuando se navega con la tecla Tab. Esto significa que el orden de tabulación sigue la secuencia visual y lógica del contenido.
  • Elementos Enfocables: Todos los elementos interactivos, como campos de entrada, enlaces y botones, deben ser enfocables y operables con el teclado. Por ejemplo, un usuario debe poder activar un botón simplemente presionando la tecla Enter o Espacio.
  • Indicadores Visuales de Enfoque: Cuando un elemento es enfocado mediante la navegación con teclado (por ejemplo, un campo de formulario o un enlace), debe haber una indicación visual clara. Esto se logra a menudo mediante un contorno o un cambio de color.
  • Evitar trampas de teclado: Asegúrate de que los usuarios de teclado puedan salir de cualquier parte del formulario o componente web sin tener que usar un ratón. Por ejemplo, los menús desplegables y los modales no deben atrapar el enfoque del teclado.
  • Accesos directos de teclado: Proporcionar atajos de teclado para funciones comunes puede mejorar significativamente la accesibilidad, especialmente en formularios largos o complejos.
  • Gestión de enfoque en aplicaciones de una sola página (SPA): En las SPA, donde el contenido cambia sin recargar la página, es importante gestionar el enfoque del teclado para llevar a los usuarios a nuevas secciones de contenido cuando estas se cargan.

Un ejemplo más completo que toma en cuenta estos aspectos sería el siguiente:

<form>
    <!-- Utilizando aria-label -->
    <input type="email" aria-label="Correo electrónico" placeholder="Correo electrónico"><br><br>

    <!-- Utilizando aria-labelledby -->
    <label id="nameLabel" for="name">Nombre:</label>
    <input type="text" id="name" aria-labelledby="nameLabel"><br><br>

    <!-- Utilizando aria-describedby -->
    <label for="password">Contraseña:</label>
    <input type="password" id="password" aria-describedby="passwordHelp">
    <div id="passwordHelp">Tu contraseña debe tener al menos 8 caracteres, incluyendo un número y un símbolo.</div><br><br>

    <input type="submit" value="Enviar">
</form>

Resultado

En este ejemplo, un usuario podría navegar fácilmente a través de los campos utilizando la tecla Tab, y la secuencia de tabulación seguiría el orden visual del formulario.

Atributos de Formulario

Los formularios en HTML pueden tener atributos con los cuales se controlan su funcionamiento y apariencia. Estos atributos pueden ser numerosos, sin embargo, a través de estos atributos, es posible personalizar la experiencia del usuario y garantizar la integridad de los datos enviados.

Veamos algunos de los más comunes formularios

• action: Este atributo se utiliza en el elemento <form> para especificar la URL a la que se enviarán los datos del formulario una vez que el usuario lo envíe. Debes usarlo siempre que desees procesar los datos del formulario en un servidor.
• method: Se utiliza en el elemento <form> para especificar el método HTTP que se utilizará para enviar los datos del formulario al servidor. Los valores comunes son «GET» y «POST«. Utiliza «GET» cuando desees obtener datos del servidor y «POST» cuando quieras enviar datos al servidor de manera segura.
• name: Se aplica a elementos como <input>, <select>, y <textarea> para darles un nombre que se utilizará cuando se envíen los datos del formulario. Úsalo siempre para identificar los campos de entrada.
• value: Se utiliza en elementos como <input> para establecer un valor predeterminado en el campo. Debes usarlo cuando quieras proporcionar un valor inicial para un campo.
• placeholder: Este atributo se emplea en elementos de entrada para proporcionar un texto de ejemplo que se muestra en el campo antes de que el usuario introduzca datos. Úsalo para indicar qué tipo de información se espera en el campo.
• required: Se utiliza para especificar que un campo de entrada es obligatorio y no puede estar vacío antes de enviar el formulario. Debes usarlo en campos que son esenciales para la operación del formulario.
• disabled: Este atributo desactiva temporalmente un elemento de formulario, lo que significa que el usuario no podrá interactuar con él. Úsalo cuando quieras mostrar un campo que no debe ser modificado por el usuario.
• readonly: Se aplica a elementos de entrada como <input> y <textarea> para hacer que el campo sea de solo lectura, lo que significa que el usuario puede ver el contenido, pero no modificarlo. Úsalo cuando quieras mostrar información que no debe ser editada por el usuario.

Ejemplo

<form action="submit_profile.php" method="POST">
    <!-- Campo de Nombre con placeholder y name -->
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name" placeholder="Ingresa tu nombre" required><br><br>

    <!-- Campo de Email con valor predeterminado y readonly -->
    <label for="email">Email (no editable):</label>
    <input type="email" id="email" name="email" value="usuario@example.com" readonly><br><br>

    <!-- Campo de Edad con name y required -->
    <label for="age">Edad:</label>
    <input type="number" id="age" name="age" required><br><br>

    <!-- Campo de Ciudad con placeholder, name y disabled -->
    <label for="city">Ciudad (no modificable):</label>
    <input type="text" id="city" name="city" placeholder="Ciudad" value="Ciudad Ejemplo" disabled><br><br>

    <!-- Botón de envío -->
    <input type="submit" value="Actualizar Perfil">
</form>

Resultado

Este formulario simula una situación en la que un usuario está actualizando su perfil, con ciertos campos que no se pueden modificar (como el correo electrónico y la ciudad) y otros que son obligatorios

Etiquetas de Agrupación y Estructura

• <fieldset>
• <legend>

La organización y estructura dentro de un formulario son clave para crear una experiencia de usuario clara y efectiva. Las etiquetas de agrupación ayudan a segmentar y ordenar los elementos del formulario, facilitando tanto la navegación como la comprensión por parte del usuario y mejorando la accesibilidad.

Ejemplo

<form action="submit_contact.php" method="POST">
    <!-- Fieldset para información personal -->
    <fieldset>
        <legend>Información Personal</legend>
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
    </fieldset>

    <!-- Fieldset para detalles de contacto -->
    <fieldset>
        <legend>Detalles de Contacto</legend>
        <label for="phone">Teléfono:</label>
        <input type="tel" id="phone" name="phone"><br><br>

        <label for="address">Dirección:</label>
        <input type="text" id="address" name="address"><br><br>
    </fieldset>

    <!-- Botón de envío -->
    <input type="submit" value="Enviar">
</form>

El uso de <fieldset> y <legend> ayuda a organizar mejor el formulario y lo hace más accesible, especialmente para usuarios que utilizan lectores de pantalla.

Estos elementos también mejoran la estructura visual del formulario, haciendo que sea más fácil de entender y usar

Resultado

Etiqueta de agrupación

Las etiquetas <fieldset> y <legend> se utilizan para agrupar elementos relacionados dentro de un formulario. Esto es útil para formularios largos o complejos, donde se necesitan diferentes secciones para distintos tipos de información. Con el elemento <fieldset> definimos el grupo de campos relacionados, mientras que con el elemento <legend> definimos el título de ese grupo

¿Cuándo y para que utilizar estos elementos?

• Agrupación Lógica: Ayuda a organizar los campos de formulario que están relacionados entre sí, mejorando la estructura y el flujo del formulario.
• Accesibilidad: Es importante para los lectores de pantalla, ya que facilita a los usuarios con discapacidades navegar y comprender las diferentes secciones del formulario.
• Descripción del grupo: Define el propósito o la categoría de los campos dentro del <fieldset>.
• Mejora de la usabilidad: Proporciona un contexto claro, lo que es especialmente útil en formularios extensos o complejos.

Etiqueta de división <div>

¿Te sorprende que incluya este elemento en el tema de formularios?

Te entiendo, pues, aunque no lo creas, si bien el elemento <div> no fue creado con el propósito de ser utilizado en la estructura de un formulario, sino, para estructurar una página web, el uso de este elemento nos facilita la vida a la hora de aplicar estilos y estructurar de forma lógica las partes de un formulario, aquí te menciono algunas razones por las cuales se utiliza este elemento.

Veamos esto con un ejemplo practico

Imagina un formulario de registro que tiene secciones para información personal y detalles de contacto. Usar <div> para separar estas secciones facilita aplicar estilos específicos a cada una y ayuda a mantener el código organizado y fácil de mantener.

<form action="/submit" method="post">
    <div class="informacion-personal">
        <input type="text" name="nombre" placeholder="Nombre">
        <input type="text" name="apellido" placeholder="Apellido">
    </div>
    
    <div class="detalles-contacto">
        <input type="email" name="email" placeholder="Correo Electrónico">
        <input type="tel" name="telefono" placeholder="Número de Teléfono">
    </div>

    <button type="submit">Registrar</button>
</form>

En este ejemplo aprovechamos para ver el funcionamiento de algunos atributos de formulario como placeholder, method y action y de paso ver como se ve un formulario agrupado dentro de contenedores div, y como puedes observar, la estructura queda más limpia y clara, lista para recibir todo lo que salga de nuestra imaginación al aplicar estrilos CSS.

Podemos ver como la sección de “información-personal” esta, por un lado, mientras que, “detalles-contacto”, está por otro, así no necesitamos una estructura más clara ya que mejor imposible, entonces, a partir de ahora, ya sabes que incorporar divs en tus formularios, lo único que te traerá, será mucha flexibilidad a la hora de estilizar tus formularios

Resultado

Etiqueta de formulario oculto (hidden)

El atributo hidden denota que un elemento de formulario oculto se utiliza para incluir datos que no son visibles o modificables por el usuario, pero que necesitan ser enviados con el formulario.

Para demostrarte de algún modo el funcionamiento de este valor del elemento <input>, Imagina que estás llenando un formulario en una página web, como cuando haces una compra online o te registras en un sitio.

Hay información que tú como usuario rellenas, como tu nombre o dirección de correo. Pero también hay datos que el sitio necesita manejar que tú no necesitas ver ni cambiar. Ahí es donde entran en juego los campos ocultos.

Piénsalo como si fueran pequeños secretos que el formulario guarda, pero no te muestra. Por ejemplo, cuando estás comprando algo, el formulario podría tener un campo oculto que guarda el ID de ese producto. Tú no lo ves, pero ese ID le dice al sitio web exactamente qué producto estás comprando.

Ahora, una cosa importante: aunque estos campos son como secretos escondidos en la página, no son un lugar seguro para guardar información realmente secreta o sensible. Alguien con un poco de curiosidad y conocimientos de cómo funcionan las páginas web podría descubrir y hasta cambiar esa información.

Por eso, los detalles realmente importantes y privados se manejan en el servidor, esa parte del internet donde tú como usuario no tienes acceso directo.

Ejemplo

<input type = “hidden”>

Validación de Formularios

¿Sabías que un formulario no validado adecuadamente puede ser la puerta de entrada a errores y problemas de seguridad en tu sitio web?»

Llegamos a una parte muy importante de los formularios, y es la validación de formulario un asunto que se tiene que tomar con la debida importancia ya que de ello depende que los datos del usuario sean íntegros, correctos y más aún, que lleguen a su destino final, es decir, el servidor para su posterior procesamiento.

HTML5 ha introducido una variedad de tipos de input y atributos que hacen que la validación del lado del cliente sea más sencilla y eficiente, sin depender de JavaScript. Por ejemplo, los tipos de input como email, date, y number realizan automáticamente ciertas validaciones.

Los atributos como required, pattern, y min/max permiten a los desarrolladores establecer reglas de validación directamente en el HTML, mejorando la experiencia del usuario al proporcionar retroalimentación inmediata sobre los errores de entrada.

Existen varias formas de validar lo datos antes de ser enviados al servidor, pero por ahora me enfocare en explicarte las técnicas que nos proporciona el mismo HTML5 mediante sus atributos incluidos en el mismo formulario

Si bien, no es la manera más recomendable de validar datos debido a la delicadeza que este tema conlleva, por lo menos es una capa de seguridad de bajo nivel que nos serviría de algo, antes de ser validados con mejores técnicas mediante el uso de lenguajes de programación como JavaScript

Existen dos categorías principales de validación de formularios

• Validación del lado del cliente: es la que realizamos mediante el uso de atributos comunes de un formulario HTML
• validación del lado del servidor: Es un tipo de validación más avanzado donde se utilizan reglas más estrictas ya que son validaciones realizadas desde el lado del servidor. Y si un campo esta con datos incorrecto, estos datos no son recibidos y se envían de vuelta para su verificación

Ambos tipos de validación son muy importantes, ya que la validación que se realiza desde el lado del cliente proporciona al usuario una experiencia satisfactoria y enviar de inmediato retroalimentación al mismo, por ejemplo, si un campo está incompleto o rellenado con datos incorrectos, en ese mismo momento el formulario le advierte, y por ende, el usuario procede con la información correcta y rectificada.

Por otro lado, la validación del lado del servidor influye más en aspectos de seguridad, ya que es el proceso encargado de velar por la integridad y la seguridad de los datos que son enviados al servidor una vez que el usuario a rellenado la información necesaria

Veamos algunos ejemplos de cómo se realiza el tipo de validación por parte del cliente utilizando solo HTML

Validacián campo requerido required

Este tipo de validación asegura que un campo donde se haya definido este atributo quede no vacío, siempre tendrá que llenarse si, o si

Por ejemplo

En este ejemplo, si el usuario no ingresa un “nombre” en el campo, el formulario le lanza una advertencia y mientras no se rellene ese campo, el formulario no será enviado

<input type="text"name="nombre" required>

Validación de números min y max

este campo de validación frecuentemente se utiliza para validar la edad del usuario, estableciendo una edad mínima de 18 y una edad máxima de 99, el usuario no podrá ingresar una edad menor o superior a la establecida en los atributos min y max

Por ejemplo

<input type="number" name="edad" min="18" max="99">

Validación de longitud de texto maxlength y minlength

Este tipo de validación establece un límite en el número de caracteres que el usuario podrá ingresar en un campo de texto

Por ejemplo

En este ejemplo el usuario deberá ingresar mínimo cuatro caracteres y máximo 12, restricción definida en los atributos maxlength y minlength

<input type="text" name="usuario" minlength="4" maxlength="12">

Validación de correo electrónico

Este tipo de validación verifica que lo que ingrese el usuario sea una dirección de email completamente valida con el formato correcto que corresponde a un email, esto se hace de forma automática

por ejemplo

<input type="email" name="correo">

Validación de patrones pattern

Este tipo de validación suele ser un poco más estricto que el resto, ya que implementa expresiones regulares para efectuar la validación

Por ejemplo

Este ejemplo valida códigos postales, con un patrón que admite 5 dígitos seguidos opcionalmente por un guion y otros 4 dígitos.

<input type="text" name="codigo_postal" pattern="\d{5}(-\d{4})?">

Este simple línea de código HTML representa un campo de entrada de texto (<input type="text">) diseñado para capturar un código postal. Lo interesante de este campo es el atributo pattern, que define un patrón de validación específico para los datos introducidos por el usuario.

El patrón \d{5}(-\d{4})? es una expresión regular que describe el formato aceptado del código postal.

• \d{5}: Esto significa que los primeros cinco caracteres deben ser dígitos (del 0 al 9). El \d es un metacarácter en expresiones regulares que representa un dígito, y {5} especifica que debe haber exactamente cinco de estos dígitos.
• (-\d{4})?: Esta parte es opcional, como lo indica el signo de interrogación ?. Si está presente, debe comenzar con un guion - seguido de exactamente cuatro dígitos (\d{4}). El guion y los cuatro dígitos adicionales son un grupo comúnmente usado en algunos países, como los Estados Unidos, para proporcionar un código postal más específico (conocido como ZIP+4 en los EE. UU.).

en este ejemplo me amplie un poco mas en la explicacion debido a que el tema de «Expresiones regulares» abarcaría mas de un post entero para hablas de ellas, espero no este demás esta explicación

Campos de formulario personalizados

Los campos de formulario personalizados en HTML ofrecen opciones avanzadas para recopilar diferentes tipos de datos, desde imágenes hasta rangos de valores. Estos elementos mejoran la interactividad y funcionalidad de los formularios.

Campo de imagen

• <input type="image">

Este tipo de entrada permite usar una imagen como botón de envío del formulario, combinando una imagen con la funcionalidad de un botón de envío.

Ejemplo

<input type="image" src="ruta_imagen_enviar.jpg" alt="Enviar Formulario">

Campo de Archivo

• <input type="file">

Esta etiqueta permite a los usuarios seleccionar y cargar archivos, como documentos o imágenes, desde su dispositivo.

Ejemplo

<input type="file" name="archivoSubido">

Ejemplo 2

<label for="fotoSubida">Sube tu foto:</label><br>
<input type="file" id="fotoSubida" name="fotoConcurso" accept="image/*">

En este ejemplo el campo de archivo permite a los usuarios cargar una foto desde su dispositivo. El atributo accept=»image/*» garantiza que solo se puedan seleccionar archivos de imagen.

Campo de selección de color

• <input type=»color»>

Permite seleccionar un color en específico en caso de que el formulario lo requiera

Ejemplo

Supongamos que es un formulario en un sitio web de personalización de productos donde los clientes pueden elegir un color para su producto.

<label for="colorProducto">Elige un color:</label><br>
<input type="color" id="colorProducto" name="color">

En este ejemplo el selector de color brinda a los usuarios una herramienta fácil para elegir un color específico para su producto, mejorando la interacción y la experiencia de personalización.

Campo de Rango

• <input type=»range»>

El campo de rango proporciona una interfaz para seleccionar un valor dentro de un rango predefinido, generalmente mostrado como un deslizador. Permite a los usuarios elegir un valor deslizando un controlador a lo largo de una barra, también es posible definir valores mínimos y máximos

Ejemplo

<input type="range" name="volumen" min="0" max="100">

Aquí el atributo range tendrá de manera preestablecida los valores del 0 al 100 que son los valores que requerirá el usuario

Ejemplo 2

Imagina que estás creando un formulario para una aplicación de música y quieres dar a los usuarios la posibilidad de ajustar el volumen.

<label for="volumenControl">Volumen:</label><br>
<input type="range" id="volumenControl" name="volumen" min="0" max="100">

El campo de rango aquí permite a los usuarios seleccionar un valor para el volumen, desde 0 (silencio) hasta 100

Conlusión

Con esto, doy por concluido este recorrido a través de los formularios en HTML, espero que la guía ‘Formularios: Un Recorrido Profundo hacia los Formularios en HTML‘. haya proporcionado una comprensión integral y profunda de los formularios,

Ahora te invito a que apliques este conocimiento adquirido en tus proyectos futuros, y a que siempre trates de buscar la excelencia en la creación de interfaces de usuario que sean tanto funcionales como estéticamente agradables. Para cualquier consulta o discusión adicional, te animo a utilizar la sección de comentarios.

Agradezco tu atención y participación en este tema. Por favor, te invito a que estes atento a futuras publicaciones, donde seguiremos profundizando en diversos aspectos del desarrollo web y la programación. Gracias por leer. Hata luego!