Módulo 6: Formularios en HTML

 

Módulo 6: Formularios en HTML

En esta lección aprenderás a crear formularios en HTML para recopilar datos de los usuarios, como nombres, correos y comentarios.

---

¿Qué es un formulario en HTML?

Un formulario permite a los usuarios enviar datos a un servidor. Se construye con la etiqueta <form> y contiene diferentes campos de entrada.

• <form> – Define el formulario.
• <input> – Campo de entrada de datos.
• <label> – Etiqueta descriptiva para un campo.
• <textarea> – Campo de texto largo.
• <select> – Lista desplegable.
• <button> – Botón de envío.

---

Estructura básica de un formulario

<form action="/enviar" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"><br><br> <label for="email">Correo:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">Enviar</button> </form>

Salida:

Nombre:

Correo:

---

Tipos de <input>

Algunos de los tipos más comunes:

• text – texto corto.
• email – correos electrónicos.
• password – contraseña oculta.
• number – solo números.
• radio – seleccionar una opción.
• checkbox – seleccionar múltiples opciones.

---

Área de texto y listas desplegables

<label for="mensaje">Mensaje:</label><br> <textarea id="mensaje" name="mensaje" rows="4" cols="30"></textarea><br><br> <label for="pais">País:</label> <select id="pais" name="pais"> <option value="chile">Chile</option> <option value="mexico">México</option> <option value="espana">España</option> </select>

---

Buenas prácticas con formularios

• Usa siempre <label> para describir cada campo.
• Define correctamente el type de cada <input>.
• Agrega atributos como required para campos obligatorios.
• Usa method="post" para datos sensibles.

---

Preguntas de Repaso

Pregunta 1

¿Qué etiqueta define un formulario en HTML?

• A) <input>
• B) <form>
• C) <label>
• D) <textarea>

✅ Respuesta correcta: B) <form>

---

Pregunta 2

¿Qué atributo de <form> define cómo se envían los datos?

• A) action
• B) method
• C) type
• D) send

✅ Respuesta correcta: B) method

---

Pregunta 3

¿Qué tipo de <input> se usa para contraseñas?

• A) text
• B) password
• C) hidden
• D) secure

✅ Respuesta correcta: B) password

---

Pregunta 4

¿Qué etiqueta permite escribir un texto largo?

• A) <input>
• B) <textarea>
• C) <label>
• D) <longtext>

✅ Respuesta correcta: B) <textarea>

---

Pregunta 5

¿Qué atributo hace que un campo sea obligatorio?

• A) must
• B) required
• C) mandatory
• D) needed

✅ Respuesta correcta: B) required

Esta lección forma parte del curso básico de HTML. En la siguiente aprenderás sobre multimedia en HTML (audio y video).