input typu file - Český HTML 5 manuál

HTML a CSS Manuál Formuláře input typu file - Český HTML 5 manuál

Element <input> se používá ve formulářích, kde umožňuje uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributu type.

Input typu file umožňuje k formuláři připojit soubor. Ten se poté odešle spolu s formulářem.

Atributy:

  • accept - Umožňuje určit MIME typy souborů, které je přípustné vybrat. Můžeme využít speciálních hodnot audio/*, video/* a image/*. Dále můžeme samozřejmě uvést klasické MIME typy jako např. image/jpeg nebo text/plain. Je možné uvést více hodnot, které oddělíme čárkou.
  • multiple - Atribut je typu boolean. Pokud je uveden, je možné vybrat více souborů.

Pozor, pokud formulář obsahuje <input> typu file, je nutné, aby byl atribut enctype formuláře nastaven na hodnotu multipart/form-data.

Následující atributy jsou společné pro všechny typy inputů:

  • autocomplete - Nabývá hodnot on a off, přičemž on je výchozí. Pokud je autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
  • disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
  • list - Obsahuje id elementu datalist, položky listu poté slouží jako předdefinované možnosti <input> elementu.
  • readonly - Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
  • name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
  • value - Přednastavená hodnota pole.
  • autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.
  • pattern - Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
  • placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
  • required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

Ukázka nahrání souborů na web pomocí inputu typu file:

Připoj obrázek s tvojí originální podobou:<br />
<input type="file" name="foto" accept="image/*" />

Výsledek:

Ukázka formulářového pole input typu file

Pozor! Nemůžeme se spoléhat na to, že uživatel soubor daného typu neodešle. HTML stránka je na jeho počítači a on si může formulář přepsat a odeslat nám něco, co nechceme. S tím musí skript na druhé straně počítat a data stejně znovu zvalidovat!


 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!


 



 

 

Komentáře

Avatar
Martin Bednář (xbedm01):

Ahoj, mám dotaz: Odesílá se přes input typu file celý soubor, nebo jen cesta k němu?

Odpovědět 23.9.2013 19:26
I bez motta se dá žít
Avatar
Odpovídá na Martin Bednář (xbedm01)
Michal Maršálek:

Ahoj, jak by potom mohlo dojít k nahrání souboru na server, pokud by se nepřenášel?

 
Odpovědět 23.9.2013 19:31
Avatar
Odpovídá na Martin Bednář (xbedm01)
Michal Žůrek (misaz):

nevíš proč pak nahrávání videa na youtube trvá hodinu když by se tam posílala jen kraťoulinká cesta?

Odpovědět 23.9.2013 19:32
Nesnáším {}, proto se jim vyhýbám.
Avatar
Martin Bednář (xbedm01):

Dík za rychlé odpovědi!

Odpovědět 23.9.2013 19:34
I bez motta se dá žít
Avatar
Odpovídá na Michal Žůrek (misaz)
Lukáš Tesař:

No a jak by se server k tomu tvému souboru asi dostal?
To je podobné jako když chceš spustit zástupce tvého souboru na jiném počítači - taky se ti to nepodaří

 
Odpovědět 1.4.2014 14:50
Avatar
Odpovídá na Lukáš Tesař
Michal Žůrek (misaz):

Však on se na to ptal. Přečti si na koho odpovídám.

Odpovědět 1.4.2014 14:54
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.