Formularios Parte 2

Amplía tus formularios con select, textarea, checkboxes, radios y validación nativa.

📖

Teoría

Más elementos de formulario para capturar diferentes tipos de datos:

<select> + <option> → Menú desplegable

<textarea> → Área de texto multilínea

<input type="checkbox"> → Casilla de verificación (múltiples selecciones)

<input type="radio"> → Botón de opción (una sola selección del grupo)

required, placeholder, min, max → Validación HTML nativa

html

<!-- Menú desplegable -->
<label for="pais">País:</label>
<select id="pais" name="pais">
  <option value="">-- Selecciona --</option>
  <option value="co">Colombia</option>
  <option value="mx">México</option>
  <option value="ar">Argentina</option>
</select>

<!-- Área de texto -->
<label for="bio">Biografía:</label>
<textarea id="bio" name="bio" rows="4" placeholder="Cuéntanos sobre ti..."></textarea>

<!-- Checkboxes (múltiples) -->
<p>¿Qué tecnologías te interesan?</p>
<input type="checkbox" id="html" name="tech" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="tech" value="css">
<label for="css">CSS</label>

<!-- Radio buttons (uno solo) -->
<p>Nivel de experiencia:</p>
<input type="radio" id="prin" name="nivel" value="principiante">
<label for="prin">Principiante</label>
<input type="radio" id="inter" name="nivel" value="intermedio">
<label for="inter">Intermedio</label>

⚡

Ejercicio práctico

🎯 Tu misión

Crea una encuesta sobre hábitos de estudio. Incluye: select para semestre, checkboxes para materias favoritas, radio buttons para preferencia de horario, y textarea para comentarios.

Vista previa

←Capítulo anterior

Siguiente capítulo→