BioInfo = Praktikum z bioinformatiky I & II @ VŠCHT
WA, WT = Webové aplikace a Webové technologie @ VŠCHT
VS = Verzovací systémy @ VŠCHT
Python = Základy programování v jazyce Python @ VŠCHT
LP1, LP2 = Laboratorní projekt I & II @ VŠCHT
P1, P2 = Programování I & II @ VŠCHT
IP = Internetové publikování @ VŠCHT & MU & ČVUT
BI-PYT, PYT = Programování v Pythonu @ ČVUT & VŠCHT
BI-SKJ & BIK-SKJ = Skriptovací jazyky @ ČVUT
BIE-SKJ = Scripting languages @ CTU (ČVUT)
SJ = Skriptovací jazyky @ VŠCHT
AXML = Aplikované XML-technologie @ VŠCHT
Spoustu dobrých myšlenek, o které můžete zakopnout v materiálech na těchto stránkách, mám od svých učitelů programování a dalších předmětů, kterými byli v průběhu věků především Milan Klier, Václav Kos, Míla Nič, Míra Šimek, Béďa Košata a Petr Zámostný. Obzvláště Béďovi, po kterém jsem přebíral výuku Python'u na VŠCHT, se omlouvám za všechna ta místa, kde jsem ho neuvedl jako původního autora.
Jakékoliv chyby v materiálech na těchto stránkách padají samozřejmě na moji hlavu. Pozorným studentům se jich za ta léta již podařilo odhalit mnoho, ale já jejich bohulibou činnost nabourávám neustálým vylepšováním textů i příkladů, takže budoucí generace se rozhodně nudit nemusí ^_^
For corrections of translations I am greatly indebted to Brent Rees. All errors left are mine of course.
Connection closed by foreign host.
(base) pirat@143-nbdell-04:~
$ telnet vyuka.ookami.cz 80
Trying 178.217.244.12...
Connected to easy2.xnet.cz.
Escape character is '^]'.
GET /materialy/web/html/forms.xml HTTP/1.1
Host: vyuka.ookami.cz
HTTP/1.1 200 OK
Date: Tue, 17 Mar 2026 10:20:44 GMT
Server: Apache/2.2.13 (FreeBSD) mod_ssl/2.2.13 OpenSSL/0.9.8q DAV/2 PHP/5.2.11 with Suhosin-Patch
Last-Modified: Tue, 29 Mar 2022 12:11:27 GMT
ETag: "131d7fd-4c70-5db5a540979c0"
Accept-Ranges: bytes
Content-Length: 19568
Content-Type: application/xml
HTML5Jiří NovotnýFormuláře2014-01-xx
(přednášku připravil Jiří Novotný)
Formuláře neboli forms jsou něčím, bez čeho by se Internet (respektive World Wide Web) neobešel. Zajišťují totiž zásadní věc – odesílání dat na server, kde dojde k jejich zpracování, většinou nějakým skriptovacím jazykem (PHP, Python apod.).
V této lekci nás ale bude primárně zajímat používání různých ovládacích prvků, které s sebou přinesl standard HTML5.
V textu budou jiným písmem, než má obyčejný text, odlišeny názvy elementů, atributů a jejich hodnot:
<element>
atribut
hodnota atributu
Pokud se bude mluvit o konkrétních ovládacích prvcích, zobrazených na výstupu, budou napsány kurzívou.
Některé atributy jsou typu boolean a jejich použití může být lehce matoucí, takže tady je krátká vysvětlivka:
false jsou tehdy, když nejsou zapsány u elementu;
true jsou tehdy, když jsou zapsány u elementu.
false jsou tedy automaticky všechny boolean atributy, které nezapíšete k danému elementu.
A jak mohou být zapsány? Oficiálně by měly fungovat dva zápisy:
<element boolean_atribut="boolean_atribut"> – zřejmě nejkompatibilnější způsob zápisu;
<element boolean_atribut> – tohle nefungovalo, ale mělo by (radši se tomu vyhnout ;).
Konkrétní a fungující příklad: <input name="bool" type="text" required="required" />
Základním elementem formulářů je element <form>. V něm můžou a nemusí být jednotlivé ovládací prvky formuláře (anglicky widgets, dále jen prvky). Prvky (např. <input>) je totiž, jak sami uvidíte, možné přidávat i mimo <form>. Dalo by se vlastně říci, že <form> je tu hlavně proto, aby skupině prvků přiřazoval stejné vlastnosti a také aby prohlížeč věděl, hodnoty kterých prvků má odeslat serveru.
Pak tu máme některé další hlavní elementy, které slouží hlavně k přehledné navigaci ve formuláři. Je dobré zmínit, že tyto elementy nejsou povinné, nicméně je dobré je používat právě kvůli zmíněné přehlednosti. Hned na dalším slajdu si na příkladu ukážeme, jak vypadají :)
<fieldset> – je to něco jako rámeček, který k sobě logicky sdružuje skupinu prvků (graficky)
<legend> – nadpis rámečku, potomek <fieldset>
disabled – boolean atribut. Je-li nastaven na true, znepřístupní prvky uvnitř <fieldset>
form, name
<label> – používá se k popisu prvků
for, form
Element <form> nám ohraničuje formulář „kódově“.
Přímo ve specifikaci HTML je přísně zakázáno používat vnořené <form>! Některé prohlížeče to totiž nemusí rozdýchat.
Ve <form> vnořené <fieldset> nám ohraničují skupinu prvků graficky.
Do sebe vnořené <fieldset> (jak vidno) nejsou problém.
Po <fieldset> by měl následovat <legend>, protože jen tak bude nadpis rámečku tam, kde by měl být, tj. v čáře rámečku ohraničujícího příslušný fieldset.
<label> se dá napsat vlastně kamkoliv, a nebo se do něj prvek dá uzavřít, jak je vidět ve vnořeném rámečku v příkladu.
V případě vnoření prvku do <label> zde funguje podobná vlastnost jako v případě <label> spojeného s určitým prvkem (atribut for, uvidíte na dalším slajdu).
Samotné prvky (v našem případě <input> typu number) jsou tedy umístěny uvnitř <fieldset>.
Je zde jednoduchý Javascript: <output> i <input> mají v DOMovské reprezentaci atribut value. Při změně value v jednom z inputů (atribut oninput) se součet hodnot v inputech nastaví jako valueoutputu a hned se vypíše.
Poslední <fieldset> má nastaven disabled na true. Výsledek je jasný :)
Teď se podíváme na logické propojování prvků a <form>.
Jak jistě víte, každý element v HTML má atribut id, který ho jednoznačně identifikuje v rámci dokumentu. Formulářové elementy nejsou výjimkou. Některé mají atribut form, který je přiřazuje k určitému <form>. Hodnotou atributu form je hodnota id příslušného <form>. Díky form mohou prvky být mimo <form>, ale stále s ním být „ve spojení“, tj. data z těchto prvků jsou zpracována příslušným<form>. Bohužel to neznamená, že by prvky virtuálně ležely uvnitř <form> a sdílely tak např. jeho stylování – jde jen o jejich zpracování.
Nicméně např. reset button dělá to, co by normálně dělal, kdyby ležel uvnitř <form>, a to obnovování formuláře do původní podoby.
Element <label> má speciální atribut for, který ho přiřazuje k určitému prvku. Jeho hodnotou je hodnota id
příslušného prvku. Pokud uživatel klikne na takto přiřazený label, aktivuje se s ním spojený prvek.
Možná Vás napadlo, jaký je rozdíl mezi atributy id a name, když oba pojmenovávají elementy (prvky) – celkem zásadní, protože oba slouží k jiným účelům:
id – jak už bylo řečeno, tento atribut poskytuje jednoznačnou identifikaci elementu v rámci dokumentu, a musí proto být jedinečný. Odkazují se na něj atributy form a for.
name – tento atribut identifikuje prvek při odesílání na server a nemusí být jedinečný.
Malý příklad, proč hodnota name nemusí být jedinečná:
V tomto příkladu máme tři checkboxy – mají jiné hodnoty value, ale stejné hodnoty name.
Při odeslání na server může přijít informace, že uživatel zvolil checkboxy s hodnotami valuejablko a hruska.
Oba tyto zvolené checkboxy mají stejnou hodnotu name, takže server ví, do jaké kategorie oba zvolené checkboxy patří.
Dá se tedy říct, že v případě prvků spadajících do stejné kategorie je hodnota name něco jako „krabice“ a hodnoty value pak její „obsah“.
Tento formulář obsahuje tři samostatné bloky:
<form>, v němž leží <fieldset> s prvky a mimo <fieldset> ještě <label>:
Uvnitř <fieldset> máme jednoduchý <input> typu text a hned u něj <input> typu reset (reset button), který obnoví formulář do původní podoby.
Pak následuje <label> s atributem for="reset_button", čímž je k tomuto prvku přiřazen.
Na tohle jsem upozorňoval v předchozím slajdu – pokud je prvek uzavřen do <label>, chová se <label> stejně, jako by měl atribut for="id_prvku"
Samostatný <fieldset>, neležící uvnitř <form>:
Zde máme uvnitř <fieldset><input> typu reset přiřazený k našemu <form>, a proto po kliknutí normálně obnoví formulář.
Logicky mě napadlo, že pokud bych tento <fieldset> přiřadil k našemu <form>, byly by k němu přiřazeny i všechny prvky ležící uvnitř tohoto <fieldset>. Bohužel se zdá, že tato podle mě celkem užitečná věc zatím funguje jen v Opeře...
Úplně samostatný label a reset button, přiřazený k <form>:
Všimněte si, že <label> není přiřazen k <input> a po kliknutí tedy reset button neaktivuje.
Odkazování na <form> může mít jedno zajímavé využití:
V tomto příkladu máme dva <form>. Jeden by zpracovával objednávky, druhý by vyhledával zboží.
Pak zde máme několik prvků, které využívají naše dva <form>.
A co z toho plyne? :) Můžeme si vytvořit několik „šablonových“ <form>, jednotlivé prvky mít rozesety po stránce a odkazovat je podle potřeby na příslušné <form>.
Jak už bylo řečeno dříve, <form> je naším základním formulářovým elementem. Pojďme se nyní podívat
na jeho hlavní atributy:
action – hodnotou je URI adresa, na kterou budou odeslána data.
autocomplete – může nabývat hodnot on nebo off, přičemž on je výchozí hodnota. Je to vlastně automatické vyplňování formulářů prohlížečem na základě údajů zadaných uživatelem v minulosti.
Logicky funguje jen s textovými prvky. Checkboxy se Vám samy nevyplní ;)
enctype – určuje způsob, jakým mají být data zakódována před odesláním na server. Možné hodnoty:
application/x-www-form-urlencoded – defaultní hodnota. Všechny znaky jsou zakódovány, mezery převedeny na „+“, speciální znaky na hexadecimální ASCII kódy.
multipart/form-data – znaky se nekódují. Tato hodnota se musí použít u formulářů, kde se uploadují soubory.
text/plain – mezery jsou převedeny na „+“, speciální znaky se nekódují.
method – možné hodnoty jsou get nebo set. Určuje způsob, jakým se data mají posílat na server.
name – název <form>. Musí být v rámci dalších <form> na stránce unikátní a nesmí obsahovat prázdný řetězec.
novalidate – boolean atribut. Je-li nastaven na true, nebudou se kontrolovat prvky, které nějakým způsobem vyžadují kontrolu. Může se jednat o prvek number, kde jsou defaultně vyžadována čísla, nějaký prvek, který má nastaven atribut required na true nebo třeba text, kde může být vyžadován určitý formát vstupu pomocí atributu pattern.
target – říká, kam se má vypsat odpověď po odeslání formuláře. Může nabývat hodnot:
_blank – odpověď v novém okně;
_self – odpověď v tom samém okně (výchozí hodnota);
_parent – odpověď v nadřazeném rámu;
_top – odpověď v celém okně prohlížeče (tedy v hierarchicky nejvyšším prvku, tudíž ne v rámu);
jméno_rámu – odpověď v pojmenovaném rámu na stránce.
Největší „sborník“ prvků je <input> se svým atributem type (přehledný výpis
zde a také zde na webu).
Pak zde však máme i jiné prvky, reprezentované vlastními elementy: <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>.
Postupně si je všechny probereme.
Určitě Vás hned napadl rozdíl mezi <input type="button"> a <button> na jedné straně a <input type="text"> a <textarea> na druhé. Pojďme si to trochu osvětlit:
Hlavní výhodou <button> je to, že mezi jeho tagy se dají umístit další HTML elementy, což u <input> nejde. Tudíž buttonem se může stát text či obrázek, „vystajlovaný“ pomocí CSS. Později si ukážeme několik pěkných příkladů ;)
Jediná možnost, jak z obrázku pomocí <input> udělat submit button je type="image".
<textarea> umožňuje zadávat víceřádkový text a navíc je plocha na psaní roztažitelná uživatelem (což ani jedno <input type="text"> neumí).
Connection closed by foreign host.
(base) pirat@143-nbdell-04:~
$ telnet python.org 80
Trying 151.101.192.223...
Connected to python.org.
Escape character is '^]'.
GET / HTTP/1.1
Host: python.org
HTTP/1.1 301 Moved Permanently
Connection: close
Content-Length: 0
Server: Varnish
Retry-After: 0
Accept-Ranges: bytes
Date: Tue, 17 Mar 2026 10:22:41 GMT
Via: 1.1 varnish
X-Served-By: cache-vie6354-VIE
X-Cache: HIT
X-Cache-Hits: 0
X-Timer: S1773742961.266326,VS0,VE0
Location: https://www.python.org/
Strict-Transport-Security: max-age=315360000; preload
Connection closed by foreign host.
(base) pirat@143-nbdell-04:~
$
