Formularios: recopilación de datos del usuario
Cree formularios sencillos con cuadros de texto, botones y mucho más
Formularios: recopilación de datos del usuario es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 2 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 HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Formularios: recopilar datos del usuario
¡Bienvenido a la siguiente lección! Hoy aprenderá a crear formularios en HTML. Los formularios permiten a los usuarios introducir datos, como su nombre o dirección de correo electrónico, en su página web.
¿Qué son los formularios?
Los formularios se utilizan para recopilar información de los usuarios. Por ejemplo, cuando crea una cuenta, completa un formulario con campos como su nombre y dirección de correo electrónico.
Los formularios en HTML se crean mediante la etiqueta <form>.
Crear un formulario básico
Un formulario se crea mediante la etiqueta <form>. Dentro de esta etiqueta, puede agregar campos de entrada, botones y mucho más.
Ejemplo:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
Tipos de campos de entrada de formularios
Los formularios HTML admiten distintos tipos de campos de entrada. Estos son algunos de los más comunes:
text: Para introducir textos brevesemail: Para direcciones de correo electrónicopassword: Para contraseñasnumber: Para números
Ejemplo:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
Agregar botones de opción y casillas de verificación
Puede usar botones de opción para elegir una sola opción y casillas de verificación para elegir varias opciones.
Ejemplo:
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
Agregar menús desplegables
Puede usar la etiqueta <select> para crear menús desplegables en los que los usuarios puedan elegir una opción de una lista.
Ejemplo:
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
Botones de formulario
Los botones permiten a los usuarios enviar o restablecer el formulario. Normalmente se utiliza la etiqueta <button>.
Ejemplo:
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Aplicar estilos al formulario
Puede aplicar estilos al formulario mediante CSS para hacerlo más atractivo. Por ejemplo, puede ajustar el tamaño de los campos o cambiar sus colores.
Ejemplo:
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
¡Excelente trabajo!
¡Felicidades! Ha aprendido a crear formularios, usar distintos tipos de entrada y aplicarles estilos. Los formularios son esenciales para recopilar datos de los usuarios y hacer que sus páginas web sean interactivas. En la próxima lección, explorará cómo usar contenido multimedia, como videos y audio, para hacer que sus páginas sean más dinámicas. ¡Prepárese para dar rienda suelta a su creatividad!
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 16
- Lecciones
- 35
Preguntas frecuentes
¿La lección «Formularios: recopilación de datos del usuario» es gratis?
Sí — el texto completo de «Formularios: recopilación de datos del usuario» 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 HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Formularios: recopilación de datos del usuario»?
Cree formularios sencillos con cuadros de texto, botones y mucho más Practicas HTML for Kids 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 HTML for Kids?
No se requiere experiencia previa. HTML for Kids 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 2 de 4.
¿Cuánto tiempo toma la lección «Formularios: recopilación de datos del usuario»?
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 HTML for Kids?
Sí. Cada lección de HTML for Kids 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
- Tablas: organización de datos
- Formularios: recopilación de datos del usuario
- Atributos de HTML
- Multimedia: añada vídeos y audio