22. Formularze - radio, checkbox

Kolejnymi kontrolkami jakie poznacie to będzie radio i checkbox.

Kontrolka radio to taki przełącznik. W danej grupie (o tym samym atrybucie name) może być zaznaczona tylko jedna opcja. Zazwyczaj przeglądarki wyświetlają te opcje jako kółeczka.

Przykład kontrolki radio:

<input type="radio" name="plec" value="m" /> Mężczyzna
<input type="radio" name="plec" value="k" /> Kobieta

Atrybuty kontrolki radio.

atrybut

opis

autofocus

określa aktywną kontrolkę po wczytaniu strony

checked

określa wartość stanu kontrolki, czy jest zaznaczona

defaultChecked

określa wartość atrybutu checked

defaultValue

określa domyślną wartość kontrolki

disabled

określa czy kontrolka jest aktywna

form – form="formularz"

informuje przeglądarkę, że dana kontrolka jest częścią formularza

name

określa nazwę, grupę kontrolek radio

required

określa czy grupa kontrolek musi zwracać wartość. Czy coś musi być wybrane.

type

określa typ atrybutu input. W tym przypadku jest to radio

value

określa jakie dane zostaną przesłane poprzez formularz po wybraniu tej kontrolki.

Atrybuty zaznaczone na zielono wprowadza HTML5.

Kontrolka checkbox to opcja. W formularzu można zaznaczyć „ptaszkiem” wszystkie tego typu kontrolki w przeciwieństwie do kontrolki radio.

Atrybuty kontrolki checkbox

atrybut

opis

autofocus

określa aktywną kontrolkę po wczytaniu strony

checked

określa wartość stanu kontrolki, czy jest zaznaczona

defaultChecked

określa wartość atrybutu checked

defaultValue

określa domyślną wartość kontrolki

disabled

określa czy kontrolka jest aktywna

form – form="formularz"

informuje przeglądarkę, że dana kontrolka jest częścią formularza

indeterminate

określa czy kontrolka jest kontrolką grupującą inne kontrolki checkbox.

name

określa nazwę, grupę kontrolek radio

required

określa czy grupa kontrolek musi zwracać wartość. Czy coś musi być wybrane.

type

określa typ atrybutu input. W tym przypadku jest to radio

value

określa jakie dane zostaną przesłane poprzez formularz po wybraniu tej kontrolki.

Atrybuty zaznaczone na zielono wprowadza HTML5.