Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE

Vyšší odborná škola a Střední škola,Varnsdorf, příspěvková organizace

Šablona 13 VY 32 INOVACE 0101 0313

VÝUKOVÝ MATERIÁL

Číslo projektu

Vyšší odborná škola a Střední škola, Varnsdorf, příspěvková organizace Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 CZ.1.07/1.5.00/34.1076

Název projektu

Pro vzdělanější Šluknovsko

Číslo a název šablony

III/2 - Inovace a zkvalitnění výuky prostřednictvím ICT

Autor Tematická oblast

0101 - Bc. Luděk Cupal Tvorba internetových stránek

Číslo a název materiálu

VY_32_INOVACE_0101_0313 – WWW - HTML kód IX

Anotace

Výklad: základy značkovacího jazyka HTML, formuláře, formulářové prvky

Vytvořeno Určeno pro

24. 4. 2013 ICT, 3. ročník, studijní obor Cestovní ruch

Přílohy

bez příloh

Identifikační údaje školy

ICT CR, 3. ročník Tvorba internetových stránek

učební materiál č. 13 WWW – HTML kód IX

Formuláře • 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.

Formuláře

– 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.)

Formuláře – nepárový tag pro vstupní pole () – 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

Formuláře • 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í

Formuláře <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é) – původně nepárový tag pro položku výběru; atributy: • value (hodnota pole), selected (výchozí výběr), disabled

Formuláře – 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ží<br /> <br /> Formuláře <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<br /> <br /> Formuláře <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<br /> <br /> 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><br /> <br /> 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/><br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/vyi-odborna-kola-a-stedni-kolavarnsdorf-pispvkova-organizacee33f48ced01ae7a98aa165e965858c538306" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 13 VY 32 INOVACE"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">