Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 13 VY 32 INOVACE 0101 0313
VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor Tematická oblast Číslo a název materiálu Anotace Vyšší odborná škola a Střední škola, Varnsdorf, příspěvková organizace Bratislavská 2166, 40747 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 CZ.1.07/1.5.00/34.1076 Pro vzdělanější Šluknovsko III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT 0101- Bc. Luděk Cupal Tvorba internetových stránek VY_32_INOVACE_0101_0313 WWW - HTML kód IX Výklad: základy značkovacího jazyka HTML, formuláře, formulářové prvky Vytvořeno 24. 4. 2013 Určeno pro ICT, 3. ročník, studijní obor Cestovní ruch Přílohy bez příloh
ICT CR, 3. ročník Tvorba internetových stránek učební materiál č. 13 WWW HTML kód IX
formuláře jsou takové části stránek, které více zapojují uživatele do dění, vyžadují od něj určitou interakci (odpovědi na otázky, vybírání z možností atp.) práce s formuláři se dělí na 2 části: vytvoření formuláře (oblast HTML) zpracování dat z formuláře (skripty, programy; nad rámec tohoto úvodu) formulářové prvky, které lze na stránce vytvořit a využít: textové pole, textové pole se zamezeným zobrazováním znaků (heslo), výběrové pole (jedno-nebo víceřádkové), pole pro delší text (víceřádkové), tlačítko, zatrhávací políčko, přepínač, popisek pole, seskupení polí, skupina voleb atp.
<form> párový tag pro vytvoření formuláře; všechna pole uvnitř patří do tohoto formuláře a jejich data budou najednou odeslána atributy: action URL skriptu ke zpracování dat (není-li zadán, data se odešlou na tutéž stránku) method předávání dat get data jsou obsažena v URL (nemnoho dat, text) post data jsou odeslána nezávisle (více dat, obrázky atp.) enctype kódování dat (např. při posílání obrázků) target cíl (rám, okno apod.)
<input> nepárový tag pro vstupní pole (<input/>) různé formulářové prvky (textová pole, textová pole pro heslo, skrytá pole, přepínače, zatrhávací pole, odesílací či resetovací tlačítka, obrázky, soubory, tlačítka) některé atributy: type druh vstupního pole (text, password, hidden, radio, checkbox, submit, reset, image, file, button) name jméno vstupního pole (důležité pro identifikaci dat) value hodnota vstupního pole disabled, readonly omezení použití pole align zarovnání prvku
tagy type=text a type=password mohou mít dále atributy size(šířka pole ve znacích) a maxlength(maximální počet zadatelných znaků) tagy type=radio a type=checkbox mohou mít dále atribut checked (znamená zatržení volby) skupina přepínačů patřících k sobě musí mít shodné jméno a jiné hodnoty tag type=image má atribut src(url obrázku) prvek odešle formulář a navíc pošle i souřadnice kliknutí
<select> párový tag pro pole s výběrem (roletkové menu nebo víceřádkové pole); atributy: name jméno pole (důležité pro identifikaci dat) multiple volba vybírat více možností (pomocí klávesy Ctrl) size počet zobrazených řádků pole size= 1 roletkové menu size> 1 víceřádkové pole s výběrem (často s rolovací lištou) disabled pole nelze změnit (zobrazuje se šedivé) <option> původně nepárový tag pro položku výběru; atributy: value(hodnota pole), selected(výchozí výběr), disabled
<textarea> párový tag pro rozsáhlé textové pole (jeho hodnotou je text uvnitř elementu); atributy: name jméno pole (důležité pro identifikaci dat) cols, rows velikost textového pole ve znacích (sloupce, řádky) disabled, readonly, maxlength omezení použití pole wrap způsob zalamování řádků <label> párový tag pro popisek jiného pole (tzv. štítek) obsah prvku je jeho hodnotou atribut for určuje, ke kterému poli (podle atributu id) label náleží
<fieldset> párový tag pro sdružování polí formuláře vytvoří kolem polí, které jsou uvnitř tagu, slabý rámeček <legend> párový tag pro popisek skupiny polí vytvořené pomocí tagu fieldset prvek přeruší slabý rámeček kolem skupiny polí a vloží popisek (atribut align zarovná popisek vlevo, na střed či vpravo) <optgroup> párový tag pro seskupení některých voleb tagu option seskupení může být pojmenováno, pak jsou volby pod názvem seskupení odsazené; pojmenování se děje atributem label
<button> párový tag pro vytvoření tlačítka je univerzálnější než tlačítko vytvořené tagem input (lze do něj přidat další HTML kód, např. obrázek) HTML kód uvnitř párového tagu je zobrazen na tlačítku atribut type druh tlačítka, možnosti: submit tlačítko odešle data formuláře reset tlačítko způsobí reset formuláře (uvedení do původního stavu) button pouhé tlačítko, pro funkčnost je třeba navázat skript atribut name jméno pole (důležité pro identifikaci dat) atribut value hodnota prvku odesílaná s formulářem
Ukázka formuláře <form name="formular" method="post" action="zpracovani.php"> <fieldset> <legend>popis skupiny polí</legend> <input type="submit" value="odeslat /> <select name="vyber" size="1"> <option value="možnost 1" /> <option value="možnost 2" selected="selected" /> </select> </fieldset> <input type="submit" value="odeslat" /> </form>
Seznam použitých zdrojů JANOVSKÝ, Dušan. Základy HTML. Jak psát web[online]. 2004 [cit. 2013-04-24]. Dostupné z: <http://www.jakpsatweb.cz/zaklady-html.html> POWELL, Thomas. HTML & XHTML: The Complete Reference[online]. 2003 [cit. 2013-04-24]. Dostupné z: <http://www.htmlref.com/> Tvorba-webu.cz[online]. 2008 [cit. 2013-04-24]. Dostupné z: <http://www.tvorba-webu.cz/>