1 / 22

TNPW1 Cvičení 4

TNPW1 Cvičení 4. 15.10.2014 aneta.bartuskova@uhk.cz. Formuláře. 15.10.2014 aneta.bartuskova@uhk.cz. TNPW1 Cvičení 4. Formuláře Slouží k zadání a odeslání informací uživatelem Poskytují řadu různých ovládacích prvků Na stránce jich lze použít větší množství

stone-larsen
Download Presentation

TNPW1 Cvičení 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TNPW1 Cvičení 4 15.10.2014 aneta.bartuskova@uhk.cz

  2. Formuláře 15.10.2014 aneta.bartuskova@uhk.cz

  3. TNPW1 Cvičení 4 Formuláře • Slouží k zadání a odeslání informací uživatelem • Poskytují řadu různých ovládacích prvků • Na stránce jich lze použít větší množství • Obsah formuláře je možné kontrolovat pomocí skriptu ještě před odesláním • Odeslaný formulář se zpracuje skriptem na straně serveru • Používáme párový element <form> </form> • Slouží k „obalení“ ovládacích prvků, které zprostředkovávají uživatelské vstupy

  4. TNPW1 Cvičení 4 Základní zápis • Atribut method - metoda odeslání dat - GET / POST (implicitně GET) • Atribut action - URL adresa stránky pro zpracování, pokud chceme zpracovávat na té samé stránce, použijeme action="#" <formmethod="post"action="script.php"> </form>

  5. TNPW1 Cvičení 4 Metody odeslání formuláře • GET - pro krátké formuláře bez diakritiky (v názvech i hodnotách) a bez citlivých údajů, hodnoty odesílá jako součást URL adresy • POST - pro rozsáhlé formuláře, odesílání souborů, hesel, ... - hodnoty odesílá na server v samostatném přenosu, nejsou vidět v URL adrese - zabezpečený přenos

  6. TNPW1 Cvičení 4 Textové pole + popisky • Nepárový element <input /> • Atribut type="text" (pokud chceme maskovaný text, tak dáme type="password") • Slouží k zadání jednoduchého textu • Label slouží jako popisek vstupního elementu <labelfor="tf_jmeno">Jmeno</label> <inputtype="text"name="jmeno"id="tf_jmeno"/>

  7. TNPW1 Cvičení 4 Textové pole – další atributy • id - identifikátor (identifikace ve stylech, skriptech, …) • name - název prvku (slouží pouze pro účely odesílání formuláře), atribut id je na name nezávislý! • value - výchozí hodnota ovládacího prvku • disabled - znepřístupnění prvku - nelze měnit jeho hodnotu <input type="text" name="jmeno" value="Vasejmeno" size="10" maxlength="15" />

  8. TNPW1 Cvičení 4 Velké textové pole • Párový element <textarea> </textarea> • Pro víceřádkový vstup, větší množství textu • Rows: počet viditelných řádků komponenty • Cols: šírka, tj. počet sloupců komponenty (max. počet znaků na řádku) • V rámci elementu je automaticky k dispozici scrollování, pokud délka textu přesáhne definovanou velikost <labelfor="popis">Blizsi popis</label> <textareaname="ta_popis"id="popis"rows="6"cols="50"></textarea>

  9. TNPW1 Cvičení 4 Tlačítka • Type="submit" – odeslání formuláře na adresu specifikovanou v atributu action • Type="reset" – uvedení formuláře do původního stavu • Type="button" – musí se navázat skript s chováním <inputtype="submit"value="odeslat"/> <inputtype="reset"value="reset"/>

  10. TNPW1 Cvičení 4 Rolovací seznam • Párový element <select> </select> • Výběr jedné nebo více nabízených variant • Preferovanou variantu lze označit jako selected • Vícenásobný výběr lze povolit atributem multiple • Odesílá se vždy hodnota (value) vybrané položky <labelfor="s_obor">Obor</label> <selectname="obor"id="s_obor"> <option value="IM">Informační management</option> <option value="FM">Finanční management </option> <option value="AI">Aplikovaná informatika</option> </select>

  11. TNPW1 Cvičení 4 Zaškrtávací pole • Element input, type="checkbox" • Pro odpovědi typu ano / ne <labelfor="chb_adult">Je mi minimalne 18 let</label> <inputtype="checkbox"id="chb_adult"name="checkbox_adult"/>

  12. TNPW1 Cvičení 4 Radio button • Element input, type="radio" • Výběr mezi variantami • Pro jednu skupinu shodný atribut name <labelfor="fim">FIM</label> <inputtype="radio"name="fakulta"id="fim"value="fim"/> <labelfor="pdf">PDF</label> <inputtype="radio"name="fakulta"id="pdf"value="pdf"/> <labelfor="ff">FF</label> <inputtype="radio"name="fakulta"id="ff"value="ff"/>

  13. TNPW1 Cvičení 4 Ohraničení ovládacích prvků • Vizuální seskupení prvků s podobným účelem • Párový element <fieldset> </fieldset> • Element <legend> uvnitř udává název skupiny prvků (vytváří nadpis skupiny, vytvořené pomocí fieldset) <formmethod="post"action="script.php"> <fieldset> <legend>Osobni udaje</legend> ... </fieldset> </form>

  14. Úvod do CSS 15.10.2014 aneta.bartuskova@uhk.cz

  15. TNPW1 Cvičení 4 Výchozí styly prohlížeče • Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS je pak „přepisujeme“) • Např. barva textu je defaultně černá, existují nějaké výchozí okraje odstavců apod. • Výchozí styly a interpretace CSS stylů se mohou v různých prohlížečích lišit, především Internet Explorer od ostatních (Firefox,Chrome,Opera,..)

  16. TNPW1 Cvičení 4 Blokové a řádkové elementy • Blokový element je umístěn v obdélníku a vyplňuje celou šířku rodičovského elementu. Zobrazuje se tedy pod předchozími prvky a následující prvky se zobrazují pod ním. (např. <p>, <h2>, <hr>) - udělají za sebou konec řádku, můžeme definovat margin a padding • Řádkový element se umisťuje do řádků (např. <a>, <img>, <strong>)

  17. TNPW1 Cvičení 4 CSS – shrnutí z přednášky • Viz jiristepanek.cz přednáška 4 • Obsah x Forma • Obsah - text odstavce, data v tabulce, … • Forma - rozvržení, grafika, formátování, fonty, …

  18. TNPW1 Cvičení 4 Oddělení obsahu a formy • Obsah – (X)HTML, Forma – CSS • Znovupoužitelnost, přehlednost, udržitelnost, jednoduchá změna vzhledu, čistota kódu, … • V minulosti se před CSS používal tabulkový layout (layout = vizuální rozvržení stránky) – dnes už ne! Tabulku jen na tabulková data!

  19. TNPW1 Cvičení 4 Příklad stylování odstavce Selektor p { font-family: Verdana; font-size: 12px; color: red; } Seznam definic pokud je selektor shodný s názvem XHTML elementu, je tento formát nastaven pro všechny elementy daného názvu na stránce. Vazba přes název elementu je vhodná v případě záměru stylovat stejně všechny tyto elementy. Zmíněnou deklarací je řečeno: Všechny odstavce budou psány písmem Verdana o velikosti 12px a budou červené.

  20. TNPW1 Cvičení 4 Třída vs. identifikátor • Třída se může použít na libovolné množství různých elementů <p class="modry"> blablabla </p> <h2 class="modry"> nadpis </h2> • Identifikátor slouží pro jednoznačnou identifikaci elementu, použít jen jednou!!! <p id="jedinecny_odstavec"> blablabla </p>

  21. TNPW1 Cvičení 4 Navázání stylů na HTML element { … } element.trida { … } /* BEZ MEZER!!! */ .trida { … } element#identifikator { … } /* BEZ MEZER!!! */ #identifikator { … }

  22. TNPW1 Cvičení 4 Napojení CSS na stránku • Inline stylování elementu • Žádná znovupoužitelnost, platí pro všechna média • Deklarace stylu v tagu <style> • Styly jsou znovupoužitelné, je možno rozlišovat média • Deklarace stylů v externím souboru (nejlepší) • Nejčistší způsob, nemísí se HTML a deklarace stylů, ext. soubor lze nalinkovat do jiné stránky, tento řádek se píše do hlavičky HTML souboru (mezi <head> a </head>), pozor na správnou cestu v href <pstyle="color:black; font-weight:bold;">Text</p> <styletype="text/css" media="screen"> p {color: black; font-family: Tahoma;} </style> <linkrel="stylesheet"type="text/css"href="style.css"media="screen"/>

More Related