site logo

Formulářové elementy - checkbox, radio a CSS

Jaký je rozdíl v použití formulářových prvků checkbox a radio button, jaké jsou možnosti upravit jejich vzhled pomocí atributů a vlastností CSS, proč nejde odstranit rámeček checkboxu se pokusím odpovědět v tomto článku. V druhé části si ukážeme vícestavový checkbox vytvořený z běžného HTML text boxu.

Pro tyto prvky je charakteristický jejich tvar. Checkbox je čtvercový, radio button kruhový. Použití stylů nesmí změnit základní tvar prvku, to by vedlo ke zmatení uživatele.

Nejdříve živý formulář, doplněný o výpis použitých stylů. Tak můžete porovnat zobrazení formulářových prvků v aktuálním browseru se screenshoty z jiných prohlížečů. Světle šedá barva ve formuláři vymezuje prostor skutečně zabraný prvkem a navíc zviditelňuje bílé části formulářových prvků.

defaultní zobrazení: <input type="checkbox">, <input type="radio">
<input type="checkbox" disabled>, <input type="radio" disabled>
.backgr {background: #ffa; color: #00f;}
.reset {margin: 0; padding: 0; float:left; border: 0;}
.size20x20 {width: 20px; height: 20px; ...}
.size36x24 {width: 36px; height: 24px; background: #ffa; color:#0a0; ...}

Browsery vykreslují popisované prvky jako bitmapy. Nastavit rozměry, rámečky a barvy pomocí kaskádových stylů je možné jen když jsou tyto prvky a jejich části skutečně vykreslovány. Bohužel to dokáže jedině Opera. Ostatní browsery přebírají vzhled prvků ze systému Windows se všemi jeho nedostatky.

Na následujícím screenshotu je vzhled předcházejícího formuláře v různých browserech, jak ve Windows, tak v Androidu. Na první pohled je zřetelná nejednotnost v zobrazení. K dispozici jsou i ukázky ze starších starších browserů.

screenshot: formulářový prvek checkbox a radio button v různých browserech a použití CSS

První dva řádky screenshotů zobrazují vzhled prvků v základním stavu, bez použití kaskádových stylů a ve stavu disabled.

Většinu formulářových prvků je možné přepnout do vzhledu klasik použitím vlastnosti background. Jen IE a Opera tuto možnost využívá, i když se liší v pojetí co je pozadí. Situaci vidíte ve třetím řádku screenshotů.

Prázdný prostor okolo prvků (světle šedý) je citlivý na kliknutí myší jen v IE. Odstranit prázdný prostor okolo prvků je možné pomocí nastavení margin: 0; padding: 0; float:left;. Vhodné umístění prvků vzhledem k okolí dosáhneme nastavením vlastnosti margin při padding: 0;. V žádném z testovaných browserů se neprojeví nastavení vlastnosti border: 0;.

Poslední dva řádky testují možnost nastavení rozměrů pomocí CSS. Kromě uvedeného CSS kódu je použit i kód ze třídy reset. Čtvercová velikost 20x20 pixelů se projeví jen v IE. Obdélníkový rozměr 36x24 pixelů se projeví i v Opeře díky přepnutí do klasického vzhledu pomocí vlastnosti background. Prvky jsou vykresleny jako čtvercové a do požadovaného obdélníku jsou doplněny prázdným, na kliknutí myši citlivým okrajem. Opera umí nastavit i barvu zatržítka.

Jasný vítěz je prohlížeč Opera. Možnosti stylování formulářových prvků checkbox a radio button v browseru Opera jsou mnohem větší, než ukazuje jednoduchý test na této stránce. Další možnosti jak upravit vzhled prvků checkbox a radio button v browseru Opera najdete na následující stránce.

Atributy elementů checkbox a radio

<input type="checkbox" name="ch" value="yes" />

type="checkbox" je povinný atribut pro tento typ formulářového prvku. Každý checkbox by měl mít unikátní jméno name="...", ostatně tak jako všechny ostatní prvky formuláře. Pokud není specifikována hodnota value="...", je odeslán pár name=on, v případě kdy je prvek vybrán (má zatržítko) a je specifikováno value, odešle se pár name=value, podle našeho příkladu ch=yes. POZOR na server je odeslán jen prvek který je aktivní, tedy má zobrazené zatržítko. Pokud checkbox není aktivní, na server se data checkboxu neodesílají.

<input type="radio" name="rd" value="1" />
<input type="radio" name="rd" value="2" />

type="radio" je povinný atribut pro tento typ formulářového elementu. Prvky radio, patřící do jedné skupiny musí mít stejný atribut name="...", ale atribut value="..." se musí lišit pro každý prvek. Podle stejného jména browser zajistí zapnutý pouze jeden radio prvek z celé skupiny, tedy chování přepínače. Na server je odeslán jen jeden pár name=value  za celou skupinu radio buttonů stejného jména, kde value je hodnota zapnutého radio prvku.

Atribut id používáme jen když se na příslušný prvek odkazujeme pomocí javascriptu na straně klienta. Pak s výhodou získáme referenci na tento element funkcí document.getElementById(). Atribut id je výhodný ve spojení s prvkem label a jeho atributem for. Potom můžeme měnit stav elementů kliknutím na doprovodný text a není potřeba se strefovat do titěrných prvků checkbox a radio. Atribut id musí být unikátní (na stránce nesmí být vícekrát) a to i v případě skupiny radio buttonů, kde používáme stejné name.

checked pokud výchozí stav elementu má být aktivní, tedy má být vybrán již při načtení stránky přiřadíme elementu atribut checked="checked" (XHTML), nebo zkráceně checked (HTML). Přepínač radio by měl být nastaven do definovaného stavu, tedy jeden prvek ze skupiny by měl mít nastaven atribut checked.

disabled v některých situacích je potřeba vybrané formulářové prvky označit jako nepřístupné. Formulářový prvek, který je ve stavu disabled není odeslán na server ke zpracování. Připomínám, že atribut readonly není pro formulářové prvky checkbox a radio podle W3C není definován.

Poznámky k použití elementů

Formulářový prvek checkbox je používán pro nastavení dvouhodnotového stavu a je to samostatný prvek ve formuláři. Radio buttony ve formuláři jsou vždy ve skupině a slouží jako přepínač více stavů. Jen jeden radio button ze skupiny může být zapnut. Tento různý účel obou prvků musíme respektovat a nelze je zaměňovat.

Pokud je prvek radio samostatný, (není ve skupině), bude možné jej zapnout, ale již nikoli vypnout. Takový prvek nemá smysl. Ve skupině musí být jeden (a jen jeden) radio prvek aktivní. Nelze vypnout všechny prvky radio ve skupině, takový stav rovněž nemá smysl a proto by měl být jeden defaultní radio button zapnutý již při načtení formuláře pomocí atributu checked.

Browsery vykreslují popisované prvky jako různé obrázky podle nastaveného stavu. Rámeček a obsah tedy nejsou vykresleny odděleně jako v případě jiných formulářových prvků. Protože rámeček je součást bitmapy obrázku, nejde jej jednoduše odstranit. V podobě classic je sice možné změnit rozměr, ale to je v podstatě zoom prvku na předepsanou velikost. Mění se totiž i rozměr rámečku.

Experimentální checkbox

Stylovatelný checkbox můžeme vytvořit z formulářového text boxu, který budeme nastavovat z javascriptu. Při změně velikosti písma změní svůj rozměr a je tedy tzv. přístupný. Má taky nevýhody - nevypadá jako klasický checkbox a nezkušeného uživatele může zmást a dále je závislý na zapnutém javascriptu. Pro porovnání funkčnosti klasického checkboxu a stavových boxů následuje živá ukázka.

#2, textový dvoustavový box
#3, textový vícestavový box

Upozorňuji že v IE při rychlém klikání jsou některá kliknutí myší vyhodnocena jako dvojklik a to i pro klasický checkbox. Rozdíly ve zpracování událostí v browserech jsou popsány v Javascript Madness: Mouse Events.


<script type="text/javascript>
function swBox(box) {
  x = document.getElementById(box).value;
  document.getElementById(box).value = (x == "X") ? "" : "X";
}
</script>

Funkce pro přepínání stavu je triviální. Jen malé upozornění velké písmeno X může být nahrazeno textem (ano/ne), což v některých případech může být výstižnější než obrázkové nebo textové "zatržítko".

...
<tr>
<td class="label">
<a href="javascript: swBox('c2')">#2, dvoustavový box</a>
</td>

<td class="cont">
<input type="text" name="c2" id="c2" class="inp2" value="X"
 readonly="readonly" onclick="return swBox('c2')">
</td>
</tr>
...

V HTML části kódu je důležité navázání zpracování událostí od kliknutí myší na input box a také od kliknutí na popisný text, což zde simuluje chování HTML elementu label for. Důležitý je atribut input boxu readonly, který zabrání uživateli zapisovat do textového pole z klávesnice.


<style type="text/css">
.inp2 {margin: 0; border: 0; padding: 0; background: #ffa;
       font: bold 100% Arial, SansSerif, Verdana; width: 1.1em;
       text-align: center; cursor: default;}
</style>

Pro úplnost je zde i část CSS kódu pro stavový box. Další vícestavový box pro hodnoty "ANO / NE / nevím" se liší pouze v detailech a zejména ve funkci pro zpracování stavu.

Malý rozdíl je v obsahu formuláře odesílaného na server. Zatímco klasický checkbox odesílá jméno prvku a jeho hodnotu jen když je aktivován (zatrhnutý), popsaný stavový box odešle jméno a hodnotu vždy. V našem příkladu součástí formulářových dat bude řetězec "c2="  v případě neaktivního prvku, nebo "c2=X" v případě aktivního prvku.

updated 2013-09-14