Tutorial HTML: Formularios (form, input, select, textarea, button)

Estructura básica del elemento form

Los formularios son componentes fundamentales en el desarrollo web que permiten a los usuarios interactuar con una página y enviar información al servidor. En HTML, el elemento <form> es el contenedor principal que define un formulario y establece cómo se procesarán los datos introducidos por el usuario.

La estructura básica de un formulario HTML consiste en un elemento <form> que envuelve a todos los controles de entrada (como campos de texto, casillas de verificación, botones, etc.) que recopilarán la información del usuario. Esta estructura proporciona el marco necesario para que los datos puedan ser enviados correctamente al servidor para su procesamiento.

Sintaxis básica

Un formulario HTML en su forma más simple se ve así:

<form>
  <!-- Aquí van los elementos de entrada -->
</form>

Sin embargo, un formulario funcional generalmente necesita más elementos para ser útil:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

Elementos comunes dentro de un formulario

Dentro del elemento <form> podemos incluir diversos elementos interactivos que permiten a los usuarios introducir información:

• Campos de texto para introducir texto de una sola línea:

<input type="text" name="firstname" placeholder="Enter your first name">

• Áreas de texto para texto multilínea:

<textarea name="comments" rows="4" cols="50"></textarea>

• Casillas de verificación para selecciones múltiples:

<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="music"> Music

• Botones de radio para selecciones únicas:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

• Listas desplegables para seleccionar entre varias opciones:

<select name="country">
  <option value="spain">Spain</option>
  <option value="france">France</option>
  <option value="germany">Germany</option>
</select>

• Botones para enviar o reiniciar el formulario:

<button type="submit">Send</button>
<button type="reset">Clear</button>

Estructura completa de un formulario básico

Un formulario completo y funcional podría verse así:

<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </div>
  
  <div>
    <label for="comments">Comments:</label>
    <textarea id="comments" name="comments"></textarea>
  </div>
  
  <div>
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
    <label for="subscribe">Subscribe to newsletter</label>
  </div>
  
  <div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

Buenas prácticas en la estructura de formularios

Para crear formularios accesibles y fáciles de usar, es recomendable seguir estas prácticas:

• Organizar los campos de manera lógica y agrupada según su función
• Colocar cada campo en una nueva línea o dentro de un contenedor para mejorar la legibilidad
• Usar etiquetas descriptivas para cada campo de entrada
• Proporcionar indicaciones claras sobre qué información se espera en cada campo
• Incluir validación para asegurar que los datos introducidos son correctos
• Añadir atributos de accesibilidad para usuarios con discapacidades

Ejemplo de formulario con estructura semántica

Un formulario con una estructura semántica mejorada podría verse así:

<form>
  <h2>Contact Information</h2>
  
  <div class="form-group">
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" required>
  </div>
  
  <div class="form-group">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <h2>Your Message</h2>
  
  <div class="form-group">
    <label for="subject">Subject:</label>
    <input type="text" id="subject" name="subject">
  </div>
  
  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>
  
  <div class="form-controls">
    <button type="submit">Send Message</button>
    <button type="reset">Clear Form</button>
  </div>
</form>

En este ejemplo, hemos organizado el formulario en secciones lógicas con encabezados, agrupado los campos relacionados y añadido clases que podrían usarse para aplicar estilos consistentes.

Atributos básicos del elemento form

El elemento <form> puede incluir varios atributos que definen su comportamiento básico:

• id - Identificador único para el formulario
• class - Clases CSS para aplicar estilos
• name - Nombre del formulario (útil para scripts)
• autocomplete - Controla si el navegador debe autocompletar los campos

<form id="contact-form" class="standard-form" name="contact" autocomplete="on">
  <!-- Contenido del formulario -->
</form>

La estructura básica del elemento <form> proporciona el fundamento para crear interfaces de entrada de datos efectivas en aplicaciones web. En las siguientes secciones, exploraremos los atributos específicos que controlan cómo se envían estos datos y cómo podemos organizar mejor los campos para mejorar la experiencia del usuario.

Atributos action, method y enctype

Los formularios en HTML no solo necesitan una estructura adecuada, sino también instrucciones específicas sobre cómo procesar los datos. Los atributos action, method y enctype son fundamentales para definir el comportamiento del formulario cuando el usuario lo envía.

Atributo action

El atributo action especifica la URL a la que se enviarán los datos del formulario cuando este se envíe. Esta URL corresponde generalmente a un script o programa en el servidor que procesará la información recibida.

