Valore di come definire il tipo di input in HTML (tutti i valori e gli attributi) Cosa fa Handling Checkbox Data With In HTML: Here's How
? Definisce una casella di controllo, che l’utente può attivare o disattivare.,
Esempio di codice
<form> <input type="checkbox" name="love" value="love"><label for="love"> Check if you love this website!</label></form>
Gestione dei dati delle caselle di controllo
Le caselle di controllo sono un po ‘ ingombranti dal punto di vista dei dati. Parte di questo è che ci sono essenzialmente due modi diversi di pensare alla loro funzionalità. Spesso, un insieme di caselle di controllo rappresenta una singola domanda a cui l’utente può rispondere selezionando un numero qualsiasi di risposte possibili. Sono, soprattutto, non esclusivi l’uno dell’altro. (Se si desidera che l’utente sia in grado di scegliere una singola opzione, utilizzare le caselle radio o l’elemento <select>
.,)
HTML
CSS
JS
PHP
Ruby
INTERCAL
Il modo naturale per rappresentare questo nel codice dell’applicazione (lato server o front-end) è con un array.
userLangs =
Tuttavia, non è così che il browser invierà i dati. Piuttosto, il browser tratta una casella di controllo come se fosse sempre utilizzata nell’altro modo, come un valore di verità booleano.
<input type="checkbox" name="tandc" value="true"><label for="tandc"> I agree to all terms and conditions.</label>
A differenza dei pulsanti di opzione, un set di caselle di controllo non è logicamente legato insieme nel codice., Quindi, dal punto di vista di HTML, ogni casella di controllo in un set di caselle di controllo è essenzialmente a sé stante. Funziona perfettamente per le caselle di controllo del valore booleano a scelta singola, ma presenta un piccolo inconveniente per gli array di scelte. Ci sono due modi per affrontarlo. Puoi dare a tutte le caselle lo stesso attributoname
, oppure puoi dare a ciascuna di esse un diversoname
.,
Se si utilizza lo stesso name
per tutti, la tua richiesta stringa simile a questa: langs=HTML&langs=CSS&langs=PHP
Se si utilizzano nomi diversi, assomiglia a questo: HTML=HTML&CSS=CSS&PHP=PHP
Il primo sembra un po ‘ preferibile, ma cosa succede quando si arriva a PHP e cercare di ottenere i valori?
$langs = $_REQUEST; // What is $langs ?
In PHP, è possibile assicurarsi che le varie caselle di controllo con nome identico siano combinate in un array sul server aggiungendo un set di parentesi quadre () dopo il nome.,
Vedi questo tutorial sui moduli PHP per maggiori informazioni. Questa sintassi di creazione di array è in realtà una caratteristica di PHP e non di HTML. Se si utilizza un lato server diverso, potrebbe essere necessario fare le cose in modo leggermente diverso. (Per fortuna, se stai usando qualcosa come Rails o Django, probabilmente userai alcune classi di form builder e non dovrai preoccuparti tanto del markup.)
Buone pratiche di etichettatura
Si dovrebbe sempre mettere il<label>
dopo il<input type="checkbox">
, e sulla stessa linea., Di solito dovrebbe esserci uno spazio tra<input>
e<label>
. Puoi farlo con un po ‘ di margine o semplicemente con uno spazio tipografico. Il<label>
deve sempre utilizzarefor
attributo, che specifica che è collegato al<input>
daid
. Questa è un’importante pratica di usabilità, in quanto consente all’utente di selezionare e deselezionare la casella facendo clic sull’etichetta, non solo la casella di controllo (troppo piccola) stessa., Questo è ancora più critico oggi di quanto non fosse in passato a causa di touchscreen-si vuole dare all’utente l’esperienza casella di controllo più semplice possibile.
No. Questo ha bisogno di spazio tra la scatola e le parole.
No. La casella di controllo dovrebbe venire prima dell’etichetta.
No. L’etichetta deve identificare la casella di controllo.
Ti piace in questo modo? (Sbagliato.)
È incredibile quanto di una differenza piccoli dettagli come quello fanno per il modo in cui l’utente sperimenta e si sente sul tuo sito., Vuoi rendere i tuoi utenti felici di usare i tuoi moduli, o almeno non odiarli. Forma corretta styling e usabilità andare un lungo cammino per migliorare la soddisfazione complessiva l’esperienza degli utenti. Per ulteriori informazioni, consulta i nostri tutorial sullo stile dei moduli e sull’usabilità dei moduli.
Browser Support for checkbox
All | All | All | All | All | All |
Lascia un commento