input typu radio - Slovenský HTML 5 manuál

Element sa používa vo formulároch, kde umožňuje užívateľovi vkladať dáta. Môže mať mnoho podôb, ktoré sa líšia rôznym nastavením atribútu type.

Typ radio vytvorí prepínacie tlačidlo (tzv. RadioButton). Tlačidlá zoskupujú tak, že im dáme rovnaké meno (atribút name). Pri zmene voľby sa pôvodná voľba odznačí. Odoslané potom bude len to vybranej tlačidlo.

Atribúty:

• checked - Atribút je boolean. Ak je uvedený, je daná možnosť zaškrtnutá.

Nasledujúce atribúty sú spoločné pre všetky typy inputov:

• autocomplete - Vstupuje hodnôt on a off, pričom on je predvolený. Ak je autocomplete zapnutý, ponúka prehliadač užívateľovi pri vyplňovaní údajov našepkávač, ktorý zobrazuje skôr zapísané hodnoty.
• disabled - Atribút je boolean. Ak je uvedený, nemožno meniť hodnotu elementu a ten je často zobrazený ako zašednutý.
• list - Obsahuje id elementu datalist, položky listu potom slúžia ako preddefinované možnosti elementu.
• readonly - Atribút je boolean. Ak je uvedený, nemožno hodnoty v danom poli editovať.
• name - Definuje meno elementu. Meno musí byť unikátne vzhľadom k formuláru a je po odoslaní použité ako kľúč v dvojicu kľúč-hodnota, ktorá sa na server odošle.
• value - Prednastavená hodnota poľa.
• autofocus - Atribút je boolean. Ak je uvedený, element sa zaktivní po načítaní stránky.
• form - Element môže byť definovaný mimo formulár a následne byť k tomuto formuláru pripojený uvedením atribútu form s hodnotou id formulára. Element môže patriť viac formulárom.
• pattern - Obsahuje regulárny výraz, podľa ktorého sa má hodnota v poli validovať.
• placeholder - Definuje text, ktorý sa zobrazí v prípade, že je pole prázdne. Zvyčajne je vykreslený zašednuté a slúži ako pomocník.
• required - Atribút je boolean. Ak je uvedený, znamená to, že pole musí byť pre odoslanie formulára vyplnené.

Ukážka inputu typu radio:

Vyberte si barvu vzhledu:<br />
<input type="radio" name="barva" value="yellow" /> žlutá<br />
<input type="radio" name="barva" value="blue" checked="checked" /> modrá<br />
<input type="radio" name="barva" value="red" /> červená<br />
<input type="radio" name="barva" value="green" /> zelená<br />

výsledok:

Pozn .: U tohto typu formulárového poľa by sme mali použiť element label ako popisok. Tu nie je len pre zjednodušenie.