Café y Código

4. Formularios e Inputs: Interactividad

La ventana hacia tu Servidor

Los formularios son la única forma de que tu sitio web reciba datos: correos para boletines, contraseñas para iniciar sesión o comentarios en una red social. Todo vive dentro de la etiqueta <form>.

✍️ El Mapa del Input

html
HTML
1 <form action="/login" method="POST">
2 <label for="user-id">Introduce tu nombre:</label>
3 <input id="user-id" type="text" name="username" placeholder="Tu nombre aquí..." required>
4
5 <label for="pass-id">Introduce tu contraseña:</label>
6 <input id="pass-id" type="password" name="userpass" required>
7
8 <button type="submit">¡Entrar!</button>
9 </form>
  • label for: Conecta el texto con el input (mejor para móviles y lectores).
  • type: Cambia drásticamente el input (password, email, date, range, file).
  • required: Evita que el usuario mande el formulario vacío.

Selectores y Areas

  • <textarea>: Para escribir textos largos (párrafos).
  • <select>: Desplegable de opciones (con option).
  • <input type="checkbox">: Casillas de verificación (marcar varios).
  • <input type="radio">: Botones radiales (elegir solo uno de un grupo).

Ponte a prueba

Ko-fi
Donaciones
Apoyá cafeycodigo con un café en Ko-fi. Colaboradores: insignia, muro y zona exclusiva.