<form action="/submit-form">
  <!-- Elementos del formulario -->
</form>

Si no se especifica el atributo action o se deja vacío, el formulario se enviará a la misma página en la que se encuentra:

<form action="">
  <!-- El formulario se enviará a la misma página -->
</form>

También puedes usar URLs absolutas para enviar datos a otros dominios:

<form action="https://example.com/process-data">
  <!-- Envía datos a otro sitio web -->
</form>

Atributo method

El atributo method define el método HTTP que se utilizará para enviar los datos del formulario. Los dos valores principales son:

• GET: Añade los datos a la URL como parámetros de consulta
• POST: Envía los datos en el cuerpo de la petición HTTP

<form action="/search" method="get">
  <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<form action="/register" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Register</button>
</form>

Diferencias entre GET y POST

Atributo enctype

El atributo enctype especifica cómo se codificarán los datos del formulario antes de enviarlos al servidor. Este atributo es especialmente importante cuando se envían archivos.

Existen tres valores principales:

• application/x-www-form-urlencoded: El valor predeterminado, codifica los espacios como + y caracteres especiales en formato hexadecimal.
• multipart/form-data: Necesario cuando el formulario incluye elementos <input type="file">.
• text/plain: Envía datos sin codificar (raramente usado).

<!-- Formulario predeterminado -->
<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

<!-- Formulario para subir archivos -->
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="document">
  <button type="submit">Upload</button>
</form>

Ejemplo práctico combinando los tres atributos

Un formulario completo para subir un archivo de imagen podría verse así:

<form action="/upload-profile-picture" method="post" enctype="multipart/form-data">
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
  </div>
  
  <div>
    <label for="profile-pic">Profile picture:</label>
    <input type="file" id="profile-pic" name="profile-pic" accept="image/*">
  </div>
  
  <div>
    <label for="bio">Short bio:</label>
    <textarea id="bio" name="bio" maxlength="200"></textarea>
  </div>
  
  <button type="submit">Update Profile</button>
</form>

En este ejemplo:

• action="/upload-profile-picture" indica que los datos se enviarán a esa ruta en el servidor
• method="post" especifica que los datos se enviarán en el cuerpo de la petición HTTP
• enctype="multipart/form-data" permite el envío de archivos junto con el resto de datos del formulario

Consideraciones de seguridad

Al trabajar con formularios, es importante tener en cuenta algunas consideraciones de seguridad:

• Usa siempre method="post" para datos sensibles como contraseñas
• Implementa validación tanto en el cliente como en el servidor
• Protege contra ataques CSRF (Cross-Site Request Forgery) usando tokens
• Considera usar HTTPS para formularios que manejan información sensible

<form action="/login" method="post">
  <input type="hidden" name="csrf_token" value="random_generated_token">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

Formularios sin JavaScript

Aunque JavaScript puede mejorar la experiencia del usuario con formularios, es una buena práctica asegurarse de que los formularios funcionen incluso sin JavaScript habilitado:

<form action="/subscribe" method="post">
  <input type="email" name="email" required>
  <button type="submit">Subscribe</button>
  
  <noscript>
    <p>Note: This form works without JavaScript, but validation will only happen on the server.</p>
  </noscript>
</form>

Los atributos action, method y enctype son esenciales para definir cómo se comportará un formulario cuando el usuario lo envíe. Elegir los valores correctos para estos atributos garantiza que los datos se envíen de manera adecuada y segura al servidor para su procesamiento.

Agrupación de campos con fieldset y legend

Cuando creamos formularios complejos con múltiples campos, es fundamental organizar la información de manera lógica para mejorar la experiencia del usuario. HTML proporciona dos elementos específicos para agrupar campos relacionados: <fieldset> y <legend>.

El elemento <fieldset> funciona como un contenedor que permite agrupar controles de formulario relacionados, mientras que <legend> proporciona un título descriptivo para ese grupo. Esta combinación no solo mejora la estructura visual del formulario, sino que también aumenta significativamente la accesibilidad.

Estructura básica de fieldset y legend

La sintaxis básica para implementar estos elementos es:

<fieldset>
  <legend>Título del grupo</legend>
  <!-- Campos de formulario relacionados -->
</fieldset>

El navegador renderiza automáticamente un borde alrededor del <fieldset> y coloca el <legend> sobre ese borde, creando una agrupación visual clara.

Casos de uso comunes

Los elementos <fieldset> y <legend> son especialmente útiles en estos escenarios:

