Formularios: input, label y button
Cree formularios HTML accesibles con inputs etiquetados, distintos tipos de input, textareas, selects y botones de envío.
Formularios: input, label y button es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué utilizar formularios HTML?
Los formularios son la principal forma de enviar datos a un servidor: inicio de sesión, búsqueda, pago o comentarios. Los navegadores proporcionan una gran cantidad de funcionalidades integradas —validación, entrada mediante teclado y teclados móviles— que obtiene gratuitamente al utilizar elementos de formulario nativos.
El elemento <form>
El elemento <form> contiene todos los controles relacionados. El atributo action establece la URL que recibe los datos; method define GET o POST. En las SPA, a menudo se evita el envío predeterminado y se gestiona con JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Entradas de texto y correo electrónico
El elemento <input> es la pieza fundamental de los formularios. El atributo type cambia su comportamiento. Utilice type="text" para texto libre y type="email" para direcciones de correo electrónico (valida el formato y muestra el teclado móvil adecuado).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Contraseña, número y otros tipos
Otros tipos de entrada útiles: password (oculta los caracteres), number (valida valores numéricos y muestra controles de incremento), date (muestra un selector de fechas), range (deslizador), checkbox (conmutador booleano) y radio (elección entre varias opciones).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">El elemento <label> — esencial para la accesibilidad
Cada entrada debe tener un <label> asociado. La etiqueta indica a los usuarios y a los lectores de pantalla para qué sirve el campo. Al hacer clic en la etiqueta, se enfoca la entrada. Utilice el atributo for con el mismo valor que el id de la entrada.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea y Select
Utilice <textarea> para texto de varias líneas (por ejemplo, comentarios). Utilice <select> con elementos secundarios <option> para las opciones desplegables. Incluya siempre una opción vacía predeterminada con una indicación como «Elija una categoría».
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Casillas de verificación y botones de opción
Agrupe las casillas de verificación relacionadas con un <fieldset> y un <legend>. Los botones de opción que comparten el mismo name permiten seleccionar solo una opción. Cada uno necesita su propia etiqueta.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Botones: submit, reset y button
<button type="submit"> envía el formulario. type="reset" borra todos los campos. type="button" no hace nada de forma predeterminada y se utiliza con detectores de eventos de JavaScript. Establezca siempre el tipo: el valor predeterminado es submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Agrupar entradas con <fieldset>
<fieldset> agrupa controles relacionados de forma visual y semántica. El <legend> obligatorio proporciona un título. Los lectores de pantalla anuncian el título antes de cada control del grupo, lo que aporta contexto.
El atributo name: qué se envía
Cuando se envía un formulario, los navegadores envían el par name=value correspondiente a cada control. Solo se incluyen los controles que tienen un atributo name. En el caso de las casillas de verificación, solo se envían las que están marcadas.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Autorrelleno y autocompletado
Establezca valores del atributo autocomplete como email, given-name, new-password o current-password para ayudar a los gestores de contraseñas y al autorrelleno del navegador a completar los formularios correctamente.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Comprobación rápida
¿Cuál es la finalidad del atributo for en un elemento <label>?
Resumen: formularios HTML accesibles
Todo campo de entrada necesita una etiqueta. Elija el tipo de entrada adecuado para los datos. Agrupe los controles relacionados con fieldset. Use button type=submit para enviar el formulario. Aproveche las funciones nativas de los formularios —validación, navegación con el teclado y autorrelleno— antes de añadir JavaScript.
Preguntas frecuentes
¿La lección «Formularios: input, label y button» es gratis?
Sí — el texto completo de «Formularios: input, label y button» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Formularios: input, label y button»?
Cree formularios HTML accesibles con inputs etiquetados, distintos tipos de input, textareas, selects y botones de envío. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Formularios: input, label y button»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estructura del documento: DOCTYPE, html, head y body
- Etiquetas semánticas: header, nav, main, article y footer
- Texto, imágenes, enlaces y listas
- Formularios: input, label y button