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 následující odkazy link 1, link 2, které popisují jak původní element nahradit běžnými stylovatelnými prvky, které pomocí skriptů zastanou funkci prvku file.
Následující screenshoty formulářového elementu input type="file" ukazují vzhled ve vybraných browserech při použití některých vlastností CSS.
<input type="file" name="upFile" />
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á. V browserech IE, jako obvykle, prvek zabírá větší prostor než je potřeba. Screenshoty IE jsou získány na anglickém systému, proto mají anglický popis, IE a FireFox používají lokalizovaný popis tlačítka, Opera a Safari používají pouze anglický text. Text na tlačítku se nedaří změnit žádným atributem.
input {
font: normal
13px Arial;
}
.sizeXY {
width: 320px;
height: 20px;
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 a Opera nastaví font v obou částech prvku správně. Žádané rozměry dodržují všechny testované browsery, ale FireFox nedokáže využít celou stanovenou šířku. To je asi největší chyba při "stylování" prvku file, která není odstraněna ani v beta verzi FF3. Vlastnost float: left; odstraní zbytečný 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 zobrazuje jen to důležité: vybraný soubor.
.bgr {
width: 320px;
height: 20px;
float: left;
background: #ffa;
text-align: right;
border: 0;
}
Nyní přidáme barvu pozadí, což některé prvky přepíná do vzhledu klasik, pokusíme se odstranit rámeček a text zarovnáme doprava. IE jako jediný prohlížeč přepne vzhled IE7 na klasik a současně odstraní rámečky nejen z textové části prvku, ale i z tlačítka. FireFox jen změní barvy rámečku a přesune se ve vyhrazeném prostoru doprava díky nastavení text-align: right;. Opera na přidané vlastnosti nereaguje, Safari jen změní barvu pozadí.
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ý. 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.
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 10.01.2008