Ejercicio práctico 8: Formulario con campos de selección y radio
Aprende a crear un formulario HTML con campos de selección y de radio. Descubre cómo usar etiquetas <select> y botones de radio <input type="radio">, además de <optgroup> y <textarea>.
Actividad
Añade al formulario anterior campos de selección <select> y botones de radio <input type="radio">.
Solución interactiva
Solución con el código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Formulario con Selección y Radio</title>
</head>
<body>
<h1>Formulario</h1>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" />
<br />
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" />
<br />
<label for="genero">Género:</label>
<input type="radio" id="masculino" name="genero" value="masculino" />
Masculino
<input type="radio" id="femenino" name="genero" value="femenino" />
Femenino
<br />
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="argentina">Argentina</option>
<option value="brasil">Brasil</option>
<option value="chile">Chile</option>
</select>
<br />
<button type="submit">Enviar</button>
</form>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Select con <optgroup> para categorizar opciones
Cuando tenés muchas opciones en un <select>, <optgroup> permite agruparlas por categoría.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Select con Optgroup</title>
</head>
<body>
<h1>Seleccioná tu Ciudad</h1>
<form>
<label for="ciudad">Ciudad:</label>
<select id="ciudad" name="ciudad" required>
<optgroup label="Argentina">
<option value="buenos-aires">Buenos Aires</option>
<option value="cordoba">Córdoba</option>
<option value="rosario">Rosario</option>
</optgroup>
<optgroup label="Brasil">
<option value="sao-paulo">São Paulo</option>
<option value="rio-de-janeiro">Rio de Janeiro</option>
</optgroup>
<optgroup label="Chile">
<option value="santiago">Santiago</option>
<option value="valparaiso">Valparaíso</option>
</optgroup>
</select>
<br /><br />
<button type="submit">Enviar</button>
</form>
</body>
</html>
optgroup agrega encabezados no seleccionables que organizan visualmente las opciones dentro del desplegable.
Variante 2: Radio buttons con opción preseleccionada
El atributo checked marca una opción por defecto. Todos los radio buttons de un mismo grupo deben compartir el mismo name.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Radio Buttons</title>
</head>
<body>
<h1>Encuesta Rápida</h1>
<form>
<p>¿Cuál es tu nivel de experiencia en programación?</p>
<input type="radio" id="principiante" name="experiencia" value="principiante" checked />
<label for="principiante">Principiante</label><br />
<input type="radio" id="intermedio" name="experiencia" value="intermedio" />
<label for="intermedio">Intermedio</label><br />
<input type="radio" id="avanzado" name="experiencia" value="avanzado" />
<label for="avanzado">Avanzado</label><br />
<input type="radio" id="experto" name="experiencia" value="experto" />
<label for="experto">Experto</label>
<br /><br />
<p>¿Recomendarías este curso?</p>
<input type="radio" id="si" name="recomienda" value="si" checked />
<label for="si">Sí</label>
<input type="radio" id="no" name="recomienda" value="no" />
<label for="no">No</label>
<input type="radio" id="tal-vez" name="recomienda" value="tal-vez" />
<label for="tal-vez">Tal vez</label>
<br /><br />
<button type="submit">Enviar Encuesta</button>
</form>
</body>
</html>
Regla clave: los radio buttons que pertenecen al mismo grupo deben tener name idéntico. Esto garantiza que solo se pueda seleccionar uno a la vez. value es lo que se envía al servidor.
Variante 3: <textarea> para comentarios multilínea
Para campos de texto largos como comentarios o biografías, usá <textarea> en lugar de <input type="text">.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Formulario con Textarea</title>
</head>
<body>
<h1>Dejanos tu Opinión</h1>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required />
<br /><br />
<label for="puntaje">Puntaje:</label>
<select id="puntaje" name="puntaje">
<option value="5">5 - Excelente</option>
<option value="4">4 - Muy Bueno</option>
<option value="3">3 - Bueno</option>
<option value="2">2 - Regular</option>
<option value="1">1 - Malo</option>
</select>
<br /><br />
<label for="comentario">Comentario:</label><br />
<textarea
id="comentario"
name="comentario"
rows="5"
cols="50"
placeholder="Escribí tu opinión acá..."
maxlength="500"
></textarea>
<br /><br />
<button type="submit">Enviar Opinión</button>
</form>
</body>
</html>
rowsycols: definen el tamaño visible del área (filas x columnas de caracteres).maxlength: límite de caracteres.placeholder: texto guía que desaparece al escribir.- A diferencia de
<input>,<textarea>tiene etiqueta de cierre</textarea>.
Mini-desafío: Ponelo a prueba
Creá un formulario de encuesta que contenga:
- Nombre (
<input type="text">) - País (
<select>con al menos 6 opciones agrupadas en 2<optgroup>) - Género (3 radio buttons con
name="genero", uno preseleccionado conchecked) - Comentarios (
<textarea>conrows,colsyplaceholder) - Todos los campos deben tener su
<label>asociado
Intentá armarlo completo sin mirar los ejemplos. Si te trabás, volvé a la variante que necesites.
Errores comunes con select y radio buttons
| Error | Por qué es un problema |
|---|---|
Radio buttons sin name compartido | Se pueden seleccionar varios a la vez. Los radios del mismo grupo deben tener name idéntico |
Olvidar el atributo value en radio buttons | El servidor recibe on en lugar del valor real. Siempre definí value |
Usar selected en vez de checked | selected es para <option>, checked es para radio y checkbox. Son atributos diferentes |
| No poner una opción por defecto en select | La primera opción queda seleccionada automáticamente, pero si no es una opción válida (ej: "Seleccioná...") puede enviar datos incorrectos |
<textarea> sin etiqueta de cierre | A diferencia de <input>, <textarea> no es auto-cerrable: requiere </textarea> |
Preguntas frecuentes
¿Cuándo usar radio buttons vs select?
Usá radio buttons cuando tengas pocas opciones (2 a 5) y querés que el usuario vea todas de un vistazo (ej: género, sí/no, nivel). Usá <select> cuando tengas muchas opciones (6+) o cuando el espacio sea limitado (ej: país, ciudad, año de nacimiento). La clave es visibilidad vs economía de espacio.
¿Puedo tener múltiples <select> en el mismo formulario?
Sí, y es muy común. Cada <select> debe tener un name único para que el servidor pueda identificar qué dato corresponde a cada campo. También podés usar el atributo multiple para permitir seleccionar varias opciones con Ctrl/Cmd.
📝 Continúa aprendiendo sobre este tema entrando aquí 👉 Creación de formularios con HTML