Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

TNPW1 Cvičení 4 15.10.2014

Podobné prezentace


Prezentace na téma: "TNPW1 Cvičení 4 15.10.2014"— Transkript prezentace:

1 TNPW1 Cvičení

2 Formuláře

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 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="#"

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 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 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

8 TNPW1 Cvičení 4 Velké textové pole Párový element 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 Blizsi popis

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

10 TNPW1 Cvičení 4 Rolovací seznam Párový element 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 Obor Informační management Finanční management Aplikovaná informatika

11 TNPW1 Cvičení 4 Zaškrtávací pole Element input, type="checkbox" Pro odpovědi typu ano / ne Je mi minimalne 18 let

12 TNPW1 Cvičení 4 Radio button Element input, type="radio" Výběr mezi variantami Pro jednu skupinu shodný atribut name FIM PDF FF

13 TNPW1 Cvičení 4 Ohraničení ovládacích prvků Vizuální seskupení prvků s podobným účelem Párový element Element uvnitř udává název skupiny prvků (vytváří nadpis skupiny, vytvořené pomocí fieldset) Osobni udaje...

14 Úvod do CSS

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,..) 15

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ř.,, ) - udělají za sebou konec řádku, můžeme definovat margin a padding Řádkový element se umisťuje do řádků (např.,, ) 16

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 p { font-family: Verdana; font-size: 12px; color: red; } Selektor 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ů blablabla nadpis Identifikátor slouží pro jednoznačnou identifikaci elementu, použít jen jednou!!! blablabla 20

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

22 TNPW1 Cvičení 4 Napojení CSS na stránku 22 Inline stylování elementu –Žádná znovupoužitelnost, platí pro všechna média Deklarace stylu v tagu –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 a ), pozor na správnou cestu v href Text p {color: black; font-family: Tahoma;}


Stáhnout ppt "TNPW1 Cvičení 4 15.10.2014"

Podobné prezentace


Reklamy Google