0 Comentarios
Puede que te estés planteando hacer tu propia web, o quizá ya tengas una y te falta ese pequeño detalle que marca la diferencia: un formulario. Y claro, si no vienes del mundo del desarrollo, esto del HTML puede sonar a chino. Te entendemos. De verdad.
Pero no te preocupes, porque en este artículo queremos guiarte, paso a paso, para que sepas cómo hacer un formulario en HTML sin que te explote la cabeza. Nada de cosas raras ni tecnicismos innecesarios.
Y además, te vamos a contar cómo darle estilo con CSS, cómo hacer que funcione de verdad (no solo que se vea bonito) y cómo evitar errores que vemos casi a diario en proyectos que llegan a nuestras manos. Vamos, que si te lo lees entero, sales con un formulario hecho y derecho.
Un formulario HTML es, básicamente, una interfaz que permite a los usuarios introducir datos que luego pueden enviarse a un servidor para ser procesados. Lo ves cada vez que rellenas tus datos para suscribirte a una newsletter, registrarte en una web o hacer login.
Gracias a los formularios podemos:
Recoger nombres, correos, teléfonos...
Permitir a los usuarios enviar comentarios o preguntas
Hacer búsquedas internas
Realizar pedidos online
Y muchísimo más
Pero para que funcione bien, hay que estructurarlo correctamente.
Un formulario HTML no es una caja mágica. Tiene una estructura muy concreta con elementos que cumplen funciones muy específicas. Aquí te lo desglosamos:
Todo empieza por la etiqueta <form>. Es como el "contenedor principal" de todo el formulario.
<form action="/procesar" method="post">
<!-- campos aquí -->
</form>
Dos atributos clave aquí:
action: la URL a la que se envían los datos
method: el tipo de envío (GET o POST, lo veremos más abajo)
Estos son los famosos <input>, que pueden tener distintos type:
text: para nombres o frases cortas
email: valida que sea un correo electrónico
password: oculta los caracteres
number, checkbox, radio, file...
Ejemplo:
<input type="text" name="nombre" placeholder="Tu nombre">
<input type="email" name="email" placeholder="Tu correo">
Sin botón, no hay envío. El más usado es:
<button type="submit">Enviar</button>
También puedes usar <input type="submit">, pero el botón es más flexible.
Vamos a lo práctico. Un formulario simple puede verse así:
<form action="/procesar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required><button type="submit">Enviar</button>
</form>
Consejos rápidos:
Usa etiquetas <label> bien asociadas al id de cada input.
Añade required si el campo es obligatorio.
Cuida los nombres (name) porque son los que se envían.
Aquí es donde muchos se lían, pero es más sencillo de lo que parece.
HTML5 ya incorpora validaciones básicas con atributos como:
required
type="email" (valida formato de correo)
minlength / maxlength
pattern (expresiones regulares)
Ejemplo:
<input type="text" name="usuario" pattern="[A-Za-z]{3,}" title="Solo letras y mínimo 3 caracteres">
Y si quieres validar de forma más avanzada, puedes usar JavaScript o librerías como Parsley.js o Validate.js.
Esto suele generar confusión, así que lo aclaramos:
GET: los datos viajan en la URL. Útil para búsquedas. No es seguro para datos sensibles.
POST: los datos se envían de forma "oculta". Ideal para formularios de contacto, login, etc.
Por defecto, si no pones nada, se usa GET. Pero si vas en serio, usa POST:
<form action="/contacto" method="post">
Y recuerda: en el servidor tiene que haber algo que reciba esos datos (PHP, Node.js, etc.)
Un formulario sin estilo... pues es feo. Vamos a darle un poco de cariño con CSS:
form {
max-width: 400px;
margin: auto;
padding: 1em;
background: #f5f5f5;
border-radius: 5px;
}input, button {
width: 100%;
padding: 0.8em;
margin-bottom: 1em;
border: 1px solid #ccc;
border-radius: 3px;
}
Y ya, con esto, tu formulario empieza a parecer profesional. Si usas frameworks como Bootstrap, mejor aún.
Aquí tienes todo junto:
<form action="/procesar-formulario" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required><label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" required></textarea><button type="submit">Enviar</button>
</form>
Lo puedes copiar, pegar y empezar a trabajar sobre él.
Aquí van algunos fallos frecuentes que vemos en clientes nuevos:
No usar <label>: reduce la accesibilidad
Olvidar el atributo name: ¡los datos no se envían!
No validar los datos: te llegarán formularios vacíos
Usar GET para datos sensibles: mala práctica
Mala organización visual: todo apelotonado, sin márgenes
Evita estos errores y ya estarás por delante del 80% de formularios que hay por ahí.
Hacer un formulario en HTML no es tan complicado como parece, pero sí requiere atención a los detalles. Desde la estructura con <form>, hasta los inputs, la validación, el método de envío y el diseño... todo suma.
Nuestro consejo es: empieza simple y ve mejorando poco a poco. Prueba, rompe, vuelve a escribirlo. Y si necesitas ayuda profesional para tu sitio web, no estás solo.
¿Estás pensando en montar una web con formulario incluido? Échale un vistazo a nuestro servicio de diseño web en Alicante. En Overant combinamos desarrollo y estrategia para crear páginas que realmente funcionan.
Nos leemos en el siguiente artículo. ¡Y mucho ánimo con tus formularios!
¿Qué te ha parecido este artículo?