Le caselle di controllo sono componenti di input che contengono valori booleani. Usandolo, l'utente può selezionare più opzioni da un elenco di opzioni. Durante lo sviluppo di un sito Web, l'aggiunta di una casella di controllo è un'opzione eccellente se si desidera che i visitatori selezionino diversi elementi da un menu. Tuttavia, le caselle di controllo funzionano di fronte ai pulsanti di radio, che consentono solo una scelta da un elenco.

Al fine di modificare lo stato della casella di controllo da non controllato a controllato, l'utente dovrebbe interagire con esso.

Questo manuale ti guiderà sulla casella di controllo HTML, i suoi stati e la sintassi e dimostrerà un esempio pratico relativo all'aggiunta di una casella di controllo in HTML.

Quali sono gli stati della casella di controllo in HTML?

La casella di controllo ha tre possibili stati:

• VERO: Questo stato indica che la casella di controllo è verificata.
• Falso: Questo stato indica che la casella di controllo non è controllata.
• misto: Se la casella di controllo è controllata o meno è indefinita.

Sintassi

In HTML, il tag viene utilizzato per aggiungere elementi di input. Per una casella di controllo, impostare il tipo di input come "Casella di controllo".

Sintassi

Passiamo all'esempio pratico, in cui creeremo una casella di controllo. Quindi iniziamo.

Esempio: aggiunta di una casella di controllo in HTML

Nell'HTML, creeremo un contenitore e assegneremo il nome della classe come "div". All'interno del tag, aggiungeremo un'intestazione usando il

. Successivamente, crea un sub-div per aggiungere caselle di controllo ed etichette.

Qui useremo il tag per impostare l'etichetta della casella di controllo e il tag per aggiungere l'elemento di input. Quindi, impostare il tipo di input come "Casella di controllo"Dopo aver chiuso il tag di, aggiungeremo il tag di pausa
Tag per impostare la casella di controllo nella riga successiva della schermata di visualizzazione. Qui, abbiamo aggiunto Aggiungi quattro caselle di controllo:

Tipo di input "Casella di controllo"

I paesi che vuoi visitare:


Spagna


Tacchino


Giappone


Cina

Puoi vedere che la casella di controllo Tipo di input creata correttamente:

Puoi anche modellare il “Casella di controllo"Seguendo la sintassi seguente.

Passaggio 1: Style Div

Qui, useremo ".div"Per accedere al contenitore creato in HTML e impostare la sua altezza come"250px". Successivamente, usa il “colore di sfondo"Proprietà per impostare il colore di sfondo del div e assegnare il valore del colore come"RGB (185, 255, 176)". Quindi, modella il div usando il "confine"Proprietà per impostare il confine attorno al div. La larghezza del confine è "5px"Stile come"tratteggiato"E colore come"RGB (24, 58, 20)".

CSS

.div
Altezza: 250px;
Background: RGB (185, 255, 176);
Bordo: 5px RGB tratteggiato (24, 58, 20);

Si può vedere che il contenitore è stili con successo:

Passaggio 2: casella di controllo Style

Ora useremo "ingresso"Per accedere all'input creato in HTML. Successivamente, usa il “margine-sinistra"Proprietà per impostare il margine dal lato sinistro della casella di controllo e impostare il valore come"30px". Per l'impostazione del margine inferiore, usa "margin-bottom"Proprietà e impostare il valore come"15px":

ingresso
margine-sinistra: 30px;
margine-bottom: 15px;

L'immagine di seguito è indicata che il valore della proprietà del margine aggiunto viene applicato correttamente alle caselle di controllo:

Questo è tutto! Abbiamo spiegato in dettaglio il tipo di input "Casella di controllo".

Conclusione

UN "Casella di controllo"È un elemento tipo di input di HTML che consente all'utente di scegliere tra due o più possibili opzioni. Permette all'utente di scegliere più valori da un elenco predefinito. Una casella di controllo ha tre stati: vero, falso e misto. In questa guida, abbiamo spiegato in dettaglio la casella di controllo del tipo di input e fornito un esempio relativo all'aggiunta di un campo di input e allo stile.