Curso HTML MÓDULO 5

📖 Curso de HTML para Principiantes

Módulo 5: Formularios

🎯 Objetivo

Aprender a crear formularios básicos en HTML para recopilar información del usuario mediante campos de texto, botones y selectores.

1. La etiqueta <form>

Un formulario se define con la etiqueta <form>. Dentro de ella se colocan los distintos campos de entrada.

html

<form action="procesar.php" method="post">
  <!-- Aquí van los campos -->
</form>

🔎 Explicación:

• action → indica a dónde se enviarán los datos (archivo o URL).
• method → define cómo se envían los datos:
  • get → visible en la URL (para búsquedas, filtros).
  • post → oculto en la URL (para datos sensibles).

2. Campos de texto y contraseñas

html

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

  <br><br>

  <label for="clave">Contraseña:</label>
  <input type="password" id="clave" name="clave">
</form>

💡 Tip: El atributo for del <label> debe coincidir con el id del campo para mejorar accesibilidad.

3. Botones

html

<form>
  <input type="submit" value="Enviar">
  <input type="reset" value="Borrar">
</form>

• submit → envía el formulario.
• reset → borra los datos introducidos.

4. Selectores y áreas de texto

html

<form>
  <label for="pais">País:</label>
  <select id="pais" name="pais">
    <option value="es">España</option>
    <option value="mx">México</option>
    <option value="ar">Argentina</option>
  </select>

  <br><br>

  <label for="mensaje">Mensaje:</label><br>
  <textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea>
</form>

5. Atributos importantes

• name → nombre del campo (clave con la que se envía el dato).
• value → valor inicial del campo.
• placeholder → texto de ayuda dentro del campo.
• required → hace que el campo sea obligatorio.

Ejemplo:

html

<input type="email" name="correo" placeholder="Escribe tu email" required>

6. Ejercicio práctico

👉 Crea un archivo formularios.html con:

• Un campo de texto para el nombre.
• Un campo de email obligatorio.
• Un selector con al menos 3 opciones de país.
• Un área de texto para comentarios.
• Un botón de envío.
• Un comentario que diga: <!-- Aquí empieza mi formulario -->.

7. Conceptos clave del módulo

• <form> agrupa los campos de entrada.
• Los campos más comunes son <input>, <select> y <textarea>.
• Los atributos (name, placeholder, required) controlan el comportamiento y la validación.
• Los formularios son la base de la interacción entre usuario y servidor.

📌 Mini-reto: Añade un campo de tipo number para que el usuario introduzca su edad, con un valor mínimo de 1 y máximo de 120.

HTML	MODULOS
Curso HTML	MÓDULO 6. Buenas prácticas y semántica
PÁGINA ANTERIOR	PÁGINA SIGUIENTE