• Información personal: Agrupar campos como nombre, apellido y correo electrónico
• Datos de contacto: Teléfono, dirección, código postal
• Preferencias: Opciones relacionadas que el usuario puede seleccionar
• Información de pago: Datos de tarjeta, dirección de facturación

Ejemplo práctico: Formulario de registro

Veamos un ejemplo de un formulario de registro que utiliza <fieldset> y <legend> para organizar la información:

<form action="/register" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    
    <div>
      <label for="first-name">First Name:</label>
      <input type="text" id="first-name" name="first-name" required>
    </div>
    
    <div>
      <label for="last-name">Last Name:</label>
      <input type="text" id="last-name" name="last-name" required>
    </div>
    
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Account Details</legend>
    
    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    
    <div>
      <label for="confirm-password">Confirm Password:</label>
      <input type="password" id="confirm-password" name="confirm-password" required>
    </div>
  </fieldset>
  
  <button type="submit">Register</button>
</form>

En este ejemplo, hemos dividido el formulario en dos secciones lógicas: información personal y detalles de la cuenta. Cada sección tiene su propio <fieldset> con un <legend> descriptivo.

Agrupación de opciones relacionadas

El uso de <fieldset> es particularmente útil para agrupar botones de radio o casillas de verificación relacionadas:

<fieldset>
  <legend>Subscription Type</legend>
  
  <div>
    <input type="radio" id="free" name="subscription" value="free">
    <label for="free">Free Plan</label>
  </div>
  
  <div>
    <input type="radio" id="premium" name="subscription" value="premium">
    <label for="premium">Premium Plan</label>
  </div>
  
  <div>
    <input type="radio" id="enterprise" name="subscription" value="enterprise">
    <label for="enterprise">Enterprise Plan</label>
  </div>
</fieldset>

Fieldsets anidados

En formularios muy complejos, podemos anidar varios <fieldset> para crear una jerarquía de agrupaciones:

<fieldset>
  <legend>Shipping Information</legend>
  
  <div>
    <label for="shipping-name">Full Name:</label>
    <input type="text" id="shipping-name" name="shipping-name">
  </div>
  
  <fieldset>
    <legend>Address</legend>
    
    <div>
      <label for="street">Street:</label>
      <input type="text" id="street" name="street">
    </div>
    
    <div>
      <label for="city">City:</label>
      <input type="text" id="city" name="city">
    </div>
    
    <div>
      <label for="postal-code">Postal Code:</label>
      <input type="text" id="postal-code" name="postal-code">
    </div>
  </fieldset>
</fieldset>

Estilización de fieldset y legend

Aunque <fieldset> y <legend> tienen estilos predeterminados, podemos personalizarlos con CSS para que se integren mejor con el diseño de nuestra página:

<style>
  fieldset {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
  }
  
  legend {
    padding: 0 10px;
    font-weight: bold;
    color: #555;
  }
</style>

Beneficios para la accesibilidad

El uso de <fieldset> y <legend> proporciona importantes beneficios de accesibilidad:

• Los lectores de pantalla anuncian el contenido del <legend> antes de cada control dentro del <fieldset>
• Ayuda a usuarios con discapacidades cognitivas a entender la relación entre campos
• Proporciona contexto adicional para todos los usuarios
• Mejora la navegación por teclado en formularios complejos

Desactivación de grupos completos

Otra ventaja de usar <fieldset> es la posibilidad de desactivar todos los controles dentro de él con un solo atributo:

<fieldset disabled>
  <legend>Premium Features (Unavailable in Free Plan)</legend>
  
  <div>
    <input type="checkbox" id="feature1" name="features" value="feature1">
    <label for="feature1">Advanced Analytics</label>
  </div>
  
  <div>
    <input type="checkbox" id="feature2" name="features" value="feature2">
    <label for="feature2">Priority Support</label>
  </div>
</fieldset>

Ejemplo de formulario completo con múltiples grupos

Un formulario de pedido completo podría estructurarse así:

