Input Type Radio
<input type="radio">
Kolejnym dość szczególnym elementem input jest radio, określany również radio buttonem (przyciskiem), bądź wykluczającym polem wyboru. Nazwa radio wzięła się od właśnie od radia. Pamiętacie może jeszcze te stare radia, gdzie jak nacisnęliśmy jeden guzik to inny guzik wyskakiwał. Wybory guzików w radiu wykluczały się nawzajem, i tak jest w tym przypadku. Zaznaczenie jednego guzika, przycisku spowoduje odznaczenie innego. Żeby to zadziałało trzeba uzupełnić przycisk radio o atrybut name, który musi mieć identyczną wartość dla wszystkich wykluczających się radio input’ów.
<input type="radio" name="food"> <input type="radio" name="food"> <input type="radio" name="food">
Za pomocą paragrafu dodamy jeszcze opis czego dany wybór dotyczy, i opisy poszczególnych wyborów za pomocą elementu <label>. Odstępy zostały dołączone jedynie dla zwiększenia czytelności kodu.
<p>Dodatki:<p> <label><input type="radio" name="food"> Frytki</label> <label><input type="radio" name="food"> Ziemniaki</label> <label><input type="radio" name="food"> Ryż</label>
Atrybut value jest szczególnie przydatny, w przypadku elementu radio button. Chodzi tu o przesył informacji. W przypadku elementów <input> typu tekstowego, użytkownik wprowadza tam wartość, która następnie zostanie przesłana formularzem, np. jego adres email. Jednak w przypadku elementu radio button nie ma możliwości wprowadzenia takiej informacji przez użytkownika, zaznacza on jedynie pole. Wartość tą musimy sami dostarczyć do elementu radio button, właśnie poprzez atrybut value.
<p>Dodatki:<p> <label> <input type="radio" name="food" value="Frytki"> Frytki </label> <label> <input type="radio" name="food" value="Ziemniaki"> Ziemniaki </label> <label> <input type="radio" name="food" value="Ryż"> Ryż </label>
Dodanie atrybutu value do elementu radio button nie zmieni sposobu jego wyświetlania. Zmiana nastąpi dopiero w momencie, gdy będziemy chcieli przesłać te dane formularzem, wtedy przesłane zostaną dane z atrybutu value. Jak wspomnieliśmy wcześniej, tworząc nazwy atrybutu id, warto stosować angielskie nazwy. Natomiast odnośnie wartości atrybutu value mamy pełną dowolność, z tego względu, że są to te dane, które sami otrzymamy np. mailem, dlatego tutaj najlepiej stosować już nasz język ojczysty.
checked
Tak jak w przypadku elementu checkbox możemy domyślnie zaznaczyć dany element radio button używając atrybutu checked. Oczywiście możemy go zastosować tylko względem jednego pola radio button.
<input type="radio" name="job" checked> <input type="radio" name="job"> <input type="radio" name="job">