Grupy pól wyboru i przycisków radiowych
Umożliwianie użytkownikom wyboru jednej lub wielu opcji z grupy
Grupy pól wyboru i przycisków radiowych to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Pola wyboru
Pola wyboru pozwalają użytkownikom wybrać zero, jedną lub wiele opcji:
<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>Wysyłanie pól wyboru
Pola wyboru są wysyłane tylko wtedy, gdy są zaznaczone:
<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 -->Grupy pól wyboru za pomocą fieldset
Grupuj powiązane pola wyboru za pomocą 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>Przyciski radio
Przyciski radio pozwalają użytkownikom wybrać dokładnie jedną opcję z grupy:
<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 -->Atrybut checked
Wstępnie zaznacz przycisk radio lub pole wyboru za pomocą atrybutu 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>Stylowanie pól wyboru i przycisków radio
Niestandardowe stylowanie pól wyboru za pomocą sztuczki z elementem 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; }Stan indeterminate
Pola wyboru mogą mieć stan indeterminate — ani zaznaczony, ani niezaznaczony:
<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 bez domyślnego zaznaczenia
Czasami lepiej nie zaznaczać wstępnie przycisku radio:
- Wstępne zaznaczenie sugeruje, że opcja jest zalecana
- W przypadku wymaganych wyborów bez wyraźnej wartości domyślnej, takich jak płeć lub plan, pozostaw opcję niezaznaczoną
- Dodaj
required, aby mieć pewność, że użytkownicy dokonają wyboru
<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>Pole wyboru: checked a value
Dwie ważne informacje dotyczące wysyłania pól wyboru:
<!-- 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)Nawigacja po grupach przycisków radio za pomocą klawiatury
Działanie klawiatury w przypadku grup przycisków radio:
- Tab przenosi fokus do grupy, na wybrany lub pierwszy przycisk radio
- Klawisze strzałek (↑/↓ lub ←/→) przechodzą między opcjami
- Tab przenosi fokus poza grupę, do następnego elementu, na którym można ustawić fokus
Wzorzec zaznaczania wszystkich
Wzorzec zaznaczania i odznaczania wszystkich pól wyboru:
<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>Szybkie sprawdzenie
Jaka zasada dotycząca atrybutu name sprawia, że przyciski radio należą do tej samej grupy?
Podsumowanie: pola wyboru i przyciski radio
Najważniejsze informacje o polach wyboru i przyciskach radio:
- Pole wyboru — umożliwia wybór wielu opcji; jest wysyłane tylko po zaznaczeniu
- Przycisk radio — umożliwia wybór dokładnie jednej opcji; przyciski są grupowane za pomocą
name - W obu przypadkach atrybut
checkedsłuży do wstępnego zaznaczenia - Umieszczaj je w
<fieldset>+<legend> - Klawisze strzałek umożliwiają nawigację w obrębie grupy przycisków radio
Często zadawane pytania
Czy lekcja „Grupy pól wyboru i przycisków radiowych” jest bezpłatna?
Tak — pełny tekst „Grupy pól wyboru i przycisków radiowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Grupy pól wyboru i przycisków radiowych”?
Umożliwianie użytkownikom wyboru jednej lub wielu opcji z grupy Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Grupy pól wyboru i przycisków radiowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Menu rozwijane Select i option
- Textarea do wprowadzania tekstu w wielu wierszach
- Grupy pól wyboru i przycisków radiowych
- Datalist do autouzupełniania