<form action="/place-order" method="post">
  <fieldset>
    <legend>Customer Information</legend>
    
    <div>
      <label for="customer-name">Full Name:</label>
      <input type="text" id="customer-name" name="customer-name" required>
    </div>
    
    <div>
      <label for="customer-email">Email:</label>
      <input type="email" id="customer-email" name="customer-email" required>
    </div>
    
    <div>
      <label for="customer-phone">Phone:</label>
      <input type="tel" id="customer-phone" name="customer-phone">
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Delivery Address</legend>
    
    <div>
      <label for="street-address">Street Address:</label>
      <input type="text" id="street-address" name="street-address" required>
    </div>
    
    <div>
      <label for="city">City:</label>
      <input type="text" id="city" name="city" required>
    </div>
    
    <div>
      <label for="postal-code">Postal Code:</label>
      <input type="text" id="postal-code" name="postal-code" required>
    </div>
    
    <div>
      <label for="country">Country:</label>
      <select id="country" name="country">
        <option value="spain">Spain</option>
        <option value="france">France</option>
        <option value="germany">Germany</option>
      </select>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Payment Method</legend>
    
    <div>
      <input type="radio" id="credit-card" name="payment" value="credit-card" checked>
      <label for="credit-card">Credit Card</label>
    </div>
    
    <div>
      <input type="radio" id="paypal" name="payment" value="paypal">
      <label for="paypal">PayPal</label>
    </div>
    
    <div>
      <input type="radio" id="bank-transfer" name="payment" value="bank-transfer">
      <label for="bank-transfer">Bank Transfer</label>
    </div>
  </fieldset>
  
  <button type="submit">Place Order</button>
</form>

La agrupación de campos con <fieldset> y <legend> es una práctica fundamental para crear formularios bien estructurados y accesibles. Al dividir formularios complejos en secciones lógicas, mejoramos tanto la experiencia del usuario como la accesibilidad, facilitando la comprensión y navegación del formulario para todos los usuarios.

Etiquetas label y su relación con inputs

Las etiquetas <label> son elementos fundamentales en la creación de formularios accesibles y fáciles de usar. Su principal función es establecer una relación explícita entre el texto descriptivo y el control de formulario al que hace referencia, como campos de texto, casillas de verificación o botones de radio.

¿Por qué son importantes las etiquetas label?

Cuando creamos formularios, es esencial proporcionar indicaciones claras sobre qué información debe introducirse en cada campo. Las etiquetas <label> cumplen esta función y ofrecen varias ventajas:

• Mejoran la accesibilidad para usuarios que utilizan lectores de pantalla
• Aumentan el área clickeable de los controles de formulario
• Proporcionan contexto claro sobre el propósito de cada campo
• Facilitan la navegación y el uso del formulario

Formas de asociar un label con un input

Existen dos métodos principales para vincular una etiqueta <label> con su control de formulario correspondiente:

1. Método explícito (recomendado)

Este método utiliza los atributos for e id para crear una asociación explícita entre la etiqueta y el control:

<label for="username">Username:</label>
<input type="text" id="username" name="username">

En este ejemplo, el atributo for del <label> coincide exactamente con el id del elemento <input>. Esta correspondencia crea un vínculo programático entre ambos elementos.

2. Método implícito (anidamiento)

Alternativamente, podemos anidar el control de formulario dentro de la etiqueta:

<label>
  Email address:
  <input type="email" name="email">
</label>

Aunque este método también funciona, el método explícito es generalmente preferido por su mayor claridad y flexibilidad en el diseño.

Beneficios de interacción

Una ventaja importante de usar correctamente las etiquetas <label> es que cuando un usuario hace clic en la etiqueta, el foco se transfiere automáticamente al control asociado. Esto es particularmente útil para:

• Casillas de verificación y botones de radio, donde el área clickeable se amplía significativamente
• Usuarios con dispositivos táctiles, que pueden tener dificultades para seleccionar elementos pequeños
• Personas con limitaciones motoras, que se benefician de áreas de interacción más grandes

<div>
  <input type="checkbox" id="terms" name="terms">
  <label for="terms">I accept the terms and conditions</label>
</div>

En este ejemplo, el usuario puede hacer clic tanto en la casilla como en el texto "I accept the terms and conditions" para activar o desactivar la casilla.

Etiquetas visualmente ocultas

En algunos diseños, podemos necesitar ocultar visualmente las etiquetas mientras mantenemos su accesibilidad para lectores de pantalla:

<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
</style>

<label for="search" class="visually-hidden">Search the website</label>
<input type="search" id="search" name="search" placeholder="Search...">

Esta técnica mantiene la etiqueta disponible para tecnologías de asistencia mientras la oculta visualmente, lo que puede ser útil en interfaces donde el contexto visual ya es claro (como un campo de búsqueda con un icono de lupa).

Etiquetas para diferentes tipos de inputs

Las etiquetas <label> funcionan con todos los tipos de controles de formulario. Veamos algunos ejemplos:

Para campos de texto

