input typu radio - Český HTML 5 manuál

HTML a CSS Manuál Formuláře input typu radio - Český HTML 5 manuál

Element <input> se používá ve formulářích, kde umožňuje uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributu type.

Typ radio vytvoří přepínací tlačítko (tzv. radiobutton). Tlačítka seskupujeme tak, že jim dáme stejné jméno (atribut name). Při změně volby se původní volba odznačí. Odesláno potom bude jen to vybrané tlačítko.

Atributy:

  • checked - Atribut je typu boolean. Pokud je uveden, je daná možnost zaškrtnutá.

Následující atributy jsou společné pro všechny typy inputů:

  • autocomplete - Nabývá hodnot on a off, přičemž on je výchozí. Pokud je autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
  • disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
  • list - Obsahuje id elementu datalist, položky listu poté slouží jako předdefinované možnosti <input> elementu.
  • readonly - Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
  • name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
  • value - Přednastavená hodnota pole.
  • autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.
  • pattern - Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
  • placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
  • required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

Ukázka 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ýsledek:

Ukázka formulářového pole input typu radio

Pozn.: U tohoto typu formulářového pole bychom měli použít element label jako popisek. Zde není pouze pro zjednodušení.


 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 



 

 

Komentáře

Avatar
relycanx
Člen
Avatar
relycanx:

teď se mi stala zvláštní věc - šoupnul jsem radio button do tabulky (pod tag <table></table> a už nefunguje atribut "checked" :D :/

 
Odpovědět 18.11.2013 22:00
Avatar
Kit
Redaktor
Avatar
Odpovídá na relycanx
Kit:

Zřejmě jsi udělal ještě něco jiného a nevšiml sis toho. Prostě teď to máš špatně.

Odpovědět 18.11.2013 22:25
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Lukáš Tesař:

Ahoj, mám takový dotaz,
jak na serveru zkontroluji, zda je daná možnost zaškrtnutá?
Takhle?

<?php
if(isset($_POST['checkbox1']))
<?
Editováno 2.4.2014 16:59
 
Odpovědět 2.4.2014 16:58
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.