Formuláře - People(dot)tuke(dot)sk

Formuláře
Tag
Význam
Párový
Výskyt
form
formulář
ano
input
vstupní pole
ne
<form>
select
výběrové pole
ano
<form>
option
volba
ne
<select>
textarea
velké vstupní pole ano
<form>
label
popis pole
ano
<form>
fieldset
skupina polí
ano
<form>
legend
popis pole
ano
<fieldset>
optgroup skupina voleb
ano
<select>
button
ano
<form>
tlačítko
form
Formulář. Párový tag. Uzavírá skupinu ovládacích polí do jednoho formulá ře,
který bude najednou odeslán.
Atributy tagu <form>
Atribut
Význam
Hodnoty
action
skript, který bude
zpracovávat data
URL
method
způsob předávání dat
get | post
enctype
způsob zakódování dat
application/x-www-form-urlencoded |
multipart/form-data | libovolná mime deklarace
target
cílové okno nebo rám
_self, _blank, _top, _parent, nebo jméno rámu nebo
okna
Action obvykle míří na nějaký CGI skript nebo PHP nebo ASP. Není-li
uvedeno, odešlou se data téže stránce.
Výchozí metoda atributu method je get. Říká, že se data budou předávat jako
součást URL, tedy v řádku adresy. Method=post zabalí odesílaná data a
odesílá je nezávisle, takže nejsou vidět. Post je dobré nastavit u delších
formulářů.
Atributem enctype se nemusíte zabývat, pokud vám nepůjde o posílání
souborů nebo o přesný výstup českých znaků (pak nastavte multipart/formdata). Pro posílání jednoduché pošty doporu čuji enctype="text/plain".
Následuje popis vstupních polí formuláře. Dělají se pomocí tagů <input>,
<select> a <textarea>. Tyto musejí být umístěny v elementu <form>, ale navíc
mohou být třeba i v tabulce. Popisky vstupních polí se dělají normálním
textem kolem nich.
input
Vstupní pole. Nepárový tag.
Obecné atributy tagu <input>
Atribut
Význam
Hodnoty
type
druh vstupního pole
text | password | hidden | radio |
checkbox | submit | reset | image | file |
button
name
jméno pole, které se odesílá s daty
libovolné jméno
value
hodnota pole (původní hodnota pole
nebo text zobrazovaný na tlačítku)
libovolná hodnota
disabled
políčko bude šedé a nepůjde měnit
(jen v některých prohlížečích)
v IE se neodesílá
bez hodnoty
readonly
obsah pole nepůjde měnit
(fachá jen v některých prohlížečích)
bez hodnoty
align
zarovnání (jako u obrázku)
right, left + těch dalších x možností
Další atributy jsou přípustné na základě hodnoty atributu type. Mohou to být size,
maxlength, checked, autocomplete, src a accept (vizte níže).
Atribut type určuje typ políčka
Input v sobě zahrnuje celou škálu různých kolonek, tlačítek a přepínačů -- to
všechno závisí na atributu type.
Tag <input>, atribut type. Různá vstupní pole.
type=
text
Druh vstupního pole
obyčejné textové pole
password textové pole s hvězdičkami
hidden
skryté pole s předem nastavenou
hodnotou
radio
přepínač puntíků (několik tagů <input
type=radio> stejného jména (name) s
různými hodnotami tvoří skupinu
možností)
checkbox zatrhávací tlačítko
Další atributy
size= šířka ve znacích
maxlength = nejvyšší možný počet
zadaných znaků, autocomplete =
doplňování známých hodnot (popis
níže)
size= šířka ve znacích
maxlength- maximum znaků
checked -- atribut bez hodnoty
způsobí stisknutí puntíku
checked -- atribut bez hodnoty
způsobí zatržení
submit
potvrzující tlačítko způsobující odeslání
formuláře
reset
tlačítko na smazání všech polí (na
přednastavenou hodnotu)
image
potvrzující tlačítko odesílající navíc
souřadnice kliknutí (name.x a name.y
(php je dostává jako name_x a name_y
))
src= URL obrázku
(navíc nepoužitelné dynsrc, lowsrc
jako u <img>)
file
umožní zadat soubor
accept = MIME typ nabízených
souborů
button
tlačítko ovládané skriptovými atributy
V některých popisech HTML se vyskytují ještě typy range, scribble a jot, které
ale podle mých zkušeností nikde nefungují.
Příklady použití tagu input:
Obyčejné textové pole:
<input type="text" name="jmeno"> nebo <input name="jmeno">
Obyčejné textové pole dlouhé 10 znak ů:
<input type="text" size="10" name="jmeno">
Textové pole s p ředvyplněnou hodnotou ahoj:
<input type="text" name="jmeno" value="ahoj">
Pole pro heslo:
<input type="password" name="heslo">
bude se hvězdičkovat.
Skryté pole pro p ředávání skrytých parametr ů:
<input type="hidden" name="skryte" value="ahoj">
Tři přepínací tečky (radio buttony), první vybraná:
<input type="radio" name="stejne_jmeno" value="první" checked="checked">
<input type="radio" name="stejne_jmeno" value="druhá">
<input type="radio" name="stejne_jmeno" value="t řetí">
Zaškrtávací čtvereček (zaškrtnutý):
<input type="checkbox" name="ctverecek" checked="checked">
Odesílací tlačítko:
<input type="submit" value="Odeslat">
Zobrazit tento příklad.
Input s type="reset" doporučuji nepoužívat, protože téměř nikdy není užitečný.
Naopak uživatele často strašně naštve, protože je automaticky spojený se
stisknutím klávesy escape -- každé zmáčknutí escape vymaže formulář.
<input type="text">
Type="text" znamená, že půjde o obyčejné vstupní pole. Text je defaultní
hodnota, takže když se type vůbec nezadá, funguje to stejně.
Další atributy tagu <input type="text">
atribut
size
Význam
Hodnoty
obyčejné číslo, vyjadřuje počet znaků. Pro přesné
zadání rozměru se lépe hodí css vlastnost width,
která má vyšší prioritu.
délka pole
obyčejné číslo, více znaků prostě nejde zadat.
maxlength
maximální počet znaků
Bývá zvykem dávat vyšší hodnotu, než má
size.
povolí nebo zakáže
autocomplete doplňování známých
hodnot
on | off
Zajímavě funguje u textového inputu atribut autocomplete="off". Zabrání tomu,
aby se políčko vyplnilo nějakou dříve zadanou hodnotou v nějaké jiné stránce
(shoda se myslím určuje podle atributu name).
Častá chyba u maxlength: stává se mi, že prohodím na konci písmenka t a h,
maxlenght je špatně, maxlength je dobře.
select
Výběr. Zobrazí obdélníček s možnostmi nebo roletkové menu. Párový tag,
jeho obsahem jsou jednotlivé volby -- tagy <option>.
Atributy tagu <select>
Atribut
name
Význam
jméno pole odesílatné s daty
Hodnoty
libovolné jméno
multiple umožnění hromadného výběru (s Ctrl) bez hodnoty
size
počet zobrazených řádků
číslo
disabled
políčko bude šedé a nepůjde měnit
(jen v některých prohlížečích)
bez hodnoty
Pokud je size 1, bude to roletkové menu. Při size 2 a vyšší se <select>
zobrazí jako obdélníček s rolovací lištou. Bude-li hodnot stejně nebo méně
než size, nebudou tam ani rolovací lišty.
Šířka selectu, jak se vykreslí na stránce, se odvozuje od nejširší option.
Vzhled šedivé šipky s nabídkou nelze v Internet Exploreru nijak zm ěnit.
Zev všech HTML tagů jsou s vykreslováním tagu select jsou asi největší
problémy, select například nejde dost dobře stylovat přes CSS (pouze tučnost,
kurziva a barva pozadí přes <option>). Je to tím, že tento ovládací prvek
přebírají prohlížeče (zejm. Internet Explorer) z grafického prostředí operačního
systému.
option
Položka výběru. Nepárový tag (třebaže se může zadávat párově), obsahem
elementu je text za tagem až do dalšího tagu.
Atributy tagu <option>
Atribut
value
Význam
Hodnoty
řetězec odesílaný jako hodnota pole řetězec
selected Položka je předem vybrána
bez hodnoty
Text za tagem <option> se zobrazí ve výběru.
Pomocí kaskádových stylů (CSS) se v IE 6 dají položky option formátovat
pouze omezeně. Dá se jim nastavit jen barva písma (color) a barva pozadí
(background-color). Uvnitř tagu <option> jsou ignorovány všechny html tagy.
textarea
Rozsáhlé vstupní pole (textarea = angl. prostor pro text). Zobrazuje ráme ček s
lištou.. Párový tag. Nemá atribut value, za implicitní hodnotu se považuje
obsah elementu. Jinak řečeno, tag <textarea> obklopuje text, který se
zpočátku zobrazí uvnitř </textarea>.
Atributy tagu <textarea>
Atribut
Význam
Hodnoty
name
jméno odesílané s daty
jméno
cols
šířka pole ve znacích
číslo
rows
výška pole v řádcích
číslo
disabled
políčko bude šedé a nepůjde měnit
bez hodnoty
(jen v některých prohlížečích, tehdy se neodesílá)
readonly
obsah pole nepůjde měnit
(fachá to jen v některých prohlížečích)
bez hodnoty
wrap
zalamování slov a řádků
hard, soft, off
Tag textarea nemá žádnou obdobu atributu maxlength pro maximální po čet
znaků, jako je tomu u tagu <input type="text">. Má-li být počet znaků
omezený, je potřeba to složitěji skriptovat javascriptem (přes .value.length).
Tag <textarea>, atribut wrap
wrap=
Význam
soft
řádky se smějí zalomit jenom v místě mezery. V praxi se zalamují i uprostřed
slova, přesahuje-li slovo celý řádek. Odesílá se tak, jak je zapsáno.
hard
řádky se zalamují v místě mezery nebo kdekoliv v příliš dlouhém slově. Pokud
se ale zalomí, je tento řádkový zlom také odeslán na server jako konec řádku.
off
řádek se nezalamuje vůbec nikde (Interet Explorer), popř. jen na konci slov
(Mozilla). Objevuje se vodorovný scrollbar. Odesílá se tak, jak je zapsáno.
Prohlížeče se liší v tom, jakou hodnotu mají nastavenu jako výchozí. Zatímco
v IE a v Mozille je to soft, v Netscape je to pravděpodobně off. Doporučuji
vždy zadávat wrap="off".
Existují ještě starší hodnoty physical (odpovídá hard) a virtual (odpovídá soft),
ale jejich podporu jsem netestoval.
Následující tagy do HTML přibyly až ve verzi 4.0. Jejich implementace
není v pětkových verzích prohlížečů úplná, ale obecně už (na podzim
2005) fungují perfektně.
label
Štítek, popisek pole. Vyskytuje se nejlépe před políčkem, ke kterému se
vztahuje, aby to i v prohlížečích, které label nepodporují, dávalo smysl.
Výhodou je aktivace pole formuláře, pokud se klikne na štítek, a lepší
automatizace (accesskey, css). Vlastní text štítku se zadává jako obsah
elementu -- jde o tag párový.
Atribut tagu <label>
Atribut
for
Význam
Hodnoty
svázání s polem stejného identifikátoru hodnota atributu id u svázaného pole
Příklad: <label for="drak">Zadej jméno draka:</label> <input type="text" id="drak">
fieldset
Skupina polí. Párový tag, který opticky sdruží několik prvků formuláře a
vykreslí kolem nich slabý rámeček. Čáru rámečku může přerušit text tagu
<legend>. <fieldset> nemá žádné atributy kromě obecných. Vzhled se dá
upravovat pomocí CSS. Starší prohlížeče tento tag ignorují. Příklad vidíte níže
u tagu legend.
legend
Popisek skupiny polí (tagu <fieldset>). Zobrazuje se nad skupinou polí p řes
horní čáru fieldsetu. Musí být zapsána hned za značkou <fieldset>. Obsahem
tagu <legend> může být libovolné HTML (rozumné). Čtyřkové prohlížeče tag
nepodporují.
Atribut tagu <legend>
Atribut
align
Význam
Hodnoty
zarovnání popisku left | right | center
Příklad:
<fieldset>
<legend>Milá zvířátka</legend>
Kočičky: <input name="kocky"><br>
Dráčci: <input name="draci">
</fieldset>
optgroup
Skupina voleb ve výběrovém prvku <select>. Párový tag, kterým se obklopí
skupinky tagů <option>. V šestkových verzích prohlížečů se potom takové
skupinky zobrazí odsazené a budou mít nadpis tu čnou kurzívou. Ten nadpis
se zadává jako atribut label tagu <optgroup>. Pětkové a nižší verze prohlížečů
tento tag ignorují a zobrazují volby normálně pod sebou.
Příklad:
<select>
<optgroup label="nadpis skupinky">
<option>první</option>
<option>druhá</option>
</optgroup>
</select>
button
Tlačítko. Jedinou a hlavní výhodou buttonu oproti tagu <input> je, že se do n ěj
dá vložit libovolný HTML kód, který se na tlačítku zobrazí. Takže se mezi
<button> a </button> dají vkládat obrázky, nadpisy, prostě cokoliv. Je to
prostě tag párový.
Příklad:
<button name="cokoliv" value="cokoliv">tlačítko s <b>tučným
textem</b></button>
Atributy tagu <button>
Atribut
Význam
Hodnoty
type
druh vstupního pole
submit |
reset |
button
name
jméno pole, které se odesílá s daty
libovolné
jméno
value
hodnota, která by se měla odesílat (nefunguje v Exploreru, ten
odesílá obsah tagu)
libovolná
hodnota
V praxi se button chová hodně podobně jako <input> se stejným type.
Při odesílání formuláře by se normálně měly spárovat hodnoty name a value.
Implementace tagu button v Internet Exploreru ale obsahuje chybu, kdy se
namísto value odesílá text z obsahu buttonu (tedy to, co je vid ět na tlačítku,
přesněji řečeno vlastnost innerText). Kvůli této chybě se ale button v praxi
moc nepoužívá.
Tag <button>, atribut type
type=
submit odeslání formuláře
Význam
reset
vymazání formuláře
button
nic nedělá, pokud na něj není navázán skript (nejčastěji přes onclick)
Důležitý atribut type, podobný atributu type u tagu <input>. Nastavení
type="submit" způsobí, že tlačítko bude odesílat formulář. Výchozí hodnota
atributu type (tedy když se type nezadá) je submit (odesílací tla čítko
formuláře), ale Explorer chápe výchozí hodnotu type jako button. V praxi tedy
vždycky, když chcete použít button, musíte type zadat, jinak se to bude v
každém prohlížeči chovat jinak.
Úplně nejlepší je asi <button> pokud možno nepoužívat a z ůstat u <input>.