Los formularios son una parte fundamental de cualquier página web. Los usamos para enviar mensajes, iniciar sesión, registrarse, buscar información, suscribirse a una newsletter, pedir presupuestos o completar datos de compra.
Si estás aprendiendo HTML, entender cómo se crea un formulario es un paso muy importante. No solo porque aparece en casi todas las webs, sino porque te ayuda a comprender cómo el usuario interactúa con una página.
En esta guía aprenderás cómo crear formularios en HTML desde cero, qué etiquetas se utilizan, para qué sirve cada campo y qué debes tener en cuenta para hacer formularios claros, ordenados y fáciles de usar.
Qué es un formulario en HTML
Un formulario en HTML es una estructura que permite recoger información del usuario. Esa información puede ser un nombre, un correo electrónico, una contraseña, un mensaje, una fecha, una opción seleccionada o cualquier otro dato.
Por ejemplo, cuando una persona rellena una página de contacto, escribe su nombre, su email y su mensaje. Todo eso se introduce dentro de un formulario.
La etiqueta principal para crear un formulario es form. Dentro de ella se colocan los campos que el usuario debe completar.
Para qué sirve un formulario HTML
Un formulario HTML sirve para que el usuario pueda enviar información desde una página web.
Puede utilizarse en muchas situaciones:
Formulario de contacto
Formulario de registro
Formulario de inicio de sesión
Formulario de búsqueda
Formulario de suscripción
Formulario de reserva
Formulario de pedido
Encuestas onlineAunque el diseño puede cambiar mucho de una web a otra, la base siempre es la misma: campos para escribir datos y un botón para enviarlos.
Estructura básica de un formulario en HTML
La estructura más sencilla de un formulario incluye una etiqueta form, algunos campos input, etiquetas label y un botón de envío.
<form>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>Este es un formulario básico, pero ya contiene varias partes importantes.
La etiqueta label sirve para indicar qué debe escribir el usuario en cada campo. El atributo for conecta el texto del label con el campo correspondiente mediante el id.
La etiqueta input crea un campo de entrada. Según el valor de type, el campo puede ser de texto, email, contraseña, número, fecha o muchos otros tipos.
El botón con type="submit" permite enviar el formulario.
La etiqueta form
La etiqueta form agrupa todos los campos del formulario. Es el contenedor principal.
En un formulario real, esta etiqueta puede tener atributos como action y method.
<form action="/enviar-formulario" method="post">
...
</form>El atributo action indica a dónde se enviarán los datos. El atributo method indica cómo se enviarán.
Los métodos más comunes son get y post.
get suele usarse cuando los datos pueden aparecer en la URL, como en formularios de búsqueda. post se utiliza para enviar información de forma más privada, como mensajes de contacto, registros o contraseñas.
Si estás empezando, no necesitas dominar todavía la parte del servidor. Lo importante es entender que HTML crea la estructura del formulario, pero para procesar los datos normalmente necesitas una tecnología adicional, como PHP, JavaScript, WordPress, un backend o una herramienta externa.
Campos input más usados en HTML
La etiqueta input es una de las más utilizadas dentro de los formularios. Con ella puedes crear distintos tipos de campos.
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="tel">
<input type="date">
<input type="checkbox">
<input type="radio">
<input type="file">Cada tipo de input tiene una función diferente.
text se usa para textos cortos, como el nombre.email se usa para correos electrónicos.password oculta lo que escribe el usuario.number permite introducir números.tel se usa para teléfonos.date permite seleccionar una fecha.checkbox sirve para marcar una o varias opciones.radio permite elegir una sola opción dentro de un grupo.file permite subir archivos.
Elegir bien el tipo de campo ayuda a mejorar la experiencia del usuario y también facilita la validación básica del formulario.
La importancia de usar label
Una buena práctica al crear formularios en HTML es usar siempre label.
El label mejora la accesibilidad y hace que el formulario sea más fácil de entender. Además, cuando está conectado correctamente con el campo, el usuario puede hacer clic en el texto y activar el input.
Ejemplo:
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" name="telefono">En este caso, el atributo for="telefono" del label se conecta con el id="telefono" del input.
Esto parece un detalle pequeño, pero marca una gran diferencia en formularios profesionales.
El atributo name
El atributo name es muy importante porque identifica el dato que se enviará cuando el usuario complete el formulario.
<input type="text" id="nombre" name="nombre">En este ejemplo, el campo enviará un dato llamado nombre.
Si un campo no tiene atributo name, puede verse en la página, pero normalmente no se enviará correctamente al procesar el formulario.
Por eso, cada campo importante debe tener su propio name.
Placeholder: cuándo usarlo
El atributo placeholder muestra un texto dentro del campo antes de que el usuario escriba.
<input type="email" name="email" placeholder="ejemplo@correo.com">Puede ser útil para dar una pista, pero no debe reemplazar al label.
Un error común es crear formularios solo con placeholders y sin labels. El problema es que el placeholder desaparece cuando el usuario escribe, y eso puede generar confusión.
Lo mejor es usar label para explicar el campo y placeholder solo como ayuda adicional.
Campos obligatorios con required
HTML permite marcar campos como obligatorios usando el atributo required.
<input type="text" name="nombre" required>Cuando un campo tiene required, el navegador no permite enviar el formulario si está vacío.
También puedes usarlo en campos de email, textarea, select y otros elementos.
<input type="email" name="email" required>Esto no reemplaza una validación completa, pero ayuda a evitar errores básicos desde el navegador.
Crear un campo de mensaje con textarea
Para textos largos, como mensajes o comentarios, se utiliza la etiqueta textarea.
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5"></textarea>A diferencia de input, textarea tiene etiqueta de apertura y cierre.
El atributo rows permite indicar una altura inicial aproximada. Es muy útil en formularios de contacto, soporte o comentarios.
Crear listas desplegables con select
La etiqueta select permite crear un menú desplegable de opciones.
<label for="servicio">Servicio</label>
<select id="servicio" name="servicio">
<option value="">Selecciona una opción</option>
<option value="diseno-web">Diseño web</option>
<option value="seo">SEO</option>
<option value="branding">Branding</option>
</select>Este tipo de campo es útil cuando quieres que el usuario elija una opción concreta y evitar respuestas demasiado abiertas.
Por ejemplo, puedes usarlo para seleccionar un país, un servicio, una categoría, un horario o un tipo de consulta.
Checkbox y radio: diferencias
Los campos checkbox y radio se parecen, pero no hacen lo mismo.
El checkbox sirve para marcar una o varias opciones.
<label>
<input type="checkbox" name="newsletter">
Quiero recibir novedades
</label>El radio sirve para elegir una sola opción dentro de un grupo.
<label>
<input type="radio" name="plan" value="basico">
Plan básico
</label>
<label>
<input type="radio" name="plan" value="premium">
Plan premium
</label>Para que los radio funcionen como grupo, deben compartir el mismo atributo name.
Botones en formularios HTML
El botón más común en un formulario es el botón de envío.
<button type="submit">Enviar formulario</button>También existe type="reset", que limpia los campos del formulario, aunque no siempre es recomendable porque el usuario puede borrar información por error.
<button type="reset">Limpiar</button>En la mayoría de formularios modernos basta con un botón claro de envío, con un texto directo como “Enviar mensaje”, “Registrarme”, “Solicitar presupuesto” o “Crear cuenta”.
Ejemplo completo de formulario HTML
Aquí tienes un ejemplo más completo de formulario de contacto en HTML.
<form action="/contacto" method="post">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" placeholder="tu@email.com" required>
<label for="servicio">Servicio de interés</label>
<select id="servicio" name="servicio" required>
<option value="">Selecciona una opción</option>
<option value="diseno-web">Diseño web</option>
<option value="branding">Branding</option>
<option value="seo">Optimización SEO</option>
</select>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5" placeholder="Cuéntanos qué necesitas" required></textarea>
<label>
<input type="checkbox" name="privacidad" required>
Acepto la política de privacidad
</label>
<button type="submit">Enviar mensaje</button>
</form>Este formulario incluye campos de texto, email, selector, mensaje, checkbox obligatorio y botón de envío.
Es una buena base para un formulario de contacto sencillo.
Buenas prácticas para crear formularios HTML
Un formulario debe ser fácil de completar. Si pides demasiados datos, es probable que menos personas lo envíen.
Lo ideal es solicitar solo la información necesaria. Para un primer contacto, muchas veces basta con nombre, email y mensaje.
También es importante usar textos claros. En lugar de poner campos confusos, explica exactamente qué esperas del usuario.
Otra buena práctica es ordenar los campos de forma lógica. Primero los datos personales básicos, luego la consulta o selección, y al final el botón de envío.
En móvil, los formularios deben ser cómodos. Los campos deben tener buen tamaño, suficiente separación y textos fáciles de leer.
Errores comunes al crear formularios en HTML
Uno de los errores más frecuentes es no usar label. Esto hace que el formulario sea menos accesible y menos claro.
Otro error es olvidar el atributo name en los campos. Sin name, el dato puede no enviarse correctamente.
También es común usar un tipo de input incorrecto. Por ejemplo, usar text para un email en lugar de email.
Otro problema habitual es pedir demasiada información. Un formulario largo puede cansar al usuario y reducir las conversiones.
Por último, no conviene confiar únicamente en la validación HTML. El atributo required ayuda, pero en formularios reales también conviene validar los datos en el servidor o con JavaScript.
Preguntas frecuentes sobre formularios en HTML
¿Se puede crear un formulario solo con HTML?
Sí, puedes crear la estructura visual y los campos de un formulario solo con HTML. Pero para procesar, guardar o enviar los datos normalmente necesitas una tecnología adicional, como PHP, JavaScript, WordPress, un backend o una herramienta externa.
¿Cuál es la etiqueta principal de un formulario HTML?
La etiqueta principal es form. Dentro de ella se colocan los campos como input, textarea, select, label y button.
¿Para qué sirve required en HTML?
El atributo required indica que un campo es obligatorio. Si el usuario intenta enviar el formulario sin rellenarlo, el navegador mostrará una advertencia.
¿Qué diferencia hay entre input y textarea?
input se usa para campos cortos, como nombre, email o teléfono. textarea se usa para textos más largos, como mensajes, comentarios o descripciones.
¿Qué diferencia hay entre checkbox y radio?
checkbox permite seleccionar una o varias opciones. radio permite elegir solo una opción dentro de un grupo.
Conclusión
Crear formularios en HTML desde cero es una habilidad básica para cualquier persona que quiera aprender desarrollo web. Los formularios permiten que el usuario interactúe con la página y envíe información.
Para construir un buen formulario necesitas entender etiquetas como form, label, input, textarea, select y button. También debes usar correctamente atributos como type, name, id, for, required, action y method.
La clave está en hacer formularios simples, claros y fáciles de completar. Un formulario bien estructurado no solo mejora la experiencia del usuario, también hace que tu página sea más profesional.
