Formulářový element - input type="file" a CSS
Formulářový prvek input type="file" je používán pro uploadování souboru na server. Pomocí screenshotů si ukážeme, že tento prvek je prakticky nestylovatelný. V druhé polovině článku uvedu zkušenosti s použitím tohoto prvku.
Živý formulářový element input type="file" je uveden v prvním řádku ukázky, jeho vzhled je určen aktuálním browserem a jeho nastavením i motivem OS. Následující řádky jsou screenshoty prvku z jiných prohlížečů podle stejného stylu. Tak můžeme porovnat vzhled prvku i nejnovějších verzích browserů. Vlevo je CSS kód použitého stylu.
CSS: input { font: normal 13px Arial; } HTML: <input type="file" accept="image/*" multiple>
Defaultní zobrazení prvku file. Nastavení šířky pomocí atributu size změní celkovu šířku prvku, ale nepoměr šířky v různých prohlížečích zůstává. Text na tlačítku se nedaří změnit žádným atributem a některé browsery používají lokalizovaný text, Safari zobrazí pouze anglický popis. Živý element file v této ukázce má nastaveny atributy multiple a accept="image/*".
CSS: .sizeXY { width: 320px; float: left; } HTML: <input type="file" class="sizeXY">
Předepsáním fontu dosáhneme v IE změnu písma v části pro cestu k vybranému souboru, ale nezměníme písmo na tlačítku. To zůstává (asi Verdana). FireFox na změnu fontu nereaguje vůbec, Opera a Chrome nastaví font v obou částech prvku správně. Šířku elementu zadanou pomocí CSS dodrží všechny testované browsery, ale FireFox využije pouze šířku podle atributu size. Vlastnost float: left; odstraní zbytečný 1px volný prostor nad a pod prvkem v IE tak jako v případě jiných formulářových prvků.
CSS: .backgr { width: 320px; height: 20px; float: left; background: #ffa; text-align: right; border: 0; } HTML: <input type="file" class="backgr">
Nyní přidáme barvu pozadí, což některé formulářové prvky přepne do vzhledu klasik, nastavíme výšku prvku, odstraníme rámeček a text zarovnáme doprava. IE a Opera přepne vzhled elementu na klasik a současně odstraní rámečky nejen z textové části prvku, ale i z tlačítka. FireFox se jen přesune ve vyhrazeném prostoru doprava díky nastavení text-align: right;, text cesty k souboru ale zůstane zarovnán vlevo. Výška elementu se podařila nastavit, ale Chrome svým tlačítkem přesahuje nastavenou výšku, FireFox zase odřízne spodní hranu textové části. Safari a Chrome změní jen barvu pozadí.
Formulářový element input type="file" je kombinovaný prvek, složený ze dvou prvků: text boxu a tlačítka. Při stylování je velmi obtížné určit pro kterou část se má CSS kód použít. Tuto komplikaci by odstranil způsob zobrazení ze Safari a Chrome. Ostatně všechny formulářové elementy se mi zdají "přerámečkované". Každý pokus uplatnit některou z vlastností CSS stylů jen zhoršuje původní vzhled prvku. Proto si dovolím tvrdit, že prvek file je v podstatě nestylovatelný.
Nejen vzhled, ale i funkčnost prvku file je rozdílná. V IE musíte kliknout přímo na tlačítko aby se zobrazilo dialogové okno (widget) pro výběr souboru. Ostatní browsery zobrazí okno i po klinutí do prostoru pro název souboru. IE, FireFox a Opera zobrazí celou (často velmi dlouhou) cestu k souboru, ale jen IE a FireFox umožní procházení celé cesty pomocí kurzorových kláves, nikoli však editování pomocí klávesnice. Chrome a Safari správně zobrazí jen název souboru bez úplné, zbytečné a spíše matoucí cesty k tomuto souboru.
Browsery FireFox a Chrome umožní vybrat soubory pomocí metody drag&drop. Otevřete Windows Explorer, nebo Total Commander a požadovaný soubor přetáhnete nad element file a uvolníte tlačitko myši. FireFox dokonce umí přetáhnout více souborů najednou. Opera a IE neumožní takto vyplnit formulářový prvek file. Navíc nastavit okna obou programů tak, aby bylo možné danou operaci provést není jednoduché.
Jediný způsob jak připravit tento element podle vlastních představ je založen na následujícím principu: pro prvek input type="file" nastavíte úplnou průhlednost, tím se stane neviditelný, ale zachová si funkčnost tj. po kliknutí spustí dialogové okno (widget) pro výběr souboru. Přes tento průhledný prvek je položen běžný (viditelný) textbox, do kterého je zapsán název vybraného souboru pomocí javascriptu. Postup je popsán např. na webu Quirksmode. Podobný postup najdete na Viget Labs.
Není žádný důvod proč by formulářový prvek input type="file" měl vypadat jako z poloviny 90. let. Proč musí mít tlačítko a složitý nápis, který nejde změnit. V ideálním případě by mohl vypadat stejně jako input type="text" se stejnou možností použití stylů a po aktivování prvku vyvolat dialog pro výběr souboru (nebo kontrolu cesty) a zobrazit jen název vybraného souboru. Atribut placeholder by pak mohl nahradit nápisy na tlačítku.
Atributy formulářového prvku file
<form method="post" action="script.asp" enctype="multipart/form-data"> ... <input type="file" name="upFile" accept="image/*" multiple> ... </form>
Při použití prvku file ve formuláři, atribut enctype="multipart/form-data" musí být uveden v otevíracím tágu formuláře form. Element file může obsahovat nepovinný atribut accept, udávající přípustné typy souborů podle specifikace MIME, které budou nabídnuty v dialogovém boxu pro výběr souboru. Podle kódu nahoře, by měly být nabídnuty všechny soubory s obrázky, tento filtr je nastaven pro první ukázkový formulář. Atribut accept nefunguje v IE a Safari, jinde dokáže filtrovat jen některé typy souborů.
Atribut multiple umožní vybrat více souborů do jednoho formulářového prvku. Soubory se vybírají najednou. V dialogovém okně pro výběr souborů označíte všechny soubory pomocí kláves ctrl, nebo shift. V Chrome se zobrazí počet vybraných souborů, ostatní browsery zobrazí nepřehledný seznam souborů včetně cesty (oddělelené čárkou). Atribut multiple funguje ve všech moderních browserech, kromě IE.
Praktické použití elementu file
Problém uploadování souboru na webový server není jen o kódu na straně klienta. Mnohem složitější je kód na serveru pro zpracování načteného souboru. Je potřeba navrhnout adresářovou strukturu, sjednotit pojmenování souborů, řešit přidávání, přepsání i mazání souborů a aktualizaci odkazů na soubory. Na malém intranetu jsou často jednodušší alternativní metody ukládání souborů na server.
Základní problém při uploadování jsou názvy souborů. Pojmenovat dokument jednoznačně a výstižně tak, aby pro všechny uživatele intranetu byl pochopitelný je téměř nemožné. Další problém názvů souborů je skrytý v použité národní abecedě. Ve firmě s multi-národním prostředím, při použití znaků národní abecedy v názvu souboru, takový soubor někdy nejde nahrát (download) na PC s jiným národním systémem. Podobný problém se někdy objevuje i při posílání souboru jako přílohy v e-mailu.
Uploadování souborů je vhodné v případě časté aktualizace jednoho souboru se stejným typem dat, které se často se mění. Souboru na serveru dáme pevný název, přidáme doprovodný text popisující jeho obsah, uploadovaný soubor přejmenujeme na stanovený pevný název a tím přepíšeme původní soubor. Takto se aktualizuje jídelníček, nebo rozpis prací v aplikaci nástrojárna. Screenshoty a popis uvedených i dalších intranetových aplikací najdete v sekci ukázky aplikací.
Jindy je výhodnější odpovědnému uživateli přiřadit webový podadresář jako síťový disk a nechat jej ukládat, mazat, nebo přepisovat soubory pojmenované podle dohodnuté konvence přímo v tomto adresáři. Ostatní uživatelé intranetu mají přístup k těmto souborům z browseru. Takový postup byl použit v aplikaci Smlouvy, která hlídá termíny vypršení smluv, postupy schvalování a také obsahuje pdf kopii každé smlouvy.
Podobně soubory typu dokumenty ISO, směrnice, šablony, formuláře může na server ukládat správce intranetu, který je vždy doplní doprovodným textem, který v několika slovech popíše obsah souboru. Současně jednotlivé dokumenty vhodně seřadí, seskupí, nahradí neplatné a podobně. Stránka s komentovaným seznamem dokumentů je přívětivější než vyhledávací nástroje.
Pokud chcete založit obsah intranetu na uploadovaných souborech, počítejte s popsanými problémy. Platí, že schopnost správně a výstižně pojmenovat soubor je nepřímo úměrná postavení ve firmě. Za krátký čas se ve skladišti souborů nikdo nevyzná. Ostatně podobné skladiště (smetiště) znáte z některých lokálních disků, co teprve když skladiště je společné.
updated 2012-01-09