Casella di controllo HTML
Scopo delle caselle di controllo in HTML
Le caselle di controllo e i pulsanti di radio sono entrambe utilizzate per fornire più opzioni tra cui scegliere l'utente. Tuttavia, si potrebbe chiedere dove differiscono questi due elementi HTML? Bene, un pulsante di opzione viene sempre utilizzato in situazioni in cui si desidera limitare l'utente a scegliere esattamente un'opzione e non di più. D'altra parte, viene utilizzata una casella di controllo quando si desidera consentire all'utente di scegliere anche più di un'opzione. Pertanto, ogni volta che si desidera ottenere le scelte massime possibili dall'elenco indicato, si utilizza sempre le caselle di controllo in HTML. Per comprendere questo utilizzo in dettaglio, dovrai leggere la prossima sezione di questo tutorial.
Codice HTML per la creazione di caselle di controllo
È possibile creare caselle di controllo in HTML molto rapidamente. Tutto quello che devi fare è seguire i due esempi di seguito per imparare questo hack:
Esempio 1: recuperare l'occupazione di una persona
Abbiamo già detto che le caselle di controllo in HTML e qualsiasi altra lingua sono sempre usate ogni volta che hai la libertà di scegliere più di un'opzione. Pertanto, in questo scenario, progetteremo uno script HTML per recuperare l'occupazione di una persona. Ora, questa persona può essere uno "studente", un "insegnante" o entrambi. Nel caso dell'ultima opzione, vogliamo dare alla persona la libertà di selezionare entrambe le caselle di controllo contemporaneamente. Per elaborare tale funzionalità, abbiamo progettato il seguente script HTML:
Dopo aver utilizzato l'istruzione Dichiarazione del tipo di documento, abbiamo usato i tag "" e "" in modo da poter scrivere il nostro script HTML. Quindi, abbiamo usato il "
"Flag di intestazione per specificare l'intestazione della nostra pagina web. Questo è seguito dal flag "Tipo di input" che abbiamo usato per avvisare che creeremo una casella di controllo in HTML. Quindi, abbiamo creato un "id" e "nome" per questa casella di controllo. Abbiamo anche assegnato un'etichetta a questa casella di controllo. Successivamente, abbiamo usato il tag "etichetta" per menzionare l'etichetta contro ciascuna delle nostre caselle di controllo HTML. Allo stesso modo, abbiamo progettato l'altra casella di controllo. Dopodiché, abbiamo anche creato un pulsante "Invia" solo per il gusto di rendere bella la nostra pagina web.
Dopo aver salvato ed eseguito questo script HTML con Google Chrome, la pagina Web mostrata nell'immagine seguente è apparsa sul nostro browser:
Ora, puoi selezionare tutte le opzioni da questa pagina web che desideri. Nella seguente immagine, abbiamo selezionato solo una delle due caselle di controllo.
Nell'immagine mostrata di seguito, abbiamo selezionato entrambe le caselle di controllo.
Per migliorare la funzionalità di questo script HTML, è anche possibile progettare una pagina di azione utilizzando PHP in modo che quando si preme il pulsante "Invia" dopo aver selezionato la casella di controllo desiderata, viene intrapresa un'azione pertinente contro di essa.
Esempio 2: selezione del sapore preferito del frappè:
A volte, puoi anche scegliere di progettare una pagina Web molto semplice durante l'utilizzo delle caselle di controllo HTML senza pulsanti di azione. Ad esempio, potresti semplicemente voler presentare alcune caselle di controllo all'utente per aver scelto il suo sapore preferito di frappè. Tuttavia, non vuoi che faccia altro dopo aver effettuato questa selezione. Tali casi sono molto rari. Normalmente, chiedi all'utente di intraprendere qualsiasi azione dopo aver selezionato come fare clic su un pulsante. Tuttavia, vorremmo comunque mostrarti un tale esempio. Per illustrare questo esempio, abbiamo progettato il seguente script HTML per te:
In questo script HTML, gli elementi essenziali della sceneggiatura sono: la dichiarazione del tipo di documento, i "" e i tag "" sono gli stessi e i loro scopi sono esattamente gli stessi che abbiamo descritto nel nostro primo esempio. Quindi, abbiamo usato un tag di paragrafo per visualizzare un messaggio all'utente che gli chiede di scegliere il suo sapore preferito di frappè. Un utente può scegliere comodamente più di un sapore di sua scelta se lo desidera. Quindi, abbiamo definito le etichette per queste caselle di controllo seguite dalla rispettiva dichiarazione delle caselle di controllo. Devi notare qui che questa volta non abbiamo usato il tag "etichetta" HTML per specificare l'etichetta. Piuttosto, abbiamo appena definito le etichette così com'è. Significa che è un altro modo in cui è possibile creare etichette per le tue caselle di controllo solo per semplificare il tuo script HTML. Dopo aver scritto completamente questo script, abbiamo semplicemente salvato questo file di blocco note con ".estensione HTML "in modo che possa essere eseguito facilmente con qualsiasi browser di nostra scelta.
Abbiamo eseguito questo script HTML durante l'utilizzo di Google Chrome e ha visualizzato la pagina Web mostrata nell'immagine seguente sul nostro browser:
Ora, puoi selezionare comodamente tutte queste caselle di controllo che desideri. Questo è mostrato nella seguente immagine:
Conclusione
Con questo tutorial, volevamo condividere con te l'uso delle caselle di controllo HTML nel modo più semplice. Per fare ciò, ti abbiamo introdotto per la prima volta allo scopo di base di questo elemento HTML. Dopodiché, ti abbiamo spiegato due diversi esempi che hanno fatto uso di questo elemento HTML. Passando a queste spiegazioni, puoi iniziare facilmente a utilizzare le caselle di controllo HTML ogni volta che si desidera fornire ai tuoi utenti la flessibilità di scegliere più di un'opzione da un determinato elenco di opzioni.