Transcript Formuláře a další prvky
Slide 1
TNPW1
Technologie pro publikování na webu
Přednáška č. 5
formuláře
další elementy v (X)HTML
Ing. Martin
Adámek
Katedra informačních technologií FIM UHK
Slide 2
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
2
Slide 3
Formuláře
Kostra formuláře
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 vynechat!
Přednáška TNPW1 – Martin Adámek
3
Slide 4
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
4
Slide 5
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
5
Slide 6
Formuláře
Vstupní prvek – input (vždy nepárový element)
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
6
Slide 7
Formuláře
Tlačítko - button
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
7
Slide 8
Formuláře
Textová oblast – textarea (párový element)
name="jmeno">
Párový element pro vkládání a odesílání delšího textu.
rows
cols
readonly
disabled
počet viditelných řádků
šířka, vyjádřená počtem znaků na jednom řádku
obsah elementu je pouze pro čtení (odesílá se)
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
8
Slide 9
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
Pozor na syntaxi v XHTML (je nutno psát atributy včetně "hodnot")
multiple="multiple"
selected="selected"
Přednáška TNPW1 – Martin Adámek
9
Slide 10
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
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
10
Slide 11
Formuláře
Skupina ovládacích prvků (oblast) –
- 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ů -
- Vytváří nadpis skupiny, vytvořené pomocí fieldset
Přednáška TNPW1 – Martin Adámek
11
Slide 12
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
12
Slide 13
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
13
Slide 14
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
14
Slide 15
(Rámy – ukázka)
Ukázka pouze pro zajímavost. V projektech se rámy nesmí objevit !
Frameset//EN">
Název stránky
Přednáška TNPW1 – Martin Adámek
15
Slide 16
Ostatní tagy – hr, nbsp
Vodorovná svislá čára
- 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
16
Slide 17
br – Odřádkování
- 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řednáška TNPW1 – Martin Adámek
17
Slide 18
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
18
TNPW1
Technologie pro publikování na webu
Přednáška č. 5
formuláře
další elementy v (X)HTML
Ing. Martin
Adámek
Katedra informačních technologií FIM UHK
Slide 2
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
2
Slide 3
Formuláře
Kostra formuláře
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 vynechat!
Přednáška TNPW1 – Martin Adámek
3
Slide 4
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
4
Slide 5
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
5
Slide 6
Formuláře
Vstupní prvek – input (vždy nepárový element)
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
6
Slide 7
Formuláře
Tlačítko - button
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
7
Slide 8
Formuláře
Textová oblast – textarea (párový element)
name="jmeno">
Párový element pro vkládání a odesílání delšího textu.
rows
cols
readonly
disabled
počet viditelných řádků
šířka, vyjádřená počtem znaků na jednom řádku
obsah elementu je pouze pro čtení (odesílá se)
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
8
Slide 9
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
Pozor na syntaxi v XHTML (je nutno psát atributy včetně "hodnot")
multiple="multiple"
selected="selected"
Přednáška TNPW1 – Martin Adámek
9
Slide 10
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
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
10
Slide 11
Formuláře
Skupina ovládacích prvků (oblast) –
- 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ů -
- Vytváří nadpis skupiny, vytvořené pomocí fieldset
Přednáška TNPW1 – Martin Adámek
11
Slide 12
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
12
Slide 13
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
13
Slide 14
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
14
Slide 15
(Rámy – ukázka)
Ukázka pouze pro zajímavost. V projektech se rámy nesmí objevit !
Frameset//EN">
Přednáška TNPW1 – Martin Adámek
15
Slide 16
Ostatní tagy – hr, nbsp
Vodorovná svislá čára
- 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
16
Slide 17
br – Odřádkování
- 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:
Tomáši, Alvo, Edisone!
Žárovka se dnes nedostane.
Pryč je doba svobodného výběru,
žárovka musí do sběru.
Přednáška TNPW1 – Martin Adámek
17
Slide 18
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
18