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.
Pokud opravdu potřebujete nastavit dokonalejší podobu tohoto prvku, pak doporučuji odkaz, který popisuje jak původní element nahradit běžnými stylovatelnými prvky, které pomocí skriptů zastanou funkci prvku file.
Živý formulářový element input type="file" je uveden v prvním řádku a jeho vzhled je dán použitým aktuálním browserem, jeho nastavením a motivem OS. Následující řádky jsou screenshoty prvku v jiných prohlížečích upraveného podle stejného stylu. Tak můžeme porovnat vzhled prvku i nejnovějších verzích browserů. Vlevo je kód použitého stylu.
CSS: input { font: normal 13px Arial; } HTML: <input type="file">
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á. Screenshoty IE a Chrome jsou získány na anglických verzích browserů, proto mají anglický popis, IE, FireFox a Chrome používají lokalizovaný popis tlačítka, Opera a Safari zobrazí pouze anglický popis. Text na tlačítku se nedaří změnit žádným atributem.
CSS:
.sizeXY {
width: 320px;
float: left;
}
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ě. Zadanou šířku dodrží všechny testované browsery, ale FireFox nedokáže využít celou stanovenou šířku. 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ů,
Ke zobrazení celé cesty k souboru by byla potřebná šířka prvku minimálně 600 pixelů. Kontrola správnosti vybraného souboru, který je až na konci cesty vyžaduje použití kurzorových kláves. Větší přehled by poskytl text cesty narolovaný na konec. Ostatně Safari a Chrome zobrazuje jen to důležité: vybraný soubor.
CSS:
.backgr {
width: 320px;
height: 20px;
float: left;
background: #ffa;
text-align: right;
border: 0;
}
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ý. Zatím nepomůže ani následující zápis stylů:
input[type="file"] > input[type="button"] {...}
Atributy formulářového prvku file
Při použití prvku file ve formuláři, úvodní tág formuláře form musí obsahovat atribut enctype. Element file může obsahovat nepovinný atribut accept, udávající přípustné typy souborů podle specifikace MIME, které je možné uploadovat. Použití atributu accept se mi nepodařilo správně rozběhat.
<form method="post" action="script.asp" enctype="multipart/form-data"> ... <input type="file" name="upFile" accept="image/*"> ... </form>
Praktické použití elementu file
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 na PC s jiným národním systémem. Podobný problém se 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.
Ostatní soubory a dokumenty typu ISO, směrnice, šablony, formuláře jsou na server ukládány správcem intranetu a vždy jsou doplněny doprovodným textem, který v několika slovech popisuje obsah souboru. Současně je možné jednotlivé dokumenty vhodně seřadit, seskupit, nahradit 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ě bude společné.
updated 27.09.2008