Formularios en HTML: input, label, select, textarea y validaciones básicas

Los formularios son una de las formas principales de recibir datos de los usuarios en una página web. Con ellos podemos construir registros, búsquedas, formularios de contacto, encuestas, filtros y muchas otras interfaces.

¿Qué es un formulario HTML?

Un formulario agrupa controles que permiten al usuario ingresar o seleccionar información.

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

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

La etiqueta form

Todo formulario comienza normalmente con <form>.

<form action="/procesar" method="post">
    ...
</form>

Dos atributos importantes son:

• action: indica a qué dirección se enviarán los datos;
• method: indica el método HTTP utilizado para enviarlos.

GET y POST

Los dos métodos más habituales en formularios HTML son GET y POST.

GET

Los datos suelen formar parte de la URL.

<form action="/buscar" method="get">
    <input type="text" name="q">
    <button type="submit">Buscar</button>
</form>

Un resultado conceptual podría ser:

/buscar?q=python

GET es habitual para búsquedas, filtros y consultas que no modifican datos.

POST

POST envía los datos dentro de la solicitud HTTP y suele utilizarse cuando enviamos información para ser procesada o almacenada.

<form action="/registro" method="post">
    ...
</form>

La elección entre GET y POST depende del propósito de la operación. No debe pensarse que POST convierte automáticamente un formulario en seguro: la seguridad depende también de HTTPS, validaciones, autenticación y del procesamiento del servidor.

label: describir correctamente un campo

La etiqueta label indica qué representa un control.

<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email">

El atributo for debe coincidir con el id del campo.

Esto mejora la usabilidad y la accesibilidad, ya que al hacer clic en el texto del label se activa el control asociado.

input: el control más utilizado

La etiqueta input puede adoptar distintos comportamientos mediante el atributo type.

Input de texto

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

Sirve para ingresar texto corto.

Correo electrónico

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

El navegador puede comprobar que el valor tenga una estructura compatible con un correo electrónico.

Contraseña

<input type="password" name="clave">

El navegador oculta visualmente los caracteres mientras se escriben.

Esto no cifra la contraseña por sí mismo. La transmisión segura depende, entre otras cosas, de utilizar HTTPS y de un tratamiento correcto en el servidor.

Números

<input type="number" name="edad">

Podemos agregar límites:

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

Fecha

<input type="date" name="fecha_nacimiento">

Radio buttons

Los botones de opción permiten elegir una sola alternativa dentro de un grupo.

<input
    type="radio"
    id="basico"
    name="nivel"
    value="basico"
>
<label for="basico">Básico</label>

<input
    type="radio"
    id="intermedio"
    name="nivel"
    value="intermedio"
>
<label for="intermedio">Intermedio</label>

Todos los elementos del grupo comparten el mismo atributo name.

Checkbox

Un checkbox representa normalmente una opción independiente que puede estar marcada o no.

<input
    type="checkbox"
    id="terminos"
    name="terminos"
    value="aceptados"
>

<label for="terminos">
    Acepto los términos
</label>

Archivos

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

Permite al usuario seleccionar un archivo desde su dispositivo.

Cuando un formulario realmente envía archivos al servidor suelen ser necesarias configuraciones adicionales, como enctype="multipart/form-data".

Botón de envío

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

También podemos utilizar:

<button type="submit">Enviar</button>

El atributo name

name es especialmente importante porque identifica el dato cuando el formulario es enviado.

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

Podemos pensar conceptualmente en el envío como:

nombre=Ana

El atributo value

value representa el valor asociado al control.

<input
    type="radio"
    name="lenguaje"
    value="python"
>

Si esa opción está seleccionada, el valor enviado será python.

Placeholder

<input
    type="text"
    name="nombre"
    placeholder="Ejemplo: Ana Pérez"
>

El placeholder ofrece una ayuda visual temporal, pero no debería reemplazar al label.

Campos obligatorios con required

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

El navegador evitará normalmente el envío mientras el campo requerido esté vacío o no cumpla las restricciones básicas de su tipo.

minlength y maxlength

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

min y max

<input
    type="number"
    name="cantidad"
    min="1"
    max="10"
>

select y option

Para seleccionar una alternativa de una lista podemos utilizar select.

<label for="pais">País</label>

<select id="pais" name="pais">
    <option value="ar">Argentina</option>
    <option value="uy">Uruguay</option>
    <option value="cl">Chile</option>
</select>

Una opción inicial

<select name="lenguaje" required>
    <option value="">Seleccione un lenguaje</option>
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
</select>

textarea

Para textos más largos utilizamos textarea.

<label for="mensaje">Mensaje</label>

<textarea
    id="mensaje"
    name="mensaje"
    rows="5"
    cols="40"
></textarea>

button

La etiqueta button puede representar diferentes acciones.

<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>
<button type="button">Otro botón</button>

type="button" no envía el formulario por sí solo. Más adelante, con JavaScript, podremos asociarle comportamiento.

fieldset y legend

Cuando un formulario tiene varios grupos de campos relacionados, podemos organizarlos semánticamente.

