Seguimos con nuestro curso de HTML5, y hoy vamos a meternos con algo súper práctico: formularios. Las etiquetas <form>, <input>, <textarea> y <button> te permiten crear espacios interactivos donde los usuarios pueden escribir, seleccionar y enviar información, como un formulario de contacto o un registro. ¡Vamos a construir formularios que conecten con tus usuarios!

¿Qué son los formularios en HTML?

Un formulario es como un cuestionario digital: permite a los usuarios ingresar datos (nombres, correos, mensajes) y enviarlos a algún lugar, como un servidor. Las etiquetas que veremos hoy son los bloques básicos para armarlo. Cada una tiene un rol específico:

• <form>: El contenedor que agrupa todo el formulario.
• <input>: Campos para entradas cortas (texto, números, casillas, etc.).
• <textarea>: Un área grande para escribir mensajes largos.
• <button>: El botón para enviar o interactuar con el formulario.

Todas son elementos semánticos y trabajan juntas para crear una experiencia interactiva.

<form> – El Contenedor del Formulario

La etiqueta <form> es la «caja» que envuelve todos los elementos del formulario. Define dónde empieza y termina, y configura cómo se enviarán los datos.

¿Cómo se usa?

• Apertura: <form>
• Contenido: Otros elementos como <input>, <textarea>, <button>.
• Cierre: </form>

Atributos clave

• action: La URL donde se envían los datos (por ejemplo, un script en un servidor).
• method: Cómo se envían los datos:
• GET: Los datos van en la URL (menos seguro, para búsquedas).
• POST: Los datos van ocultos (mejor para formularios sensibles).

Ejemplo básico:

<form action="/enviar" method="POST">
    <p>Este es un formulario vacío.</p>
</form>

• action="/enviar": Los datos irían a un script en «/enviar» (esto es un ejemplo, necesitas un servidor real).
• method="POST": Los datos se envían de forma segura.

<input> – Campos Versátiles para Entradas

La etiqueta <input> es la estrella de los formularios. Es un elemento vacío (sin cierre) que crea campos donde los usuarios escriben o seleccionan cosas. Su comportamiento depende del atributo type.

¿Cómo se usa?

• Solo: <input>
• Atributos clave:
• type: Define qué tipo de entrada (texto, correo, contraseña, etc.).
• name: Identifica el dato para enviarlo al servidor.
• id: Para conectar con una etiqueta <label>.
• placeholder: Texto guía que aparece en el campo.
• required: Obliga a llenar el campo.

Tipos comunes de type

• text: Campo de texto corto.
• email: Para correos (valida el formato).
• password: Oculta lo que escribes.
• checkbox: Casillas para marcar.
• radio: Botones para elegir una opción.
• number: Números (puedes usar min y max).

Ejemplo básico:

<input type="text" name="nombre" placeholder="Tu nombre" required>

Resultado: Un campo donde puedes escribir tu nombre, obligatorio.

<textarea> – Espacio para Mensajes Largos

La etiqueta <textarea> crea un área de texto grande, ideal para mensajes largos como comentarios o descripciones. A diferencia de <input>, no es vacía y tiene apertura/cierre.

¿Cómo se usa?

• Apertura: <textarea>
• Contenido: Texto por defecto (opcional).
• Cierre: </textarea>

Atributos clave

• name: Identifica el dato.
• id: Para conectar con <label>.
• rows y cols: Tamaño del área (número de filas y columnas).
• placeholder: Texto guía.
• required: Obligatorio.

Ejemplo básico:

<textarea name="mensaje" rows="4" cols="50" placeholder="Escribe tu mensaje"></textarea>

Resultado: Un cuadro de texto de 4 filas y 50 columnas de ancho.

<button> – Acción con un Clic

La etiqueta <button> crea botones interactivos, normalmente para enviar el formulario o realizar otra acción. No es vacía, tiene contenido.

¿Cómo se usa?

• Apertura: <button>
• Contenido: El texto o elemento que se ve en el botón.
• Cierre: </button>

Atributos clave

• type:
• submit: Envía el formulario.
• reset: Borra los datos del formulario.
• button: Acción genérica (necesita JavaScript).
• id o class: Para diseño.

