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 atributoforde la etiqueta debe coincidir con el atributoidde 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.
Desafío
FácilCrea un documento HTML que incluya un formulario con un grupo de casillas de verificación. El formulario debe tener los siguientes elementos:
- Una etiqueta
<form>. - Dentro del formulario, crea un grupo de tres casillas de verificación con el name "toppings".
- La primera casilla de verificación debe tener el id "cheese", el value "cheese" y una etiqueta con el texto "Cheese".
- La segunda casilla de verificación debe tener el id "pepperoni", el value "pepperoni" y una etiqueta con el texto "Pepperoni".
- La tercera casilla de verificación debe tener el id "mushrooms", el value "mushrooms" y una etiqueta con el texto "Mushrooms".
- 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ónid: Identificador único para la casilla de verificaciónname: 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>Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2