TNPW1 Technologie pro publikování na webu

TNPW1Technologie pro publikování na webu formuláře další elementy v (X)HTML Přednáška č. 5 Ing. Martin Adámek Katedra informačních technologií FIM UHK

Formuláře Umožňují reálnou interaktivitu stránky s uživatelem Slouží k zadání a odeslání dat a informací uživatelem Poskytují řadu různých ovládacích prvků Na stránce jich lze použít větší množství Není možné je navzájem vnořovat Obsah formuláře je možné kontrolovat pomocí skriptu ještě před odesláním Odeslaný formulář se zpracuje skriptem na straně serveru Přednáška TNPW1 – Martin Adámek

Formuláře Kostra formuláře<form></form> Atributy: action URL adresa stránky pro zpracování method metoda odeslání dat - GET / POST (implicitně GET) accept formát souborů, který bude při zpracování akceptován seznam více formátů oddělený čárkou "image/gif,image/jpg" enctype kódování (formát) odchozích dat application/x-www-form-urlencoded, multipart/form-data onsubmit událost v okamžiku odeslání dat Pokud ovládací prvky používáme pouze pro spolupráci se skripty na straně klienta, můžeme tag <form></form> vynechat! Přednáška TNPW1 – Martin Adámek

Metody odesílání formuláře get (krátké formuláře, bez diakritiky v názvech a hodnotách) - hodnoty odesílá jako součást URL adresy (vše se odehrává v jednom přenosovém kroku) - vhodná pro krátké formuláře, pokud v názvech a hodnotách není diakritika a nejedná se o citlivé údaje - hodnoty jsou přímo viditelné v URL adrese – NEBEZPEČNÉ - např. vyhledávání Googlem na www.adamek.cz (pravý sloupec) post(rozsáhlé formuláře, odesílání souborů, hesel, ...) - hodnoty odesílá na server v samostatném přenosu - vhodné pro rozsáhlé formuláře nebo soubory - transakci, v níž se přenášejí parametry lze zabezpečit - volá se vždy stejné URL, nezávisle na hodnotách formuláře - při reloadu se prohlížeč ptá uživatele, zda souhlasí se znovuodesláním dat - např. www.adamek.cz/jazyky/transliterace-cyrilice/ Přednáška TNPW1 – Martin Adámek

Formuláře Ovládací prvky Různé prvky jsou vhodné pro různé činnosti a typy informací Každý ovládací prvek má jedinečné jméno v rámci formuláře Atribut id je na jménu nezávislý !!! Ovládací prvek má vždy nějakou aktuální hodnotu Prvek může mít zadanou i nějakou výchozí hodnotu Práce s ovládacími prvky často spočívá ve využití skriptů na straně klienta (validace, spolupráce mezi prvky) nebo na serveru (nastavování hodnot a plnění nabídek např. hodnotami z DB) Přednáška TNPW1 – Martin Adámek

Formuláře Vstupní prvek – input (vždy nepárový element) <input type="text" name="jmeno" value="Vase jmeno" size="10" maxlength="15" /> type typ ovládacího prvku text, password, checkbox, radio, submit, reset, button, image, hidden, file name název prvku (pouze pro účely odesílání formuláře) id identifikátor prvku (identifikace ve stylech, skriptech, …) value výchozí hodnota ovládacího prvku disabled „znepřístupnění“ prvku - nelze měnit jeho hodnotu Přednáška TNPW1 – Martin Adámek

Formuláře Tlačítko - button <input type="submit" name="Odeslani" value="Odeslat formular" /> type funkce tlačítka (submit, reset, button) name název elementu disabled znepřístupnění tlačítka value výchozí hodnota Tlačítka, vytvořená elementem input mají svá omezení Jsou tvořena buď pouze textem nebo pouze obrázkem. Přednáška TNPW1 – Martin Adámek

Formuláře Textová oblast – textarea (párový element) <textarea cols="50" rows="5" name="jmeno"></textarea> Párový element pro vkládání a odesílání delšího textu. rows počet viditelných řádků cols šířka, vyjádřená počtem znaků na jednom řádku readonly obsah elementu je pouze pro čtení (odesílá se) disabled deaktivuje element (nelze měnit obsah, neodesílá se) V rámci elementu textarea je automaticky k dispozici scrollování, pokud délka textu přesáhne definovanou velikost vstupní oblasti Přednáška TNPW1 – Martin Adámek

Formuláře Rozbalovací nabídka - select Ohraničuje vysunovací nabídku. Obsahem nabídky jsou jednotlivé položky, každá reprezentovaná jedním elementem option Odesílá se vždy hodnota (value) vybrané položky <select name="vyber_polozek" size="3" multiple> <option value="1" selected>Volba 1</option> <option value="2">Volba 2</option> <option value="3">Volba 3</option> <option value="4">Volba 4</option> </select> Pozor na syntaxi v XHTML (je nutno psát atributy včetně "hodnot") multiple="multiple" selected="selected" Přednáška TNPW1 – Martin Adámek