<div>
  <label for="first-name">First Name:</label>
  <input type="text" id="first-name" name="first-name">
</div>

Para casillas de verificación

<div>
  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  <label for="newsletter">Subscribe to our newsletter</label>
</div>

Para botones de radio

<div>
  <input type="radio" id="credit-card" name="payment" value="credit-card">
  <label for="credit-card">Credit Card</label>
</div>
<div>
  <input type="radio" id="paypal" name="payment" value="paypal">
  <label for="paypal">PayPal</label>
</div>

Para listas desplegables

<div>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="spain">Spain</option>
    <option value="france">France</option>
    <option value="germany">Germany</option>
  </select>
</div>

Para áreas de texto

<div>
  <label for="message">Your message:</label>
  <textarea id="message" name="message" rows="4" cols="40"></textarea>
</div>

Múltiples inputs con una etiqueta

En algunos casos, como grupos de controles relacionados, podemos necesitar una etiqueta que describa todo el grupo:

<div>
  <label id="size-group">Select your t-shirt size:</label>
  
  <div role="group" aria-labelledby="size-group">
    <input type="radio" id="size-s" name="size" value="S">
    <label for="size-s">S</label>
    
    <input type="radio" id="size-m" name="size" value="M">
    <label for="size-m">M</label>
    
    <input type="radio" id="size-l" name="size" value="L">
    <label for="size-l">L</label>
  </div>
</div>

En este ejemplo, usamos aria-labelledby para asociar el grupo de botones de radio con una etiqueta descriptiva general, mientras cada botón individual mantiene su propia etiqueta.

Etiquetas con información adicional

Podemos enriquecer nuestras etiquetas con información adicional para ayudar al usuario:

<div>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" aria-describedby="password-hint">
  <p id="password-hint" class="form-hint">Must be at least 8 characters and include a number</p>
</div>

El atributo aria-describedby conecta el campo con un texto de ayuda adicional, mejorando la accesibilidad.

Posicionamiento de etiquetas

La posición de las etiquetas respecto a sus controles puede variar según el diseño:

• Arriba del campo: Común para formularios verticales
• A la izquierda del campo: Tradicional en formularios de escritorio
• Dentro del campo: Usando placeholder (no recomendado como único método)
• A la derecha del campo: Común para casillas de verificación y botones de radio

<!-- Etiqueta arriba del campo -->
<div class="form-group">
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email">
</div>

<!-- Etiqueta a la izquierda del campo -->
<div class="form-row">
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone">
</div>

<!-- Etiqueta a la derecha (para checkbox/radio) -->
<div class="form-check">
  <input type="checkbox" id="remember" name="remember">
  <label for="remember">Remember me</label>
</div>

Ejemplo completo de formulario con etiquetas correctamente implementadas

Veamos un ejemplo de un formulario de contacto que implementa correctamente las etiquetas <label>:

<form action="/contact" method="post">
  <div class="form-group">
    <label for="contact-name">Your Name:</label>
    <input type="text" id="contact-name" name="name" required>
  </div>
  
  <div class="form-group">
    <label for="contact-email">Email Address:</label>
    <input type="email" id="contact-email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="contact-subject">Subject:</label>
    <select id="contact-subject" name="subject">
      <option value="general">General Inquiry</option>
      <option value="support">Technical Support</option>
      <option value="billing">Billing Question</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="contact-message">Your Message:</label>
    <textarea id="contact-message" name="message" rows="5" required></textarea>
  </div>
  
  <div class="form-check">
    <input type="checkbox" id="contact-copy" name="send-copy">
    <label for="contact-copy">Send me a copy of this message</label>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Buenas prácticas para etiquetas label

Para maximizar la usabilidad y accesibilidad de tus formularios:

• Usa siempre etiquetas <label> para cada control de formulario
• Asegúrate de que cada <label> tenga un texto descriptivo y conciso
• Mantén la consistencia en el posicionamiento de las etiquetas
• Evita depender únicamente de placeholders como sustitutos de etiquetas
• Asegúrate de que los atributos for e id coincidan exactamente (sensibles a mayúsculas/minúsculas)
• Considera el uso de estilos visuales para destacar la relación entre etiquetas y campos

Las etiquetas <label> correctamente implementadas son un componente esencial para crear formularios accesibles y fáciles de usar. Al establecer relaciones claras entre las descripciones y los controles de formulario, mejoramos significativamente la experiencia de todos los usuarios, independientemente de cómo interactúen con nuestra página web.