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

Prezentace na téma: "TNPW1 Cvičení 4 15.10.2014 aneta.bartuskova@uhk.cz."— Transkript prezentace:

1 TNPW1 Cvičení 4

2 Formuláře

3 Formuláře TNPW1 Cvičení 4
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="#" <form method="post" action="script.php"> </form>

5 Metody odeslání formuláře
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 Textové pole + popisky Nepárový element <input />
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 <label for="tf_jmeno">Jmeno</label> <input type="text" name="jmeno" id="tf_jmeno" />

7 Textové pole – další atributy
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="Vase jmeno" size="10" maxlength="15" />

8 Velké textové pole Párový element <textarea> </textarea>
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 <label for="popis">Blizsi popis</label> <textarea name="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 <input type="submit" value="odeslat" /> <input type="reset" value="reset" />

10 Rolovací seznam Párový element <select> </select>
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 <label for="s_obor">Obor</label> <select name="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 Zaškrtávací pole Element input, type="checkbox"
TNPW1 Cvičení 4 Zaškrtávací pole Element input, type="checkbox" Pro odpovědi typu ano / ne <label for="chb_adult">Je mi minimalne 18 let</label> <input type="checkbox" id="chb_adult" name="checkbox_adult" />

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

13 Ohraničení ovládacích prvků
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) <form method="post" action="script.php"> <fieldset> <legend>Osobni udaje</legend> ... </fieldset> </form>

14 Úvod do CSS

15 Výchozí styly prohlížeče
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 Blokové a řádkové elementy
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 CSS – shrnutí z přednášky
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 Oddělení obsahu a formy
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 Příklad stylování odstavce
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 Třída vs. identifikátor
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 Navázání stylů na HTML element { … }
TNPW1 Cvičení 4 Navázání stylů na HTML element { … } element.trida { … } /* BEZ MEZER!!! */ .trida { … } element#identifikator { … } /* BEZ MEZER!!! */ #identifikator { … }

22 Napojení CSS na stránku
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 <p style="color:black; font-weight:bold;">Text</p> <style type="text/css" media="screen"> p {color: black; font-family: Tahoma;} </style> <link rel="stylesheet" type="text/css" href="style.css" media="screen" />