Formulář č.
1 - Standardní vzhled
základní formulář, který má pomocí CSS nastavené pouze písmo
- zde si u Internet Exploreru všimněte rozdílné šířky inputu typu "text" (Nick) a "password" (Heslo)
- výběr pohlaví je klasický roletkový seznam (select), který má html atribut size="3"
- dále si povšimněte rozdílného zobrazování textarea v různých prohlížečích, kde IE 7 a Opera 10 zobrazují posuvník vždy - pokud neaktivní, tak zašedlý - zatímco Mozilla Firefox 3 jej zobrazí, pouze pokud zadávaný text přesáhne okraje textového pole (u roletkového seznamu "select" přesně naopak)
Zásadním problémem při stylování webových formulářů je (jako vždy) rozdílná interpretace a zobrazování různými prohlížeči. Stačí porovnat tento formulář v IE, FF a Opeře a zjistíte, že veškeré inputy jsou zobrazovány rozdílně. A neděje se tomu tak jenom v případě jiných prohlížečů, ale i jiných operačních systémů, protože prohlížeč by měl o vykreslení těchto prvků "žádat" operační systém, aby tyto vypadaly stejně a nemátly uživatele. Jak je toto dodržováno, můžete posoudit sami (obrázek). Proto se jakkékoli větší stylování nedoporučuje.
Jako odstrašující příklad zde slouží "Šílený vzhled". Pokračujte tedy prosím tak, že zatrhnete tuto možnost a stiskněte tlačítko Odešli formulář.
Formulář č.
1 - Šílený vzhled
odpuzující příklad formuláře, který má pomocí CSS nastavené snad vše
- zde si vyzkoušejte funkci "hover", která po přejetí myší nad prvkem změní stylování tohoto prvku a tím posune celou stránku - této funkce můžete však dobře využít pro jemné zvýraznění inputu, ve kterém se uživatel zrovna nachází
- pokud máte např. Operu 10 nebo FF 3, vidíte blikající popisky; tohoto dosáhnete css vlastností blink, je však velmi rušivá a nevkusná (zajímavostí je, že s ní přišel jako první IE, přičemž nyní funguje ve všech standardních prohlížečích kromě IE (7,8)
- nejdůležitější z této hrůzy je ukázka, jak prohlížeče podbarvují inputy "radio" a "checkbox"; IE 7 podbarvuje jinak neviditelný čtvereček kolem tohoto inputu, čímž se toto stylování stává nepoužitelným; FF 3 tyto prvky neobarvuje vůbec a Opera 10 podbarví vnitřek
- nestylujte též input "submit" (tlačítko) - místo krásného 3D oblého tlačítka dostanete hranatý paskvil, který vypadá v moderním systému téměř archaicky
Pokud si to i přesto situace vyžaduje, můžete se na možnosti rozšířeného stylování podívat na dalších formulářích; zatrhněte "Formulář č.2" a stiskněte tlačítko "Odešli formulář". Pokud se chcete podívat, jak by tento formulář vypadal bez připojeného souboru stylů, zatrhněte "Bez stylování" a potvrďte.