Ejemplo básico:

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

Resultado: Un botón que dice «Enviar» y envía el formulario.

Combinándolas: Ejemplo Completo

Vamos a crear un formulario de contacto funcional y bien estructurado:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario de Contacto</title>
    <style>
        /* Estilo general */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        /* Estilo para el header */
        header {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
        }

        /* Estilo para el contenido principal */
        main {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Estilo para el formulario */
        form {
            padding: 15px;
            background-color: #ecf0f1;
            border-radius: 8px;
        }
        form label {
            display: block;
            margin-bottom: 5px;
            color: #2c3e50;
            font-weight: bold;
        }
        form input, form textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        form input:focus, form textarea:focus {
            border-color: #3498db;
            outline: none;
        }
        form textarea {
            resize: vertical;
        }
        form button {
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            margin-right: 10px;
        }
        form button:hover {
            background-color: #2980b9;
        }
        form button[type="reset"] {
            background-color: #7f8c8d;
        }
        form button[type="reset"]:hover {
            background-color: #6c757d;
        }

        /* Estilo para el footer */
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 15px;
            position: relative;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- Cabecera -->
    <header>
        <h1>Contáctame</h1>
    </header>

    <!-- Formulario -->
    <main>
        <form action="/contacto" method="POST">
            <!-- Campo de nombre -->
            <label for="nombre">Nombre:</label>
            <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>

            <!-- Campo de correo -->
            <label for="email">Correo:</label>
            <input type="email" id="email" name="email" placeholder="tu@correo.com" required>

            <!-- Área de mensaje -->
            <label for="mensaje">Mensaje:</label>
            <textarea id="mensaje" name="mensaje" rows="5" placeholder="Escribe aquí..." required></textarea>

            <!-- Botones -->
            <button type="submit">Enviar</button>
            <button type="reset">Borrar</button>
        </form>
    </main>

    <!-- Pie -->
    <footer>
        <p>© 2025 - Juan</p>
    </footer>
</body>
</html>

¿Qué ves?

• Un <header> con un título.
• Un <form> en <main> con:
• Un campo de texto para el nombre.
• Un campo de correo electrónico.
• Un área de texto para mensajes.
• Botones para enviar o borrar.
• <label> conecta cada campo con un texto descriptivo (mejora accesibilidad).
• <br> organiza los campos en líneas separadas.

Nota:

• El action="/contacto" es un ejemplo. Necesitas un servidor para procesar los datos en la vida real (lo veremos en módulos avanzados).

Anidamiento y Mejoras

Puedes combinar formularios con otras etiquetas semánticas o añadir más opciones:

Con <fieldset> para agrupar:

<form action="/registro" method="POST">
    <fieldset>
        <legend>Datos Personales</legend>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required>
    </fieldset>
    <button type="submit">Enviar</button>
</form>

• <fieldset> agrupa campos relacionados, y <legend> le da un título.

Con <input type=»radio»>:

<form action="/encuesta" method="POST">
    <p>¿Qué prefieres?</p>
    <input type="radio" id="html" name="lenguaje" value="html">
    <label for="html">HTML</label><br>
    <input type="radio" id="css" name="lenguaje" value="css">
    <label for="css">CSS</label><br>
    <button type="submit">Votar</button>
</form>

name="lenguaje" asegura que solo se elija una opción.

Consejos

• Usa <label>: Conecta cada <input> o <textarea> con un <label> usando for e id para accesibilidad.
• Prueba todos los type: Juega con text, email, checkbox, etc., para ver cómo funcionan.
• No olvides name: Sin él, los datos no se envían correctamente.
• Testea tu formulario: Aunque no tengas servidor, completa el formulario y mira cómo se ve.

Los que ha aprendidos hoy:

• <form>: El contenedor que organiza y envía los datos.
• <input>: Campos versátiles para entradas cortas (texto, correo, etc.).
• <textarea>: Área grande para mensajes largos.
• <button>: Botones para enviar o interactuar.

Con estas etiquetas, puedes crear formularios básicos que hagan tu web interactiva. ¿Te animas a hacer tu propio formulario de contacto o encuesta? El siguiente capitulo habláramos sobre Validación Básica de Formularios.