Formularios en HTML: guía práctica
Los formularios en HTML son una de las herramientas fundamentales para permitir que los usuarios interactúen con una página web. Gracias a ellos, una persona puede escribir sus datos, enviar una consulta, iniciar sesión, buscar información, registrarse, seleccionar opciones, adjuntar archivos o realizar una solicitud.
Un formulario HTML puede ser muy sencillo, como un campo de búsqueda con un botón, o bastante completo, con datos personales, casillas de selección, menús desplegables, validaciones, carga de archivos y diferentes formas de envío. Sin embargo, su funcionamiento no depende únicamente de la apariencia visual. Para que sea útil, debe estar correctamente estructurado, ser accesible, proteger la información y conectarse con un sistema capaz de procesar los datos recibidos.
En esta guía se explica qué son los formularios en HTML, cuáles son sus etiquetas principales, cómo crear uno paso a paso, qué tipos de campos existen, cómo validar las respuestas, cómo mejorar la accesibilidad, cómo enviar los datos a un servidor y qué errores conviene evitar.
También se incluyen ejemplos prácticos de formularios de contacto, registro, inicio de sesión, búsqueda, selección de fechas, carga de archivos y solicitudes. Los ejemplos utilizan HTML estándar y pueden complementarse con CSS para mejorar el diseño o con JavaScript para añadir comportamientos más avanzados.
La referencia técnica principal para conocer el comportamiento de los formularios es el estándar HTML de WHATWG. También puedes consultar la documentación de formularios en MDN y validar la estructura de una página con el validador HTML del W3C.
Información principal
Un formulario HTML es un conjunto de controles que permite recoger datos introducidos por una persona. Estos controles se colocan normalmente dentro de la etiqueta <form>, que define el inicio y el final del formulario.
Dentro de un formulario se pueden utilizar diferentes elementos, como <input>, <textarea>, <select>, <option>, <button>, <fieldset> y <legend>. Cada uno cumple una función diferente y debe elegirse según el tipo de información que se necesita recibir.
Cuando el usuario envía el formulario, el navegador reúne los valores de los campos y los dirige al destino definido mediante el atributo action. La forma en que se realiza el envío se especifica con el atributo method, que normalmente utiliza los valores get o post.
HTML se encarga principalmente de la estructura y de algunas validaciones básicas. Para procesar realmente los datos, normalmente se necesita un servidor o un servicio externo. El formulario puede verse correctamente en pantalla aunque todavía no exista un sistema que almacene o responda la información enviada.
Aspectos importantes que debe conocer el usuario
Antes de crear un formulario, es importante comprender que existen tres partes relacionadas, pero diferentes:
- La estructura HTML, que define los campos y controles.
- La presentación visual, que normalmente se mejora con CSS.
- El procesamiento de los datos, que puede realizarse en un servidor o mediante un servicio externo.
Un formulario puede tener un diseño atractivo y ser fácil de completar, pero si no tiene un destino de envío correctamente configurado, los datos no llegarán a ninguna parte. Del mismo modo, un formulario que funciona técnicamente puede ser difícil de usar si no tiene etiquetas claras, instrucciones o mensajes de error comprensibles.
La etiqueta form
La etiqueta <form> contiene los controles relacionados con una misma acción. Un ejemplo básico es el siguiente:
<form action="/procesar-contacto" method="post">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre">
<button type="submit">Enviar</button>
</form>El atributo action indica la dirección a la que se enviarán los datos. El atributo method determina cómo se transmitirá la información.
El atributo action
El atributo action recibe una URL o ruta. Puede apuntar a un archivo del propio sitio, a una dirección de una aplicación o a un servicio autorizado.
Por ejemplo:
<form action="/guardar-solicitud" method="post">Si el atributo action se omite, el navegador puede enviar los datos a la URL actual, pero no siempre es conveniente depender de ese comportamiento. Es preferible definir claramente el destino cuando el formulario debe ser procesado por una aplicación.
El atributo method
El atributo method suele utilizar los valores get y post.
El método get incorpora los datos en la dirección web. Es útil para búsquedas y filtros que pueden compartirse mediante una URL. Por ejemplo, una consulta de búsqueda puede quedar representada en la dirección del navegador.
El método post envía los datos dentro de la solicitud HTTP. Es más adecuado para formularios que modifican información, registran datos, envían mensajes o transmiten contenido que no debería aparecer en la URL.
Ninguno de estos métodos sustituye el uso de HTTPS ni garantiza por sí solo la seguridad de la información. La protección de los datos depende también del servidor, la aplicación, la autenticación y la configuración general del sitio.
El atributo name
El atributo name identifica el campo cuando se envía el formulario. Es uno de los atributos más importantes para el procesamiento de datos.
<input type="text" id="nombre" name="nombre">El atributo id identifica el elemento dentro del documento y permite asociarlo con una etiqueta <label>. El atributo name define la clave que recibirá el servidor.
Si un control no tiene name, su valor puede no incluirse en los datos enviados. Por eso, un formulario puede verse bien y permitir escribir información, pero no entregar correctamente esos valores al sistema que lo procesa.
La asociación entre label e input
La etiqueta <label> describe un campo y facilita su uso. La forma más clara de asociarla con un control es utilizar el atributo for con el mismo valor del atributo id.
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo">Al hacer clic en la etiqueta, el navegador puede activar o enfocar el campo relacionado. Además, los lectores de pantalla pueden comunicar correctamente el propósito del control.
La diferencia entre id y name
id sirve principalmente para identificar el elemento dentro del documento, asociarlo con estilos, relacionarlo con un <label> o acceder a él mediante JavaScript.
name sirve para identificar el dato cuando el formulario se envía al servidor. En muchos controles ambos valores coinciden, pero no son exactamente lo mismo.
Tipos de campos en formularios HTML
La etiqueta <input> puede cambiar su comportamiento mediante el atributo type. Elegir el tipo correcto mejora la experiencia del usuario, permite validaciones específicas y facilita el uso desde teléfonos.
Campo de texto
El tipo text se utiliza para datos breves, como nombres, ciudades, cargos o códigos.
<label for="nombre">Nombre completo</label>
<input type="text" id="nombre" name="nombre">Si el dato tiene una estructura específica, considera utilizar otro tipo de campo o una regla de validación.
Campo de correo electrónico
El tipo email indica que se espera una dirección de correo electrónico.
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" required>Los navegadores pueden comprobar de manera básica que el valor tenga un formato parecido al de un correo. Esta comprobación no confirma que la dirección exista ni que pertenezca realmente a la persona que la escribió.
Campo de contraseña
El tipo password oculta visualmente los caracteres escritos.
<label for="contrasena">Contraseña</label>
<input type="password" id="contrasena" name="contrasena" required>Ocultar los caracteres en pantalla no cifra automáticamente la información. Las contraseñas deben enviarse mediante HTTPS y procesarse de manera segura en el servidor. Nunca deben almacenarse como texto plano.
Campo numérico
El tipo number puede utilizarse para cantidades, edades, unidades o valores numéricos.
<label for="edad">Edad</label>
<input type="number" id="edad" name="edad" min="18" max="120">Este control puede mostrar botones para aumentar o disminuir el valor en algunos dispositivos. No debe utilizarse para todos los números, porque códigos, teléfonos y números de identificación pueden contener ceros iniciales, símbolos o formatos que no representan una cantidad matemática.
Campo telefónico
El tipo tel indica que se espera un número telefónico.
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" name="telefono" autocomplete="tel">El navegador puede mostrar un teclado numérico en teléfonos, aunque el campo puede admitir símbolos, espacios o prefijos según el país.
Campo de URL
El tipo url se utiliza para direcciones de páginas web.
<label for="sitio">Sitio web</label>
<input type="url" id="sitio" name="sitio">Campo de búsqueda
El tipo search representa un campo de búsqueda. Puede recibir comportamientos visuales especiales en algunos navegadores y dispositivos.
<form action="/buscar" method="get">
<label for="consulta">Buscar</label>
<input type="search" id="consulta" name="q">
<button type="submit">Buscar</button>
</form>Fecha
El tipo date permite seleccionar una fecha mediante un control adaptado al dispositivo.
<label for="fecha">Fecha de nacimiento</label>
<input type="date" id="fecha" name="fecha">El aspecto del selector puede cambiar según el navegador y el sistema operativo. El servidor debe validar la fecha recibida antes de utilizarla.
Hora
El tipo time permite seleccionar una hora.
<label for="hora">Hora preferida</label>
<input type="time" id="hora" name="hora">Fecha y hora local
El tipo datetime-local permite seleccionar una fecha y hora sin incluir una zona horaria. Debe utilizarse con cuidado cuando las personas pueden encontrarse en regiones horarias diferentes.
Mes y semana
Los tipos month y week permiten seleccionar un mes o una semana. Su presentación puede variar según el navegador y no todos los usuarios tendrán exactamente la misma experiencia visual.
Casilla de verificación
El tipo checkbox permite marcar o desmarcar una opción.
<label>
<input type="checkbox" name="acepta" value="si">
Acepto las condiciones
</label>Una casilla sin marcar normalmente no envía un valor. Si la aceptación es obligatoria, debes comprobarla también en el servidor.
Botones de opción
El tipo radio permite elegir una sola opción dentro de un grupo. Los botones relacionados deben compartir el mismo atributo name.
<fieldset>
<legend>Medio de contacto preferido</legend>
<label>
<input type="radio" name="contacto" value="correo">
Correo electrónico
</label>
<label>
<input type="radio" name="contacto" value="telefono">
Teléfono
</label>
</fieldset>El elemento <fieldset> agrupa controles relacionados y <legend> proporciona el título del grupo.
Selector de archivos
El tipo file permite seleccionar uno o más archivos desde el dispositivo.
<label for="documento">Adjuntar documento</label>
<input type="file" id="documento" name="documento">Para enviar archivos mediante un formulario, normalmente debes utilizar method="post" y el atributo enctype="multipart/form-data".
<form action="/subir-documento" method="post" enctype="multipart/form-data">
<label for="archivo">Archivo</label>
<input type="file" id="archivo" name="archivo">
<button type="submit">Enviar archivo</button>
</form>El servidor debe validar el tamaño, el tipo real y el contenido del archivo. No es suficiente confiar únicamente en el atributo accept del navegador.
Campo oculto
El tipo hidden permite enviar un valor que no se muestra como un campo visible.
<input type="hidden" name="origen" value="pagina-contacto">Los campos ocultos no son secretos. El usuario puede inspeccionar el código o modificar su valor antes del envío. Nunca uses un campo oculto para proteger precios, permisos, roles o información confidencial.
Color
El tipo color permite seleccionar un color en navegadores compatibles.
Rango
El tipo range permite elegir un valor dentro de un intervalo.
<label for="satisfaccion">Nivel de satisfacción</label>
<input type="range" id="satisfaccion" name="satisfaccion" min="1" max="10" value="5">Cuando el valor exacto es importante, conviene mostrarlo o utilizar un control que permita identificar claramente la opción elegida.
Elementos select, option y textarea
No todos los controles se crean con <input>. Para listas y textos extensos se utilizan otros elementos.
Lista desplegable con select
El elemento <select> crea una lista de opciones.
<label for="region">Región</label>
<select id="region" name="region">
<option value="">Selecciona una región</option>
<option value="metropolitana">Región Metropolitana</option>
<option value="ohiggins">O'Higgins</option>
<option value="maule">Maule</option>
</select>La primera opción puede funcionar como instrucción inicial. Si el usuario debe escoger necesariamente una opción válida, puedes marcar el campo como obligatorio y dejar el valor inicial vacío.
Área de texto con textarea
El elemento <textarea> permite ingresar varias líneas.
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="6" cols="40"></textarea>Los atributos rows y cols establecen un tamaño inicial aproximado. CSS suele utilizarse para controlar con mayor precisión el ancho y la altura.
Botones de formulario
Los botones permiten enviar, restablecer o ejecutar acciones relacionadas con el formulario.
Botón de envío
<button type="submit">Enviar</button>El tipo submit envía el formulario asociado.
Botón de reinicio
<button type="reset">Borrar datos</button>El botón de reinicio devuelve los campos a sus valores iniciales. Úsalo con cuidado, porque una persona puede perder información escrita por accidente.
Botón común
<button type="button">Mostrar información</button>Un botón con type="button" no envía el formulario por sí solo. Puede utilizarse con JavaScript para realizar una acción específica.
El elemento input submit
También puedes crear un botón de envío mediante <input type="submit">.
<input type="submit" value="Enviar formulario">El elemento <button> ofrece mayor flexibilidad porque permite incluir texto y otros contenidos dentro del botón.
Cómo hacer un formulario de contacto en HTML
Un formulario de contacto normalmente solicita nombre, correo, asunto y mensaje. La estructura básica puede ser la siguiente:
<form action="/procesar-contacto" method="post">
<div>
<label for="nombre">Nombre completo</label>
<input type="text" id="nombre" name="nombre" required autocomplete="name">
</div>
<div>
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo" required autocomplete="email">
</div>
<div>
<label for="asunto">Asunto</label>
<input type="text" id="asunto" name="asunto" required>
</div>
<div>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="6" required></textarea>
</div>
<button type="submit">Enviar consulta</button>
</form>Este código crea la estructura visual y envía los datos a una ruta llamada /procesar-contacto. Para que el mensaje llegue a un correo o se almacene en una base de datos, esa dirección debe tener un procesamiento del lado del servidor.
Cómo crear un formulario de registro
Un formulario de registro puede solicitar información personal y datos de acceso. Debe incluir instrucciones claras y aplicar medidas de seguridad en el servidor.
<form action="/crear-cuenta" method="post">
<label for="nombre">Nombre completo</label>
<input type="text" id="nombre" name="nombre" required autocomplete="name">
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo" required autocomplete="email">
<label for="contrasena">Contraseña</label>
<input type="password" id="contrasena" name="contrasena" required autocomplete="new-password">
<label for="confirmacion">Repite la contraseña</label>
<input type="password" id="confirmacion" name="confirmacion" required autocomplete="new-password">
<button type="submit">Crear cuenta</button>
</form>El HTML no confirma por sí solo que las dos contraseñas coincidan. Esa comprobación puede realizarse con JavaScript para informar rápidamente al usuario, pero también debe hacerse en el servidor.
Cómo crear un formulario de inicio de sesión
<form action="/iniciar-sesion" method="post">
<label for="usuario">Correo electrónico</label>
<input type="email" id="usuario" name="usuario" required autocomplete="username">
<label for="clave">Contraseña</label>
<input type="password" id="clave" name="clave" required autocomplete="current-password">
<button type="submit">Iniciar sesión</button>
</form>Un inicio de sesión real debe incorporar protección contra intentos repetidos, almacenamiento seguro de contraseñas, sesiones protegidas, recuperación de cuenta y medidas contra ataques automatizados.
Cómo crear un formulario de búsqueda
Los formularios de búsqueda suelen utilizar el método get, porque la consulta puede representarse en la URL y compartirse.
<form action="/buscar" method="get">
<label for="busqueda">Buscar en el sitio</label>
<input type="search" id="busqueda" name="q" required>
<button type="submit">Buscar</button>
</form>El nombre q es solo un ejemplo. El servidor debe estar preparado para leer el parámetro utilizado y procesarlo de forma segura.
Cómo crear un formulario con radio buttons
Los botones de opción se utilizan cuando solo se permite elegir una alternativa.
<fieldset>
<legend>¿Cómo prefieres recibir la respuesta?</legend>
<label>
<input type="radio" name="respuesta" value="correo" required>
Correo electrónico
</label>
<label>
<input type="radio" name="respuesta" value="telefono">
Teléfono
</label>
<label>
<input type="radio" name="respuesta" value="presencial">
Atención presencial
</label>
</fieldset>Todos los botones del mismo grupo deben tener el mismo atributo name. Si cada uno tiene un nombre diferente, el navegador podría permitir seleccionar varias opciones.
Cómo crear un formulario con casillas
<fieldset>
<legend>¿Qué información te interesa recibir?</legend>
<label>
<input type="checkbox" name="intereses[]" value="noticias">
Noticias
</label>
<label>
<input type="checkbox" name="intereses[]" value="guias">
Guías prácticas
</label>
<label>
<input type="checkbox" name="intereses[]" value="avisos">
Avisos importantes
</label>
</fieldset>El uso de corchetes en el atributo name es una convención frecuente para indicar que pueden llegar varios valores. El servidor debe saber cómo interpretar esa estructura.
Cómo crear un formulario para adjuntar archivos
<form action="/recibir-documentos" method="post" enctype="multipart/form-data">
<label for="identificacion">Documento de identificación</label>
<input type="file" id="identificacion" name="identificacion" accept=".pdf,.jpg,.jpeg,.png" required>
<button type="submit">Enviar documento</button>
</form>El atributo accept sugiere los formatos permitidos al selector de archivos, pero no constituye una medida de seguridad. El servidor debe comprobar el tipo real, el tamaño, el nombre, el contenido y la autorización del usuario.
Cómo hacer un formulario con datalist
El elemento <datalist> ofrece sugerencias mientras la persona escribe, pero no limita necesariamente la respuesta a las opciones disponibles.
<label for="comuna">Comuna</label>
<input list="comunas" id="comuna" name="comuna">
<datalist id="comunas">
<option value="Rancagua"></option>
<option value="Santiago"></option>
<option value="Talca"></option>
</datalist>Si necesitas obligar a escoger una alternativa exacta, puede ser más apropiado utilizar <select> o validar el valor en el servidor.
Cómo organizar grupos de campos
Los elementos <fieldset> y <legend> ayudan a organizar grupos de controles relacionados. Son especialmente importantes cuando existen varios conjuntos de botones de opción o casillas.
<fieldset>
<legend>Datos de contacto</legend>
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo">
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" name="telefono">
</fieldset>Una estructura ordenada facilita la lectura, el mantenimiento del código y el uso de tecnologías de asistencia.
Validación de formularios en HTML
HTML incorpora mecanismos de validación que pueden comprobar si un campo es obligatorio, si un correo tiene un formato básico, si un número se encuentra dentro de un rango o si un texto respeta una longitud determinada.
required
El atributo required indica que el campo debe tener un valor antes de enviar el formulario.
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" required>minlength y maxlength
Estos atributos establecen una longitud mínima y máxima para campos de texto.
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" minlength="20" maxlength="1000" required></textarea>min, max y step
Se utilizan principalmente con números, fechas y otros controles compatibles.
<label for="cantidad">Cantidad</label>
<input type="number" id="cantidad" name="cantidad" min="1" max="20" step="1" required>pattern
El atributo pattern permite establecer una expresión regular para validar ciertos formatos.
<label for="codigo">Código de cliente</label>
<input type="text" id="codigo" name="codigo" pattern="[A-Z]{3}[0-9]{4}" required>Las expresiones regulares deben utilizarse con cuidado. Una regla demasiado estricta puede rechazar datos válidos escritos con una variación legítima.
accept
El atributo accept orienta al usuario sobre los archivos que puede seleccionar.
<input type="file" name="foto" accept="image/png, image/jpeg">No debe utilizarse como única medida de seguridad. La validación definitiva debe hacerse en el servidor.
Validación del lado del cliente y del servidor
La validación del lado del cliente ocurre en el navegador antes de enviar los datos. Permite mostrar errores rápidamente y evita solicitudes innecesarias.
La validación del lado del servidor ocurre después de recibir la solicitud. Es obligatoria porque el usuario puede desactivar JavaScript, modificar el HTML o enviar una solicitud directamente sin utilizar el formulario visible.
Ambas validaciones cumplen funciones diferentes. La del navegador mejora la experiencia; la del servidor protege la aplicación y garantiza que los datos cumplan las reglas antes de almacenarlos o utilizarlos.
Cómo utilizar autocomplete
El atributo autocomplete ayuda al navegador a completar datos conocidos, como nombre, correo, teléfono, dirección o credenciales.
<input type="text" name="nombre" autocomplete="name">
<input type="email" name="correo" autocomplete="email">
<input type="tel" name="telefono" autocomplete="tel">Usar valores adecuados puede hacer que el formulario sea más rápido y accesible, especialmente en teléfonos.
Cómo mejorar la accesibilidad
Un formulario accesible debe poder utilizarse por personas con diferentes capacidades, dispositivos y formas de navegación. La accesibilidad no es un detalle opcional; forma parte de la calidad técnica de una página.
Usar etiquetas visibles
Cada campo debe tener una etiqueta que explique qué información se solicita. No dependas únicamente del atributo placeholder, porque el texto desaparece cuando la persona comienza a escribir.
Asociar correctamente las etiquetas
Relaciona el label con el control utilizando for e id, o coloca el control dentro de la etiqueta cuando corresponda.
Explicar los errores
Los mensajes de error deben indicar qué ocurrió y cómo corregirlo. “Dato inválido” es menos útil que “Escribe un correo con un formato válido, por ejemplo, nombre@dominio.cl”.
No depender solo del color
No uses únicamente bordes rojos o verdes para indicar errores y aciertos. Añade texto o señales que también puedan percibirse sin distinguir colores.
Mantener un orden lógico
El orden visual y el orden de navegación deben tener sentido. Los campos deben avanzar de forma coherente y el usuario debe poder completar el formulario sin saltos inesperados.
Permitir navegación mediante teclado
Comprueba que el formulario pueda utilizarse con teclado. El foco debe ser visible y no debe quedar atrapado en un control.
Cómo definir un diseño con CSS
HTML define la estructura, mientras que CSS permite controlar el ancho, los espacios, los colores, la tipografía y la presentación visual.
<style>
form {
max-width: 700px;
margin: 0 auto;
}
form div {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.35rem;
font-weight: 600;
}
input,
select,
textarea {
width: 100%;
box-sizing: border-box;
padding: 0.75rem;
font: inherit;
}
button {
padding: 0.75rem 1.25rem;
cursor: pointer;
}
</style>Un diseño ancho y flexible ayuda a que el formulario se adapte a pantallas de distintos tamaños. En teléfonos, los campos deben ser suficientemente grandes para tocarse sin dificultad.
Cómo crear mensajes de ayuda
Los mensajes de ayuda explican el formato esperado o aclaran una condición. Puedes utilizar un párrafo relacionado con el campo mediante aria-describedby.
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" name="telefono" aria-describedby="ayuda-telefono">
<p id="ayuda-telefono">Incluye el código de área si corresponde.</p>La ayuda debe ser breve y estar situada cerca del campo correspondiente.
Cómo crear formularios con varias etapas
Los formularios extensos pueden dividirse en varias páginas o etapas. Una manera sencilla es utilizar diferentes secciones y controlar la navegación con JavaScript. También puedes crear varias páginas HTML conectadas entre sí, aunque en ese caso debes mantener los datos temporales de forma segura.
Divide el formulario cuando existan grupos claramente diferenciados, como datos personales, dirección, preferencias y confirmación. No lo dividas solo para ocultar la longitud real del proceso.
Cómo enviar datos a un servidor
El formulario envía los controles que tienen un atributo name y que no están deshabilitados. La aplicación del servidor recibe esos valores y debe decidir qué hacer con ellos.
Un ejemplo conceptual con una ruta del servidor es:
<form action="/api/contacto" method="post">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" required>
<label for="correo">Correo</label>
<input type="email" id="correo" name="correo" required>
<button type="submit">Enviar</button>
</form>La ruta /api/contacto debe existir y saber recibir el método utilizado. HTML por sí solo no crea esa ruta ni envía automáticamente un correo.
Cómo proteger un formulario
Los formularios públicos pueden recibir spam, datos falsos, archivos peligrosos o intentos de ataque. La seguridad debe contemplarse tanto en el navegador como en el servidor.
- Utiliza HTTPS.
- Valida todos los datos en el servidor.
- Escapa el contenido antes de mostrarlo en una página.
- Utiliza consultas preparadas al trabajar con bases de datos.
- Controla el tamaño y tipo de archivos.
- Aplica protección contra solicitudes automatizadas cuando sea necesario.
- Limita la frecuencia de envíos.
- No muestres información sensible en mensajes de error.
- Utiliza tokens contra ataques de falsificación de solicitudes cuando corresponda.
- Protege las sesiones y las cuentas de usuario.
Un campo oculto, un atributo disabled o una validación HTML no deben considerarse mecanismos de seguridad. El usuario puede modificar el código antes del envío.
Cómo usar el atributo autocomplete de forma adecuada
El autocompletado mejora la velocidad de respuesta, pero debe configurarse de acuerdo con el tipo de dato. Algunos valores habituales son:
namepara el nombre completo.given-namepara el nombre.family-namepara el apellido.emailpara el correo electrónico.telpara el teléfono.street-addresspara la dirección.postal-codepara el código postal.countrypara el país.usernamepara el nombre de usuario.current-passwordpara la contraseña actual.new-passwordpara una contraseña nueva.
Estos valores ayudan a los navegadores y administradores de contraseñas a interpretar mejor los controles.
Cómo crear un formulario de reserva
<form action="/reservas" method="post">
<label for="fecha">Fecha de reserva</label>
<input type="date" id="fecha" name="fecha" required>
<label for="hora">Hora</label>
<input type="time" id="hora" name="hora" required>
<label for="personas">Cantidad de personas</label>
<input type="number" id="personas" name="personas" min="1" max="20" required>
<button type="submit">Solicitar reserva</button>
</form>El servidor debe comprobar que la fecha y hora estén disponibles. El navegador solo ayuda a seleccionar valores; no conoce necesariamente la disponibilidad real.
Cómo crear un formulario de solicitud
Una solicitud puede tener un campo para elegir el tipo de trámite, una descripción y documentos de respaldo.
<form action="/solicitudes" method="post" enctype="multipart/form-data">
<label for="tipo">Tipo de solicitud</label>
<select id="tipo" name="tipo" required>
<option value="">Selecciona una opción</option>
<option value="informacion">Solicitud de información</option>
<option value="actualizacion">Actualización de datos</option>
<option value="reclamo">Reclamo</option>
</select>
<label for="detalle">Describe tu solicitud</label>
<textarea id="detalle" name="detalle" rows="7" required></textarea>
<label for="respaldo">Documento de respaldo</label>
<input type="file" id="respaldo" name="respaldo">
<button type="submit">Enviar solicitud</button>
</form>Cuando el formulario recopila información de identidad, documentos o antecedentes sensibles, debes explicar cómo se utilizarán y protegerán esos datos.
Cómo utilizar mensajes de error personalizados
La validación HTML muestra mensajes del navegador, pero puedes mejorar la experiencia con JavaScript o con mensajes generados por el servidor. El mensaje debe aparecer cerca del campo, explicar el problema y conservar la información que el usuario ya escribió siempre que sea posible.
Evita borrar todo el formulario cuando existe un error en un solo campo. Eso obliga a repetir el proceso y aumenta la frustración.
Cómo probar formularios en distintos dispositivos
Un formulario debe probarse en computadores, teléfonos y tabletas. Comprueba el tamaño de los campos, la facilidad para tocar los botones, el funcionamiento del teclado, la orientación de la pantalla y la lectura de los mensajes.
También prueba diferentes navegadores. Los controles de fecha, hora, archivos y validación pueden presentarse de forma distinta.
Recomendaciones antes de comenzar
Antes de escribir el código, define con precisión el objetivo del formulario. Pregúntate qué datos necesitas, quién los proporcionará, cómo se utilizarán y qué respuesta recibirá la persona después de enviarlos.
Prepara una lista de campos y agrúpalos por tema. Por ejemplo, un formulario de registro puede dividirse en identidad, contacto, credenciales y confirmación.
Elige el tipo de control más adecuado para cada dato. No uses un campo de texto para todo si puedes aprovechar tipos como email, date, number o tel.
Define desde el comienzo qué campos serán obligatorios. Si lo decides al final, puedes terminar solicitando información innecesaria o generar contradicciones en la estructura.
Planifica también el procesamiento. Un formulario que solo debe abrir un enlace puede ser sencillo, pero uno que almacena datos necesita validación, seguridad, permisos y respaldo.
Errores comunes que conviene evitar
Uno de los errores más comunes es crear campos sin el atributo name. El usuario puede escribir la información, pero el servidor no recibirá correctamente ese valor.
Otro error frecuente es no asociar los campos con etiquetas. Esto reduce la accesibilidad y puede dificultar el uso con lectores de pantalla.
También conviene evitar:
- Utilizar
placeholdercomo única etiqueta. - Usar el método
getpara datos que no deberían aparecer en la URL. - Confiar solo en la validación del navegador.
- Permitir archivos sin comprobar su tipo y tamaño en el servidor.
- Crear grupos de radio buttons con nombres diferentes.
- Usar un botón de envío cuando solo se necesita una acción local.
- Dejar campos obligatorios sin una explicación clara.
- Eliminar los datos escritos cuando aparece un error.
- Solicitar información personal que no es necesaria.
- Mostrar mensajes de error técnicos o incomprensibles.
- No probar el formulario en teléfonos.
- Compartir información sensible sin HTTPS.
- Confiar en campos ocultos como mecanismo de seguridad.
- No comprobar la disponibilidad de fechas u horarios en el servidor.
Canales, alternativas o recursos útiles
Para aprender la estructura de los formularios, el HTML Standard de WHATWG es la referencia técnica principal. Allí se describe el funcionamiento de <form>, <input>, <button>, <select>, <textarea> y otros elementos relacionados.
La documentación de MDN Web Docs ofrece explicaciones prácticas, ejemplos y referencias sobre controles, validación, accesibilidad y envío de datos.
Para comprobar si la estructura HTML contiene errores, puedes utilizar el validador del W3C. Una validación correcta no garantiza que el formulario sea fácil de usar o seguro, pero ayuda a detectar problemas de marcado.
Si deseas revisar criterios de accesibilidad, consulta las Pautas de Accesibilidad para el Contenido Web del W3C.
Cuándo conviene usar cada alternativa
HTML sin JavaScript es suficiente cuando solo necesitas una estructura básica, enviar datos a un servidor y utilizar las validaciones nativas del navegador.
CSS es necesario cuando quieres mejorar la apariencia, adaptar el formulario a teléfonos, crear columnas, destacar errores o establecer un diseño coherente con el resto del sitio.
JavaScript resulta útil para validar mientras la persona escribe, mostrar u ocultar campos, calcular valores, cargar información sin recargar la página o crear pasos interactivos. Sin embargo, no debe ser la única capa de validación.
Un lenguaje del lado del servidor es necesario cuando los datos deben almacenarse, enviarse por correo, generar una respuesta, crear una cuenta o interactuar con una base de datos.
Una plataforma externa puede ser conveniente cuando no quieres programar el procesamiento, necesitas compartir rápidamente un enlace o deseas utilizar funciones prediseñadas. Antes de elegirla, revisa sus condiciones, permisos, privacidad y limitaciones.
Preguntas frecuentes
¿Qué es un formulario en HTML?
Es una estructura de una página web que contiene controles para que el usuario introduzca y envíe información. Puede incluir campos de texto, botones, casillas, menús, fechas, archivos y otros elementos.
¿Para qué sirve la etiqueta form?
La etiqueta <form> agrupa los controles relacionados y define cómo se enviarán los datos mediante atributos como action y method.
¿Qué diferencia existe entre HTML y CSS en un formulario?
HTML define la estructura y los elementos del formulario. CSS controla su apariencia, distribución, colores, tamaños y adaptación visual.
¿HTML puede enviar correos electrónicos por sí solo?
No. HTML puede crear la interfaz del formulario, pero para enviar un correo de manera confiable se necesita un servidor, una aplicación o un servicio especializado que procese la información.
¿Qué es el atributo action?
Especifica la dirección a la que se enviarán los datos del formulario.
¿Qué es el atributo method?
Indica el método HTTP que se utilizará para enviar los datos. Los valores más comunes son get y post.
¿Cuándo conviene utilizar GET?
Es apropiado para búsquedas, filtros y consultas que pueden representarse en la URL. No es recomendable para contraseñas, datos sensibles o acciones que modifican información.
¿Cuándo conviene utilizar POST?
Es adecuado para registros, solicitudes, mensajes, cargas de archivos y operaciones que envían información al servidor o modifican datos.
¿Qué es el atributo name?
Es el nombre con el que el servidor identifica el valor de un control cuando recibe el formulario. Los campos que deben enviarse normalmente necesitan este atributo.
¿Qué es el atributo id?
Identifica un elemento dentro del documento y permite asociarlo con una etiqueta <label>, estilos o código JavaScript.
¿Qué diferencia hay entre id y name?
id identifica el elemento en la página, mientras que name identifica el dato que se envía al servidor. Pueden tener el mismo valor, pero cumplen funciones diferentes.
¿Para qué sirve label?
Sirve para describir un control del formulario. También mejora la accesibilidad y permite enfocar el campo cuando la persona hace clic en la etiqueta.
¿Qué pasa si un input no tiene name?
El usuario puede escribir un valor, pero ese valor puede no formar parte de los datos enviados al servidor.
¿Qué significa required?
Indica que el usuario debe completar o seleccionar el campo antes de enviar el formulario.
¿La validación HTML es suficiente para proteger un formulario?
No. La validación del navegador mejora la experiencia, pero puede modificarse o evitarse. El servidor debe validar nuevamente todos los datos recibidos.
¿Qué tipo de input sirve para un correo?
El tipo email es el más apropiado porque permite una validación básica y puede mostrar un teclado adecuado en dispositivos móviles.
¿Qué tipo de input sirve para un teléfono?
El tipo tel indica que el campo contiene un número telefónico y puede activar un teclado numérico en algunos dispositivos.
¿Qué tipo de input sirve para una fecha?
El tipo date permite seleccionar una fecha mediante un control adaptado al navegador.
¿Cómo creo una lista desplegable?
Utiliza la etiqueta <select> y agrega cada alternativa dentro de una etiqueta <option>.
¿Cómo permito elegir varias opciones?
Puedes utilizar casillas de verificación con input type="checkbox". Si necesitas una lista desplegable con varias selecciones, debes considerar la compatibilidad y la experiencia de uso.
¿Cómo permito elegir solo una opción?
Utiliza botones de opción con input type="radio" y asigna el mismo atributo name a todos los controles del grupo.
¿Para qué sirve textarea?
Sirve para que el usuario escriba varias líneas de texto, como comentarios, mensajes, descripciones o reclamos.
¿Cómo agrego un botón de envío?
Puedes utilizar <button type="submit">Enviar</button> o <input type="submit">.
¿Qué diferencia hay entre submit y button?
Un botón con tipo submit envía el formulario. Un botón con tipo button no lo envía automáticamente y puede utilizarse para otras acciones.
¿Para qué sirve reset?
Restablece los campos a sus valores iniciales. Debe utilizarse con precaución porque puede borrar información escrita por el usuario.
¿Cómo permito subir archivos?
Utiliza <input type="file">, el método post y normalmente enctype="multipart/form-data". El servidor debe comprobar el archivo recibido.
¿Qué hace el atributo accept?
Sugiere qué tipos de archivos debería seleccionar el usuario. No reemplaza la validación del servidor.
¿Cómo hago un campo obligatorio?
Agrega el atributo required al control correspondiente.
¿Cómo establezco una cantidad mínima?
En campos numéricos puedes utilizar min. En textos puedes utilizar minlength.
¿Cómo establezco una cantidad máxima?
En números puedes utilizar max. En textos puedes utilizar maxlength.
¿Qué es un formulario accesible?
Es un formulario que puede ser comprendido y utilizado por personas con diferentes capacidades, dispositivos y formas de navegación. Utiliza etiquetas claras, buen contraste, mensajes comprensibles y una estructura lógica.
¿Puedo usar placeholder en lugar de label?
No es recomendable. El placeholder desaparece cuando el usuario escribe y no sustituye una etiqueta visible y correctamente asociada.
¿Por qué es importante usar fieldset y legend?
Permiten agrupar controles relacionados y proporcionar un título al grupo, especialmente en conjuntos de botones de opción o casillas.
¿Se pueden crear formularios sin JavaScript?
Sí. Muchos formularios pueden funcionar con HTML, CSS y un servidor. JavaScript es útil para interacciones adicionales, pero no es imprescindible para todas las situaciones.
¿Puedo hacer que un formulario funcione sin servidor?
Puedes crear la interfaz y realizar validaciones locales, pero para guardar o procesar los datos necesitas un servidor, una aplicación o un servicio externo.
¿Los campos ocultos son seguros?
No. El usuario puede inspeccionar y modificar su valor. Nunca debes confiar en ellos para proteger información, precios, permisos o roles.
¿Por qué debo validar en el servidor?
Porque el usuario puede modificar el HTML, desactivar JavaScript o enviar solicitudes directamente. El servidor debe comprobar todos los datos antes de utilizarlos.
¿Cómo evito el spam en un formulario?
Puedes aplicar límites de frecuencia, controles contra automatización, validaciones, autenticación cuando corresponda y filtros en el servidor. La medida adecuada depende del tipo de formulario y del nivel de exposición pública.
¿Cómo evito ataques en formularios?
Utiliza HTTPS, valida los datos, escapa la salida, emplea consultas preparadas, controla archivos y protege las sesiones. Las medidas concretas dependen de la tecnología del servidor.
¿Cómo hago que el formulario se adapte al teléfono?
Utiliza CSS flexible, campos con ancho relativo, tamaños de texto legibles y botones fáciles de tocar. Prueba el formulario en diferentes pantallas antes de publicarlo.
¿Qué navegador debo utilizar para probar un formulario?
Prueba al menos en un navegador de computador y en uno o más navegadores móviles. Los controles de fecha, hora, archivos y validación pueden verse diferentes.
¿Cómo reviso si el HTML está bien escrito?
Puedes utilizar el validador del W3C. Además, revisa manualmente la accesibilidad, el funcionamiento del envío, la adaptación móvil y los mensajes de error.
¿Un formulario bien validado garantiza datos verdaderos?
No. La validación comprueba formatos y condiciones, pero no confirma que una persona haya entregado información verdadera. Cuando sea necesario, debes utilizar mecanismos adicionales de verificación.
¿Cómo conservo los datos escritos si ocurre un error?
El servidor puede devolver el formulario con los valores anteriores o JavaScript puede conservarlos temporalmente. Debes diseñar este comportamiento con cuidado para no almacenar información sensible de manera insegura.
¿Puedo usar HTML para crear formularios de trámites oficiales?
Sí, puedes crear una interfaz propia si tienes autorización y un sistema adecuado, pero no debes presentar un formulario como oficial si no pertenece a la institución responsable. Para trámites públicos, revisa siempre los canales oficiales.
¿Qué debo hacer después de crear el formulario?
Prueba todos los campos, revisa la validación, comprueba el procesamiento, verifica la seguridad, analiza la experiencia en teléfonos y confirma que los mensajes de éxito y error sean claros.
Los formularios en HTML permiten que una página web reciba información y establezca una comunicación directa con sus usuarios. Su estructura se basa principalmente en la etiqueta <form> y en controles como <input>, <textarea>, <select>, <button>, <fieldset> y <legend>.
Para crear un formulario correcto, primero debes definir su objetivo, elegir los campos necesarios, asociar cada control con una etiqueta, utilizar el tipo de entrada adecuado y configurar el método de envío. Después es necesario validar la información, proteger los datos, probar el resultado y comprobar que la experiencia sea clara tanto en computadores como en teléfonos.
HTML ofrece validaciones básicas, pero no reemplaza la revisión del servidor. Todo dato recibido debe validarse nuevamente antes de almacenarse, enviarse por correo, mostrarse en pantalla o utilizarse en una operación.
La accesibilidad también debe formar parte del diseño. Las etiquetas visibles, los mensajes de error comprensibles, el orden lógico, los grupos bien definidos y el uso correcto de los controles permiten que más personas puedan completar el formulario sin dificultades.
Cuando el formulario recopila información personal, documentos, contraseñas o archivos, es fundamental utilizar HTTPS, aplicar controles de seguridad y solicitar únicamente los datos necesarios. Para ampliar la información técnica, revisa el estándar HTML, la documentación de MDN y las pautas de accesibilidad del W3C.
Deja una respuesta