Formuláře size počet viditelných položek nabídky (bez vysunutí) multiple umožňuje označení (výběr) více položek současně optgroup vytvoření skupin uvnitř vysunovací nabídky. Skupiny nelze navzájem vnořovat. Popisek - label - Slouží pro vytváření popisku u formulářového prvku <label>Jméno: <input type="text" name="jmeno"></label> <label for="prvek">Jméno:</label> <input type="text" name="jmeno" id="prvek id="id_prvku"> Při tvorbě popisku s pomocí label se bude popisek chovat jako součást ovládacího prvku (např. pro zaškrtnutí checkboxu stačí kliknout na jeho popisek) Přednáška TNPW1 – Martin Adámek

Formuláře Skupina ovládacích prvků (oblast) – <fieldset></fieldset> - Vizuální seskupení ovládacích prvků s podobným účelem. - Napomáhá zpřehlednění a lepšímu vzhledu formuláře. Pojmenování skupiny prvků - <legend></legend> - Vytváří nadpis skupiny, vytvořené pomocí fieldset <form action="akce" method="post"> <fieldset> <legend>Přihlášení do systému</legend> <input type="text" name= "login" size="10"/> <input type="password" name= "heslo" size="10"/> <input type="submit" value="Odeslat údaje" /> </fieldset> </form> Přednáška TNPW1 – Martin Adámek

Formuláře • prvek formuláře je vhodné vložit do tagu label (ne až za něj) • možnost kliknout na popisek • příklad např. www.adamek.cz , např. vyhledávání vpravo • nebo svázat přes název (aby bylo poznat, co k čemu patří) Přednáška TNPW1 – Martin Adámek

Rámy (Frames) – co to bylo • Místo hlavní stránky webu se vytvořila definice rámů (rozdělení okna prohlížeče na nezávislé oblasti) • V každém rámu se zobrazovala jiná HTML stránka • Typický příklad složení webu s rámy: • index.htm (definoval rámy) • top.htm (hlavička, nadpis webu) • menu.htm (levý sloupec s odkazy na podčásti webu) • X konkrétních .htm stránek (zobrazovaly se v největším rámu, odkazovalo se na ně z menu) • odkazy mířily • na stejný rám • na jiný rám (např. z menu na ten největší) • na celé okno prohlížeče • (definice atributem „target“) Přednáška TNPW1 – Martin Adámek

Rámy (Frames) – proč to bylo a proč to není Výhody: • na 1 místě definované menu, nadpis, apod. • snadnější aktualizace rozsáhlejšího webu • to dnes řeší PHP • definice visuálního rozložení bez zneužití tabulek • to dnes řeší CSS Důvody „zániku“: • Google nebo jiný fulltext dovede návštěvníka na podstránku s konkrétním obsahem • chybí okolní rámy, tedy menu a nadpis webu • uživatel neví, kde je, ani jak se dostane na hlavní a sousední stránky • V adresním řádku je stále URL celého webu, nelze uvést odkaz na konkrétní podstránku (aby byly zobrazeny i okolní rámy) • Rámy už se nepoužívají !!! Přednáška TNPW1 – Martin Adámek

(Rámy – ukázka) Ukázka pouze pro zajímavost. V projektech se rámy nesmí objevit ! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>Název stránky</title> </head> <frameset cols="20%,*"> <frame name="top_left" src="prvni.htm" scrolling="auto" frameborder="1"> <frame name="top_right" src="druha.htm" scrolling="auto" frameborder="0"> <noframes><p>Váš prohlížeč nepodporuje rámce!</p></noframes> </frameset> </html> Přednáška TNPW1 – Martin Adámek

Ostatní tagy – hr, nbsp Vodorovná svislá čára <hr /> - podle nastavení atributů (v XHTML pomocí CSS stylu) vytvoří vodorovnou nebo svislou čáru Tvrdá mezera Not-Breaking-SPace do textu vloží vždy interpretovanou mezeru tvrdě spojující okolní text při lámání na konci řádku (typické použití po předložkách) v PSPadu i Homesitu stejně jako ve Wordu: Ctrl+Shift+mezera v rámci tabulky může reprezentovat „obsah“ prázdné buňky Přednáška TNPW1 – Martin Adámek

br – Odřádkování <br /> vždy se interpretuje v prohlížeči v PSpadu a Homesitu: Ctrl+enter funguje podobně jako odřádkování shift+ENTER v textovém editoru „Menší“ odřádkování uvnitř odstavce: <p>Tomáši, Alvo, Edisone!<br /> Žárovka se dnes nedostane.</p> <p>Pryč je doba svobodného výběru,<br /> žárovka musí do sběru.</p> Přednáška TNPW1 – Martin Adámek

Příště • Ing. Jiří Štěpánek • kaskádové styly CSS • definice grafického vzhledu oddělená od XHTML kódu Přednáška TNPW1 – Martin Adámek

TNPW1 Technologie pro publikování na webu