Formulářové elementy - checkbox, radio a CSS
Cíl tohoto článku je získat přehled jak můžeme ovlivnit vzhled formulářových prvků checkbox a radio button pomocí vlastností CSS a jak na to reagují používané browsery. V druhé části článku se pokusíme vytvořit HTML text box ve funkci checkboxu.
Formulářový prvek checkbox je používán pro nastavení dvouhodnotového stavu. Radio button slouží jako přepínač více stavů a v jistém smyslu jej lze nahradit rozvinutým formulářovým prvkem select. Radio button má výhodu v možnosti delšího, víceřádkového popisu voleb. Oba prvky jsou v podstatě dva obrázky, které se mění podle požadovaného stavu.
Následující obrázek je souhrn screenshotů z různých browserů, který vznikl formátováním prvků do buňky tabulky. Buňka tabulky má jednu výhodu: díky zpětnému výpočtu zabere jen tolik místa kolik je potřeba pro zobrazení jejího obsahu a tak umožní určit skutečný rozměr prvku. Na screenshotech není vidět animace elementů v XP a Opeře.
Screenshoty byly získány pomocí následujících stylů.
<input type="checkbox" />
.background {background: #ffa; color: #OOf;}
.reset {border: none; padding: 0; margin: 0; float: left;}
.size18x18 {width: 18px; height: 18px; margin: 0; border: none; padding: 0;}
.size40x24 {width: 40px; height: 24px; margin: 0; border: none; padding: 0;}
V defaultním zobrazení to znamená bez použití jakékoli CSS třídy se rozměry i podoba elementů liší podle browserů. Protože součástí některých rámečků je bílá barva, pozadí v této ukázce je šedé, aby byl viditelný rozdíl. IE má jednotný rozměr 20x20, FireFox 20x20 a 21x17, Opera 21x17, Safari 18x18 a 18x19 pixelů.
CSS vlastnost background by měla zajistit přepnutí vzhledu na klasický typ známý z Win2000. Opera se snaží přizpůsobit vzhled, ale výsledek není zcela dokonalý. Safari prozatím trvá na vzhledu Aqua, snad v budoucnosti přepnout půjde. Nastavená barva pozadí se projevuje velice rozdílně, nebo vůbec, barva popředí se projeví jen v Opeře.
Při resetování okrajů margin, padding, border, velikost i tvar elementů zůstane stejný jako ve zobrazení default, ale změní se prostor který některé prvky zabírají: FireFox 13x14, Opera 17x17, Safari 14x14 pixelů. IE stále zabírá prostor 20x20 pixelů. POZOR pokud nastavíme hodnotu border: 0; IE7 se přepne do vzhledu klasik. Nastavení border: none; ponechá původní vzhled.
Při nastavení rozměru 18x18 pixelů browsery dodrží předepsaný prostor. Reálná velikost těchto prvků se přepočítá jen ve FireFoxu a Safari, ostatní prohlížeče změní okraj, přesto že okraje jsou resetovány. IE zřejmě potřebuje větší změnu rozměru aby došlo k přepočítání obrázku.
Při předpisu nesymetrického rozměru Safari jako jediný změní i poměr stran výsledného prvku. Změny viditelných rozměrů prvků nejsou úměrné v jednotlivých browserech. FireFox i Safari zvětší rozměr relativně více než IE, Opera nemění rozměr prvků vůbec. Výsledný efekt změny rozměrů je horší než když necháme původní, někdy docela titěrné rozměry.
Atributy elementů checkbox a radio
<input type="checkbox" name="ch" value="yes" />
Checkbox by měl mít unikátní jméno name, ostatně tak jako všechny ostatní prvky formuláře. Na server je odeslán jen prvek který je aktivní, tedy má zobrazené zatržítko. Pokud není specifikována hodnota value, je odeslán pár name=on, v případě kdy je prvek vybrán a je specifikováno value, odešle se pár name=value, podle našeho příkladu ch=yes. Pokud checkbox není vybrán (není aktivní), na server se informace o tomto checkboxu neodesílají.
<input type="radio" name="rd" value="1" />
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ů, kde value je hodnota zapnutého radio prvku.
Atribut checked
Pokud výchozí stav elementu má být aktivní např. podle hodnoty uložené v databázi, pak při generování html kódu serverovým skriptem tomuto elementu přiřadíme atribut checked="checked". Přepínač radio by měl být nastaven do definovaného stavu, tedy jeden prvek ze skupiny má mít nastaven atribut checked.
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.
Experimentální checkbox
V logu občas nacházím dotazy na odstranění rámečku pro element checkbox. Pokud chápeme checkbox jako dvoustavový obrázek a rámeček jako součást obrázku bude nám jasné, že odstranit rámeček nejde.
Stylovatelný checkbox musíme 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.
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ý checbox 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 04.11.2007