Sesión 5 – Formularios HTML

1

TeoríaFormularios para entrada de usuario

¿Qué son los formularios?

Los formularios permiten al usuario introducir datos que se envían a un servidor. Aunque todavía no aprenderemos el procesamiento en el servidor, crearemos la estructura HTML completa.

Elementos de formulario

<form> — Contenedor principal del formulario. Atributos: action (URL de destino) y method (GET o POST).
<label> — Etiqueta descriptiva de un campo. Se asocia con el campo mediante el atributo for.
<input> — Campo de entrada. Su comportamiento varía según el atributo type.
<textarea> — Área de texto multilínea.
<select> y <option> — Lista desplegable.
<button> — Botón (por defecto de tipo submit dentro de un formulario).
<fieldset> y <legend> — Agrupa campos relacionados con un título.

Tipos de input

Tipo	Descripción	Ejemplo
text	Campo de texto libre	Nombre, ciudad
email	Correo electrónico (con validación)	usuario@ejemplo.com
password	Contraseña (texto oculto)	●●●●●●
number	Número (con flechas +/-)	Edad, cantidad
tel	Teléfono	612 345 678
date	Selector de fecha	2026-03-15
checkbox	Casilla de verificación (selección múltiple)	Acepto los términos
radio	Botón de opción (selección única)	Hombre / Mujer / Otro
file	Selector de archivo	Subir foto
submit	Botón de envío	Enviar
reset	Botón de reinicio	Borrar formulario

Atributos útiles de los campos

placeholder — Texto de ejemplo dentro del campo (desaparece al escribir).
required — El campo es obligatorio; el formulario no se envía si está vacío.
name — Nombre del campo (se envía al servidor como clave).
value — Valor predeterminado del campo.
maxlength — Número máximo de caracteres.
min / max — Valores mínimo y máximo (para number, date, etc.).

frm

<form>

Contenedor del formulario con action y method.

in

<input>

Campo de entrada cuyo comportamiento depende de type.

lbl

<label>

Etiqueta accesible asociada con for/id.

fs

<fieldset>

Agrupa campos relacionados con un <legend>.

2

Ejemplo de códigoFormulario de contacto completo

Formulario de contacto

<form action="#" method="POST">
    <fieldset>
        <legend>Datos personales</legend>

        <label for="nombre">Nombre completo:</label>
        <input type="text" id="nombre" name="nombre"
               placeholder="Tu nombre y apellidos" required>

        <label for="email">Correo electrónico:</label>
        <input type="email" id="email" name="email"
               placeholder="tu@correo.com" required>

        <label for="telefono">Teléfono:</label>
        <input type="tel" id="telefono" name="telefono"
               placeholder="612 345 678">

        <label for="nacimiento">Fecha de nacimiento:</label>
        <input type="date" id="nacimiento" name="nacimiento">
    </fieldset>

    <fieldset>
        <legend>Tu mensaje</legend>

        <label for="asunto">Asunto:</label>
        <select id="asunto" name="asunto">
            <option value="">-- Selecciona --</option>
            <option value="info">Solicitar información</option>
            <option value="soporte">Soporte técnico</option>
            <option value="sugerencia">Sugerencia</option>
            <option value="otro">Otro</option>
        </select>

        <label for="mensaje">Mensaje:</label>
        <textarea id="mensaje" name="mensaje" rows="5"
                  placeholder="Escribe tu mensaje aquí..." required></textarea>
    </fieldset>

    <fieldset>
        <legend>Preferencias</legend>

        <p>¿Cómo prefieres que te contactemos?</p>
        <label>
            <input type="radio" name="contacto" value="email" checked>
            Por correo electrónico
        </label>
        <label>
            <input type="radio" name="contacto" value="telefono">
            Por teléfono
        </label>

        <label>
            <input type="checkbox" name="newsletter" value="si">
            Quiero recibir el boletín informativo
        </label>

        <label>
            <input type="checkbox" name="terminos" value="si" required>
            Acepto los términos y condiciones
        </label>
    </fieldset>

    <button type="submit">Enviar formulario</button>
    <button type="reset">Borrar todo</button>
</form>

3

PruébaloVe el formulario renderizado

Así se ve el formulario de contacto completo en el navegador. Puedes interactuar con los campos:

Resultado en el navegador

Datos personales Nombre completo: Correo electrónico: Teléfono: Fecha de nacimiento:

Tu mensaje Asunto: Mensaje:

Preferencias

¿Cómo prefieres que te contactemos?

Por correo electrónico Por teléfono

Quiero recibir el boletín informativo Acepto los términos y condiciones

4

Ejercicio prácticoPon en práctica lo aprendido

Crea un formulario de contacto

Abre (o crea) tu página contacto.html.
Crea un formulario de contacto completo que incluya:
- Campos de texto para nombre y apellidos.
- Campo de correo electrónico.
- Campo de teléfono.
- Una lista desplegable <select> para elegir el motivo del contacto.
- Un área de texto <textarea> para el mensaje.
- Botones de radio para elegir el método de contacto preferido.
- Una casilla de verificación para aceptar los términos.
- Un botón de envío y otro de reinicio.
Agrupa los campos relacionados con <fieldset> y <legend>.
Asegúrate de que cada campo tenga su <label> asociado con for/id.
Usa el atributo required en los campos obligatorios y placeholder para dar pistas al usuario.