Gruppi di caselle di controllo e pulsanti di opzione
Consentire agli utenti di scegliere una o più opzioni da un gruppo
Gruppi di caselle di controllo e pulsanti di opzione è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Caselle di controllo
Le caselle di controllo consentono agli utenti di selezionare zero, una o più opzioni:
<label>
<input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>
<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>Invio delle caselle di controllo
Le caselle di controllo vengono inviate solo se selezionate:
<form>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="coding"> Coding<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->Gruppi di caselle di controllo con fieldset
Raggruppare le caselle di controllo correlate con fieldset + legend:
<fieldset>
<legend>Select your interests</legend>
<label><input type="checkbox" name="interest" value="html"> HTML</label>
<label><input type="checkbox" name="interest" value="css"> CSS</label>
<label><input type="checkbox" name="interest" value="js"> JavaScript</label>
<label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>Pulsanti radio
I pulsanti radio consentono agli utenti di scegliere esattamente un'opzione da un gruppo:
<fieldset>
<legend>Preferred plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->Attributo checked
Preselezionare un pulsante radio o una casella di controllo con l'attributo checked:
<fieldset>
<legend>Skill level</legend>
<label><input type="radio" name="level" value="beginner" checked> Beginner</label>
<label><input type="radio" name="level" value="intermediate"> Intermediate</label>
<label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>Stile di caselle di controllo e pulsanti radio
Caselle di controllo con stile personalizzato usando la tecnica di label:
<label class="custom-check">
<input type="checkbox" name="agree">
<span class="checkmark"></span>
I agree
</label>
/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
width: 1.25rem; height: 1.25rem;
border: 2px solid #ddd; border-radius: 3px;
display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }Stato indeterminate
Le caselle di controllo possono avere uno stato indeterminate, cioè né selezionato né deselezionato:
<input type="checkbox" id="select-all">
<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>radio senza selezione predefinita
A volte è preferibile non preselezionare un pulsante radio:
- La preselezione lascia intendere che l'opzione sia consigliata
- Per scelte obbligatorie senza un valore predefinito chiaro, come genere o piano, lasciare la selezione vuota
- Aggiungere
requiredper assicurarsi che gli utenti effettuino una scelta esplicita
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="m" required> Male</label>
<label><input type="radio" name="gender" value="f" required> Female</label>
<label><input type="radio" name="gender" value="nb" required> Non-binary</label>
<label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>Checkbox: checked rispetto a value
Due aspetti importanti dell'invio delle caselle di controllo:
<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->
<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked); // true or false
console.log(cb.value); // 'yes' (always, even when unchecked)Navigazione da tastiera dei gruppi di pulsanti radio
Comportamento da tastiera per i gruppi di pulsanti radio:
- Tab sposta lo stato attivo nel gruppo, sul pulsante radio selezionato o sul primo
- I tasti freccia (↑/↓ o ←/→) permettono di scorrere le opzioni
- Tab sposta lo stato attivo fuori dal gruppo, sull'elemento successivo focalizzabile
Schema per selezionare tutto
Schema per selezionare o deselezionare tutte le caselle di controllo:
<label>
<input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
<label><input type="checkbox" class="item" value="1"> Item 1</label>
<label><input type="checkbox" class="item" value="2"> Item 2</label>
<label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>Verifica rapida
Quale regola relativa all'attributo name fa sì che i pulsanti radio appartengano allo stesso gruppo?
Riepilogo: caselle di controllo e pulsanti radio
Elementi essenziali delle caselle di controllo e dei pulsanti radio:
- Casella di controllo — consente selezioni multiple; viene inviata solo se selezionata
- Pulsante radio — consente di selezionare esattamente un'opzione; i gruppi vengono definiti da
name - Entrambi usano l'attributo
checkedper la preselezione - Racchiuderli in
<fieldset>+<legend> - I tasti freccia consentono di spostarsi all'interno di un gruppo di pulsanti radio
Domande Frequenti
La lezione «Gruppi di caselle di controllo e pulsanti di opzione» è gratuita?
Sì — il testo completo di «Gruppi di caselle di controllo e pulsanti di opzione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Gruppi di caselle di controllo e pulsanti di opzione»?
Consentire agli utenti di scegliere una o più opzioni da un gruppo Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Gruppi di caselle di controllo e pulsanti di opzione»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Menu a discesa select e option
- Textarea per l’input su più righe
- Gruppi di caselle di controllo e pulsanti di opzione
- Datalist per il completamento automatico