Pole opcji <input "radio">
Jak wprowadzić na stronę WWW "przełącznik" (pole opcji)?
Pole opcji <input "radio">
<form action="..."> <input type="radio" name="nazwa" value="wartość">Tu wpisz opis pola </form>
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.
Pamiętaj aby wszystkie pola tego typu, które dotyczą tego samego pytania, nosiły koniecznie taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!
Dla zaawansowanych
Jeśli zamierzasz wykorzystać formularz w skrypcie po stronie klienta (np. JavaScript), każde pole tego typu powinno posiadać dodatkowo unikalny identyfikator (atrybut id="..."). Żadne dwa elementy w dokumencie nie mogą mieć takiego samego identyfikatora, nawet pola dotyczące tego samego pytania. W skrypcie należy posługiwać się tymi właśnie identyfikatorami a nie nazwami.
Polecenie to spowoduje wyświetlenie okrągłego pola, które możesz zaznaczać myszką (pole opcji). W przypadku gdy istnieje więcej takich pól, jako możliwości odpowiedzi na to samo pytanie, możliwe jest zaznaczenie tylko i wyłącznie jednego z nich. Raz zaznaczone pole tego typu, można "odznaczyć" tylko poprzez zaznaczenie innego z podanych możliwości.
Polecenie to pozwala stworzyć pytanie z kilkoma możliwościami odpowiedzi, z których można wybrać tylko jedną, ponieważ np. wybranie dwóch jednocześnie, jak w przypadku checkbox, byłoby nielogiczne.
Do pola tego typu można również przypisać etykietę oraz klawisz skrótu.
Przykład <input "radio">
Zwróć uwagę, że możesz zaznaczyć (myszką) tylko jedno pole. Jeśli chcesz je "odznaczyć", musisz wybrać inną możliwość:
Domyślne zaznaczenie pola <input "radio" checked>
<input type="radio" name="nazwa" value="wartość" checked>Opis pola
Podanie atrybutu checked powoduje domyślne zaznaczenie pola.
Oczywiście nie można zaznaczyć domyślnie dwóch pól tego typu, jako odpowiedzi na to samo pytanie, co wynika z ich sposobu działania.
Przykład <input "radio" checked>
Blokada pola <input "radio" disabled>
<input type="radio" name="nazwa" value="wartość" disabled>Opis pola
Wstawienie atrybutu disabled powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład <input "radio" disabled>
Pytania i odpowiedzi <input "radio">
W jaki sposób w HTML wstawić pole jednokrotnego wyboru?
Aby zezwolić użytkownikowi wypełniającemu formularz zaznaczyć najwyżej jedną odpowiedź na określone pytanie, najwygodniej jest się posłużyć polem typu radio. Na przykład: <input type="radio" name="pytanie" value="odpowiedź">. Trzeba jednak przy tym pamiętać, że każde pole tego typu powinno mieć ustawioną inną odpowiedź. W przeciwnym razie nie będzie się dało rozróżnić, którą opcję zaznaczył użytkownik.
Jak zrobić radio HTML?
Radio w języku HTML to nie środek masowego komunikowania, służący do rozpowszechniania audycji dźwiękowych 😉 Jest to inaczej pole jednokrotnego wyboru. Aby wstawić go w formularzu, należy przypisać mu odpowiedni typ, nazwę pytania oraz wartość odpowiedzi, która zostanie wysłana po jego zaznaczeniu. Na przykład: <input type="radio" name="nazwa" value="wartość">. Wszystkie pola opcji, które dotyczą tego samego pytania, muszą mieć przypisaną taką samą nazwę, ale każde z nich powinno mieć inną wartość.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
<input type="radio"> | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |