HTML Academy · Lección

Grupos de casillas y botones de opción

Permita que los usuarios elijan una o varias opciones de un grupo

Grupos de casillas y botones de opción es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 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 Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Casillas de verificación

Las casillas de verificación permiten que los usuarios seleccionen cero, una o varias opciones:

<label>
  <input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>

<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>

Envío de casillas de verificación

Las casillas de verificación solo se envían si están marcadas:

<form>
  <input type="checkbox" name="hobby" value="reading"> Reading<br>
  <input type="checkbox" name="hobby" value="coding"> Coding<br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
     hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->

Grupos de casillas con fieldset

Agrupe las casillas de verificación relacionadas con fieldset + legend:

<fieldset>
  <legend>Select your interests</legend>

  <label><input type="checkbox" name="interest" value="html"> HTML</label>
  <label><input type="checkbox" name="interest" value="css"> CSS</label>
  <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  <label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>

Botones de opción

Los botones de opción permiten que los usuarios elijan exactamente una opción de un grupo:

<fieldset>
  <legend>Preferred plan</legend>

  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
  <label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->

Atributo checked

Preseleccione un botón de opción o una casilla de verificación con el atributo checked:

<fieldset>
  <legend>Skill level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

Estilos de casillas y botones de opción

Casillas de verificación personalizadas mediante el truco de label:

<label class="custom-check">
  <input type="checkbox" name="agree">
  <span class="checkmark"></span>
  I agree
</label>

/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #ddd; border-radius: 3px;
  display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }

Estado indeterminate

Las casillas de verificación pueden tener un estado indeterminate (ni marcado ni desmarcado):

<input type="checkbox" id="select-all">

<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>

radio sin selección predeterminada

A veces es mejor no preseleccionar un botón de opción:

La preselección implica que la opción es la recomendada
En elecciones obligatorias sin un valor predeterminado claro (género, plan), déjelo sin seleccionar
Añada required para asegurarse de que los usuarios elijan explícitamente una opción

<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f" required> Female</label>
  <label><input type="radio" name="gender" value="nb" required> Non-binary</label>
  <label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>

Casilla: checked frente a value

Dos aspectos importantes del envío de una casilla de verificación:

<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->

<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked);    // true or false
console.log(cb.value);      // 'yes' (always, even when unchecked)

Navegación con teclado en grupos de botones de opción

Comportamiento del teclado para los grupos de botones de opción:

Tab mueve el foco al grupo, hasta el botón de opción seleccionado o el primero
Las teclas de dirección (↑/↓ o ←/→) recorren las opciones
Tab mueve el foco fuera del grupo, hasta el siguiente elemento enfocables

Patrón de selección de todo

Patrón para seleccionar o anular la selección de todas las casillas:

<label>
  <input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
  <label><input type="checkbox" class="item" value="1"> Item 1</label>
  <label><input type="checkbox" class="item" value="2"> Item 2</label>
  <label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
  document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>

Comprobación rápida

¿Qué regla del atributo name hace que los botones de opción pertenezcan al mismo grupo?

Resumen: casillas y botones de opción

Aspectos esenciales de las casillas y los botones de opción:

Casilla de verificación; permite seleccionar varias opciones y solo se envía cuando está marcada
Botón de opción; permite seleccionar exactamente una opción y se agrupa mediante name
Ambos usan el atributo checked para la preselección
Colóquelos dentro de <fieldset> + <legend>
Las teclas de dirección permiten navegar dentro de un grupo de botones de opción

Preguntas frecuentes

¿La lección «Grupos de casillas y botones de opción» es gratis?

Sí — el texto completo de «Grupos de casillas y botones de opción» 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 Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Grupos de casillas y botones de opción»?

Permita que los usuarios elijan una o varias opciones de un grupo Practicas HTML 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 HTML Academy?

No se requiere experiencia previa. HTML 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 3 de 4.

¿Cuánto tiempo toma la lección «Grupos de casillas y botones de opción»?

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 Academy?

Sí. Cada lección de HTML 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

← Volver a HTML Academy