Menu
Coddy logo textTech

Checkboxes

Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 42 de 60.

En HTML, las casillas de verificación (checkboxes) se utilizan para crear un conjunto de opciones donde el usuario puede seleccionar múltiples opciones del grupo. Las casillas de verificación se crean utilizando la etiqueta <input> con el atributo type establecido en "checkbox".

Aquí está la sintaxis básica para crear una casilla de verificación en HTML:

<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>
  • <input>: La etiqueta que define el campo de entrada.
  • type="checkbox": Un atributo que especifica el tipo de entrada como una casilla de verificación.
  • id: Un atributo que le da a la casilla de verificación un identificador único.
  • name: Un atributo que agrupa casillas de verificación. A diferencia de los botones de radio, se pueden seleccionar varias casillas de verificación con el mismo nombre al mismo tiempo.
  • value: Un atributo que especifica el valor asociado con la casilla de verificación. Este valor se envía al servidor cuando se envía el formulario.
  • <label>: Una etiqueta que proporciona una etiqueta en la que se puede hacer clic para la casilla de verificación. El atributo for de la etiqueta debe coincidir con el atributo id de la casilla de verificación.

Aquí tienes un ejemplo de cómo crear un grupo de casillas de verificación:

<form>
	<input type="checkbox" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label><br>
	
	<input type="checkbox" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label><br>
	
	<input type="checkbox" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label><br>
</form>

En este ejemplo, tenemos un formulario con tres casillas de verificación, todas pertenecientes al mismo grupo porque comparten el mismo atributo name ("mygroup"). Cada casilla de verificación tiene un id y value únicos, y una etiqueta correspondiente. Cuando el usuario selecciona una o más de estas opciones y envía el formulario, los valores de las casillas de verificación seleccionadas se enviarán al servidor.

challenge icon

Desafío

Fácil

Crea un documento HTML que incluya un formulario con un grupo de casillas de verificación. El formulario debe tener los siguientes elementos:

  1. Una etiqueta <form>.
  2. Dentro del formulario, crea un grupo de tres casillas de verificación con el name "toppings".
  3. La primera casilla de verificación debe tener el id "cheese", el value "cheese" y una etiqueta con el texto "Cheese".
  4. La segunda casilla de verificación debe tener el id "pepperoni", el value "pepperoni" y una etiqueta con el texto "Pepperoni".
  5. La tercera casilla de verificación debe tener el id "mushrooms", el value "mushrooms" y una etiqueta con el texto "Mushrooms".
  6. Añade una etiqueta <br> después de cada etiqueta para crear un salto de línea.

Hoja de referencia

Las casillas de verificación (checkboxes) permiten a los usuarios seleccionar múltiples opciones de un grupo. Se crean utilizando la etiqueta <input> con type="checkbox".

Sintaxis básica de una casilla de verificación:

<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>

Atributos clave:

  • type="checkbox": Especifica el tipo de entrada como una casilla de verificación
  • id: Identificador único para la casilla de verificación
  • name: Agrupa las casillas de verificación (se pueden seleccionar varias)
  • value: Valor enviado al servidor cuando se envía el formulario
  • <label for="">: Proporciona una etiqueta en la que se puede hacer clic (el atributo for coincide con el id de la casilla de verificación)

Ejemplo de múltiples casillas de verificación:

<form>
	<input type="checkbox" id="option1" name="mygroup" value="option1">
	<label for="option1">Option 1</label><br>
	
	<input type="checkbox" id="option2" name="mygroup" value="option2">
	<label for="option2">Option 2</label><br>
	
	<input type="checkbox" id="option3" name="mygroup" value="option3">
	<label for="option3">Option 3</label><br>
</form>

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <body>
        <!-- Escribe código aquí -->
    </body>
</html>
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Fundamentals