Formularios Parte 1

Crea formularios para recopilar datos con inputs de texto, email, contraseña y botones.

📖

Teoría

Los formularios permiten que los usuarios envíen datos. Los elementos principales son:

<form> → Contenedor del formulario (atributos: action, method)

<input> → Campo de entrada (tipos: text, email, password, number, date)

<label> → Etiqueta descriptiva asociada a un input

<button> → Botón para enviar o interactuar

html

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

  <label for="nombre">Nombre completo:</label>
  <input
    type="text"
    id="nombre"
    name="nombre"
    placeholder="Ej: Ana García"
    required
  >

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

  <label for="password">Contraseña:</label>
  <input
    type="password"
    id="password"
    name="password"
    minlength="8"
    required
  >

  <button type="submit">Crear cuenta</button>
</form>

💡Asocia label con input

Siempre usa el atributo for en <label> con el mismo valor que el id del <input>. Esto mejora la accesibilidad: al hacer clic en el label, el foco va al input. También ayuda a lectores de pantalla.

⚡

Ejercicio práctico

🎯 Tu misión

Crea un formulario de registro completo para la plataforma DevPath con campos para: nombre, apellido, email, contraseña, confirmación de contraseña, edad, y un botón de registro.

Vista previa

←Capítulo anterior

Siguiente capítulo→