Formuláře a CSS, úvod
V této části najdete některé úpravy podoby formulářových prvků pomocí CSS, screenshoty pro srovnání jak tyto úpravy vypadají v běžně používaných browserech. Validační skripty pro ověření správnosti vložených dat a několik ukázek hotových kompaktních a in-line formulářů.
Když začnete vytvářet webové aplikace brzy zjistíte, že defaultní zobrazení formulářových prvků je sice hezké když jsou zobrazeny samostatně, ale jakmile je potřebujete zformátovat do kompaktnější podoby narazíte. CSS nepředepisuje vzhled formulářových prvků, není jasné zda tyto prvky mají převzít systémové zobrazení, nebo zda web je samostatná platforma a vzhled formulářových prvků má být jednotný přes různé browsery. Přestože neexistuje žádný předpis, nebo doporučení jak mají formulářové prvky nastavit vzhled podle CSS, jednotlivé browsery různým způsobem podporují styly. Podíváme se nakolik je tato podpora jednotná a využitelná v praxi.
Někteří autoři doporučují formuláře nestylovat vůbec. Pokud máte představu blogovacího, nebo kontaktního formuláře, obsahujícího jen několik vstupních polí a formulář se musí zobrazovat v jakémkoli browseru, je opravdu lépe nestylovat.
Na intranetu je situace jiná. Každá aplikace vyžaduje jiný formulář. Někdy to jsou velmi rozsáhlé formuláře (desítky až stovky prvků), jindy se formulář musí přizpůsobit složitější tabulce kde jsou společně zobrazeny výstupní i editovaná data. Nestylované pseudo 3d formulářové prvky zabírají hodně místa a vypadají docela historicky.
Procesní, technologická a výrobní data jsou tradičně zapisována do papírových formulářů, nebo přímo do tabulkových procesorů a formuláře webové aplikace připomínající toto prostředí nepůsobí žádné problémy. Klasické webové formuláře s velkým prázdným prostorem okolo každého vstupního políčka ve výrobním prostředí působí nezvykle a nepatřičně.
Cíl je jasný: vytvořit webové formuláře co nejvíce připomínající tabulkové procesory. Minimalizovat stávající okraje prvků, odstranit jejich rámečky, zasadit vstupní políčka i názvy do tabulek, umožnit svislé zarovnání formulářových i výstupních dat v jedné tabulce. Zde uvedené postupy stylování formulářů jistě nejsou jediné správné, ani zcela triviální, doufám že jsou alespoň zajímavé.
Články nejsou určeny pro experty na použitelnost webu, kteří omdlévají při slově tabulka, podle kterých web vznikl proto aby se uživatelé bavili změnou velikosti písma, kteří hledají zda všechny formulářové prvky mají label ap. Excelovské tabulky nepotřebují dekorativní prvky jako jsou fieldset, nebo legend a přesto nedělají problémy při vyplňování.
Ostatně soudím, že čím jednodušší formulář, tím použitelnější. Jednodušší formulář zde míním zbavený všech nefunkčních příkras, píšťalek a zvonečků.
Screenshoty vznikly na winXP a nastaveným motivem Classic (FireFox, Opera, Safari). Verze browserů byly následující FireFox 2.0.0.8, 2.0.0.10, 3b1, Opera 9.2, Safari 3.0.2 se zapnutým sub-pixel renderováním písma. Pro ukázky IE7 bylo použito PC s winXP a motivem XP s vypnutým ClearType. Screenshoty IE6 jsou z win2000. Pokud Vám výběr typů browserů nestačí, doporučuji docela vyčerpávající sbírku screenshotů na www.456bereastreet.com Styling even more form controls.
Pokud budete zkoušet ukázky kódu, nezapomeňte přepnout browser IE do standardního módu XHTML tak jak je naznačeno v následující ukázce. Vystříháte se problémům s quirks módem IE, který používá jiný box model a prvky vykreslované s přesností na pixel by byly zobrazeny odlišně.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> <html> ...
Ukázky kódu stylování nejsou pro úplné začátečníky a čtenář by měl mít představu jak jednotlivé vlastnosti CSS ovlivní výsledný obraz formulářového prvku.
updated 24.11.2007