Las casillas de verificación son componentes de entrada que contienen valores booleanos. Usándolo, el usuario puede seleccionar múltiples opciones de una lista de opciones. Mientras desarrolla un sitio web, agregar una casilla de verificación es una excelente opción si desea que sus visitantes seleccionen varios elementos de un menú. Sin embargo, las casillas de verificación funcionan opuestas a los botones de radio, que permiten solo una opción de una lista.

Para cambiar el estado de la casilla de verificación de no verificados a verificados, el usuario tendría que interactuar con él.

Este manual lo guiará sobre la casilla de verificación HTML, sus estados y sintaxis y demostrará un ejemplo práctico relacionado con la adición de una casilla de verificación en HTML.

¿Cuáles son los estados de la casilla de verificación en HTML??

La casilla de verificación tiene tres estados posibles:

• verdadero: Este estado indica que la casilla de verificación está marcada.
• FALSO: Este estado indica que la casilla de verificación no está marcada.
• mezclado: Si la casilla de verificación está marcada o no está indefinida.

Sintaxis

En HTML, la etiqueta se usa para agregar elementos de entrada. Para una casilla de verificación, configure el tipo de entrada como "caja".

Sintaxis

Pasemos al ejemplo práctico, en el que crearemos una casilla de verificación. Entonces, comencemos.

Ejemplo: agregar una casilla de verificación en HTML

En el HTML, crearemos un contenedor y asignaremos el nombre de clase como "div". Dentro de la etiqueta, agregaremos un encabezado usando el

. Después de eso, cree un sub-Div para agregar casillas y etiquetas.

Aquí, usaremos la etiqueta para establecer la etiqueta de la casilla de verificación y la etiqueta para agregar el elemento de entrada. A continuación, establezca el tipo de entrada como "caja"Después de cerrar la etiqueta de, agregaremos la etiqueta de descanso
Etiqueta para configurar la casilla de verificación en la siguiente línea de la pantalla. Aquí, hemos agregado agregar cuatro casillas de verificación:

Tipo de entrada "casilla de verificación"

Los países que desea visitar:


España


Pavo


Japón


Porcelana

Puede ver que la casilla de verificación de tipo de entrada creada correctamente:

También puedes diseñar el "caja"Siguiendo la sintaxis dada.

Paso 1: Estilo Div

Aquí, usaremos ".div"Para acceder al contenedor creado en HTML y establecer su altura como"250px". A continuación, usa el "color de fondo"Propiedad para establecer el color de fondo del DIV y asignar el valor del color como"RGB (185, 255, 176)". Luego, diseñe el DIV usando el "borde"Propiedad para establecer el borde alrededor del Div. El ancho de la frontera es "5px"Estilo como"discontinuos"Y el color como"RGB (24, 58, 20)".

CSS

.div
Altura: 250px;
Antecedentes: RGB (185, 255, 176);
borde: 5px RGB DOND (24, 58, 20);

Se puede ver que el contenedor es estilos con éxito:

Paso 2: casilla de verificación de estilo

Ahora, usaremos "aporte"Para acceder a la entrada creada en HTML. A continuación, usa el "margen de pesa"Propiedad para establecer el margen desde el lado izquierdo de la casilla de verificación y establecer el valor como"30px". Para establecer el margen inferior, use el "margen"Propiedad y establecer el valor como"15px":

aporte
margen-izquierda: 30px;
margen-fondo: 15px;

La imagen dada a continuación significa que el valor de la propiedad de margen agregado se aplica correctamente a las casillas de verificación:

Eso es todo! Hemos explicado en detalle sobre el tipo de entrada "caja".

Conclusión

A "caja"Es un elemento de tipo de entrada de HTML que permite al usuario elegir entre dos o más opciones posibles. Permite al usuario elegir múltiples valores de una lista predefinida. Una casilla de verificación tiene tres estados: verdadero, falso y mixto. En esta guía, hemos explicado la casilla de verificación Tipo de entrada en detalle y proporcionamos un ejemplo relacionado con agregar un campo de entrada y diseñarla.