Come creare una casella di controllo in HTML?



Durante la navigazione nei siti Web preferiti, vengono visualizzate delle caselle di controllo quando è necessario selezionare un'opzione. Qui vedremo come creare una casella di controllo in HTML.

Durante la navigazione nei siti Web preferiti, vengono visualizzate delle caselle di controllo quando è necessario selezionare un'opzione tra le tante disponibili. Queste caselle di controllo vengono create in con l'aiuto di un tag speciale. In questo articolo vedremo come creare una checkbox in HTML e il funzionamento delle checkbox nella seguente sequenza:





Come creare una casella di controllo in HTML?

Una casella di controllo è un elemento del modulo che consente di selezionare più opzioni da diverse opzioni disponibili. Le caselle di controllo vengono create con il tag HTML. Possono essere annidati all'interno di un elemento o possono stare da soli. Possono anche essere associati a un modulo con l'aiuto di attributo form del tag.

Ecco un esempio di base per creare una semplice casella di controllo:



Rosso Verde Blu

Produzione:

checkbox output - checkbox in html - edureka

Consideriamo un altro esempio e aggiungiamo un pulsante di invio in modo che le caselle di controllo possano diventare utili. Qui puoi anche inserire le caselle di controllo all'interno di un elemento che specifica una pagina per elaborare il modulo.



Qual è il tuo colore preferito? Rosso Verde Blu

Risultato:

Produzione:

Casella di controllo e pulsanti di opzione

I pulsanti di opzione consentono all'utente di selezionare solo un'opzione. Considerando che, le caselle di controllo consentono all'utente di selezionare un numero qualsiasi di opzioni. Facciamo un esempio e vediamo come funzionano i pulsanti di opzione e le caselle di controllo:

tavolo cassandra vs famiglia colonna
 

Caselle di controllo

Qual è il tuo colore preferito? Rosso Verde Blu

Tasti della radio

Seleziona il tuo sesso? Maschio Femmina Sconosciuto

Risultato:

Produzione:

Nell'esempio sopra, puoi vedere che puoi selezionare tutte le caselle di controllo che desideri. Rende la casella di controllo adatta ai momenti in cui l'utente dovrebbe essere in grado di selezionare più opzioni. Tuttavia, se provi a selezionare più di un pulsante di opzione, la selezione precedente viene deselezionata. Questo ti aiuta a imporre agli utenti di selezionare solo un'opzione.

Disattivazione di una casella di controllo in HTML

Puoi disabilitare una casella di controllo in utilizzando l'attributo disabilitato. Questo può essere fatto insieme a uno script per abilitare o disabilitare la casella di controllo a seconda che determinati criteri siano stati soddisfatti.

Facciamo un esempio per vedere come possiamo disabilitare una casella di controllo:

Rosso Verde Blu

Produzione:

Nell'esempio sopra, abbiamo disabilitato il colore rosso. Quindi, puoi selezionare il verde e il blu dalla casella di controllo ma non il colore rosso.

Con questo siamo giunti alla fine del nostro articolo. Spero che tu abbia capito come funzionano le caselle di controllo in HTML e come possono essere utilizzate in modo diverso.

Ora che conosci la casella di controllo in HTML, controlla il file di Edureka. Il corso di formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).

certificato post laurea vs master

Hai domande per noi? Si prega di menzionarlo nella sezione commenti di 'Casella di controllo in HTML' e ti risponderemo.