<fieldset>

    <legend>Datos personales</legend>

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

    <label for="edad">Edad</label>
    <input
        type="number"
        id="edad"
        name="edad"
    >

</fieldset>

Validación nativa de HTML

HTML permite declarar algunas reglas de validación.

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

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

El navegador puede utilizar estas reglas para ayudar al usuario antes del envío.

HTML no reemplaza la validación del servidor

Las restricciones del navegador pueden evitar errores accidentales, pero un usuario o programa puede enviar solicitudes sin utilizar nuestro formulario.

Por eso, si un backend recibe:

• un correo electrónico;
• una edad;
• una contraseña;
• un archivo;
• cualquier otro dato;

debe validar nuevamente esa información en el servidor.

Ejemplo completo: formulario de registro

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de estudiante</title>
</head>

<body>

    <h1>Registro de estudiante</h1>

    <form action="/registro" method="post">

        <fieldset>

            <legend>Datos personales</legend>

            <p>
                <label for="nombre">Nombre</label><br>

                <input
                    type="text"
                    id="nombre"
                    name="nombre"
                    minlength="2"
                    maxlength="60"
                    required
                >
            </p>

            <p>
                <label for="email">Correo electrónico</label><br>

                <input
                    type="email"
                    id="email"
                    name="email"
                    required
                >
            </p>

            <p>
                <label for="edad">Edad</label><br>

                <input
                    type="number"
                    id="edad"
                    name="edad"
                    min="12"
                    max="120"
                    required
                >
            </p>

        </fieldset>

        <fieldset>

            <legend>Curso</legend>

            <p>
                <label for="lenguaje">
                    Lenguaje que desea aprender
                </label><br>

                <select
                    id="lenguaje"
                    name="lenguaje"
                    required
                >
                    <option value="">
                        Seleccione una opción
                    </option>

                    <option value="python">
                        Python
                    </option>

                    <option value="javascript">
                        JavaScript
                    </option>

                    <option value="html-css">
                        HTML y CSS
                    </option>
                </select>
            </p>

            <p>
                Nivel actual:
            </p>

            <input
                type="radio"
                id="inicial"
                name="nivel"
                value="inicial"
                required
            >

            <label for="inicial">Inicial</label>

            <input
                type="radio"
                id="intermedio"
                name="nivel"
                value="intermedio"
            >

            <label for="intermedio">
                Intermedio
            </label>

        </fieldset>

        <p>
            <label for="comentarios">
                Comentarios
            </label><br>

            <textarea
                id="comentarios"
                name="comentarios"
                rows="5"
            ></textarea>
        </p>

        <p>
            <input
                type="checkbox"
                id="terminos"
                name="terminos"
                value="aceptados"
                required
            >

            <label for="terminos">
                Acepto los términos y condiciones
            </label>
        </p>

        <button type="submit">
            Registrarme
        </button>

    </form>

</body>

</html>

¿Qué ocurre al presionar Enviar?

Cuando el usuario envía el formulario, el navegador reúne los controles que tienen un atributo name y prepara sus valores para enviarlos según el método y destino configurados.

HTML define esa estructura, pero para que exista un registro real necesitamos un sistema capaz de recibir y procesar los datos.

Por ejemplo, un backend desarrollado con PHP, Python, Java, Node.js u otra tecnología.

Más adelante, cuando avancemos en la ruta de desarrollo web, veremos cómo tomar los datos enviados por un formulario, validarlos y procesarlos realmente. Primero lo abordaremos desde JavaScript para entender la interacción en el navegador y luego podremos avanzar hacia el procesamiento del lado del servidor con un backend.

Accesibilidad en formularios

Algunas buenas prácticas básicas son:

• utilizar un label descriptivo para cada control;
• relacionar for con el id correspondiente;
• no depender únicamente del placeholder;
• agrupar opciones relacionadas con fieldset y legend cuando corresponda;
• usar el tipo de input adecuado;
• dar instrucciones claras cuando un dato tiene requisitos especiales.

Errores comunes

• crear campos sin name y esperar que el dato sea enviado;
• utilizar el mismo id en varios elementos;
• usar placeholder como único reemplazo del label;
• olvidar que varios radio buttons deben compartir el mismo name;
• pensar que required reemplaza la validación del backend;
• usar POST creyendo que los datos quedan automáticamente protegidos;
• no validar correctamente archivos enviados por el usuario;
• utilizar un button sin comprender su tipo.

Qué aprendimos

Con los formularios ya podemos construir interfaces que permitan al usuario ingresar información.

Trabajamos con:

• form;
• action y method;
• label;
• diferentes tipos de input;
• select y option;
• textarea;
• button;
• fieldset y legend;
• validaciones básicas del navegador;
• accesibilidad;
• diferencia entre estructurar un formulario y procesar realmente sus datos.

Seguí aprendiendo HTML

La guía anterior de esta serie es:

Etiquetas HTML esenciales: textos, enlaces, imágenes, listas y tablas

El próximo paso es profundizar en HTML semántico:

HTML semántico: header, nav, main, section, article, aside y footer →

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal