Formulß°e v HTML

 Na tΘto strßnce se zab²vßm pouze zßkladnφ syntaxφ formulß°∙ v HTML, co╛ se fakticky t²kß jen jejich vzhledu.

<form></form> - Chameleon <input> - <select> - <textarea> - Atribut name - Atribut value - Velikosti prvk∙ - Checked a selected

P°ehled formulß°ov²ch tag∙

<form>

vymezenφ oblasti formulß°e

<input>

vstupnφ polφΦko, odesφlacφ polφΦko, za╣krtßvßtka, p°epφnaΦe, prost∞ mnoho v∞cφ. Co to p°esn∞ bude, urΦuje type

<select>

v²b∞r, takovß ta rolovacφ nabφdka. N∞kdy se tomu °φkß drop-down menu

<option>

vyskytuje se uvnit° tagu <select> a p°edstavuje jednu mo╛nost v nabφdce

<textarea>

oblast pro zadßnφ del╣φho textu

<label>

popisek pole

<optgroup>

mno╛ina voleb

<fieldset>, <legend>

mno╛ina prvk∙ s nadpiskem

<form></form>

Tag formulß°e. P°φklad:

<form action="skript.php3" method="post" target="_blank">

...n∞jakß vstupnφ pole + normßlnφ html text

...<input type=submit value=odeslat>

</form>

Vypadß to takhle:

Action je vymy╣lenß, tak╛e to tady nefunguje. Co znamenajφ jednotlivΘ atributy:

action obsahuje URL (v tomto p°φpad∞ relativnφ) na skript, kterΘmu je potom formulß° posφlßn

target urΦuje cφlov² rßm, ve kterΘm se budou v²sledky zpracovßvat. Podobnost s target u odkaz∙ nenφ nßhodnß. Nap°. hodnota target="_blank" posφlß v²sledek do novΘho okna.

Method

method urΦuje zp∙sob, kter²m budou data odesφlßna. K dispozici jsou hodnoty GET a POST.

GET je metoda zßkladnφ (nemusφ se zadßvat). Data odeslanß metodou GET jsou souΦßstφ URL za otaznφkem a jsou vid∞t. Pou╛φvß se v∞t╣inou u krßtk²ch formulß°∙.

Metoda POST je vhodnß pro rozsßhlej╣φ vstupy. Data nep°idßvß do URL (tak╛e nejsou vid∞t), ale odesφlß je jako samostatn² HTTP objekt.

Jak² vliv mß method na zpracovßnφ dat? N∞kterΘ skripty mezi metodami get a post neΦinφ rozdφly (nap°. PHP skripty.) JinΘ rozdφly Φinφ (ASP a v∞t╣ina CGI skript∙), ov╣em nijak zßsadnφ. Tak╛e je v∞t╣inou jedno, kterß metoda se to pou╛ije. DoporuΦuje se postovat vstupy obsahujφcφ hesla a dlouhΘ vstupy, proto╛e get je omezen myslφm na 1024 znak∙.

Podpora zobrazovßnφ

Nφ╛e popsanΘ prvky formulß°e by m∞ly b²t v╛dy obaleny tagy <form> a </form>, proto╛e jinak je prohlφ╛eΦe Netscape 4, Internet Explorer 3 (a star╣φ) nedokß╛ou zobrazit. 

Chameleon <input>

Input znamenß "vstup". Tag input mß mnoho podob. Jednou je to vstupnφ pole, jindy odesφlacφ polφΦko, n∞kdy p°epφnaΦ, jindy odesφlacφ obrßzek atd. V╣echno to urΦuje atribut type:

Zkuste si schvßln∞ pozm∞nit hodnoty uvedenΘ v²╣e a odeslat, koukejte, co to provede s dotazem v URL za otaznφkem.

Do tabulky se mi neve╣el poslednφ typ <input type="file" name="soubor">

slou╛φ k zadßnφ cesty k souboru. Nep°enß╣φ se jmΘno souboru, ale cel² soubor. Ke sprßvnΘ funkci vy╛aduje urΦitß nastavenφ (v definici formulß°e: <form enctype="multipart/form-data">). <input type=file> se nezobrazuje v Internet Exploreru 3. Atribut value nefunguje. Zpracovat p°ilo╛en² soubor na serveru nenφ ╛ßdnß sranda a jß s tφm pracovat neumφm.

Select

V²b∞rovß nabφdka, kterΘ se obΦas °φkß "select box" nebo taky "drop-down menu" nebo prost∞ menu. Mß r∙znΘ podoby ovliv≥ovanΘ zejmΘna atributem size.

Pozor, tag <select> je pßrov²!

Textarea

Oblast pro zapsßnφ v∞t╣φho textu.

Tag <textarea> je takΘ pßrov². Zkuste si odeslßnφ a sledujte, co se stane.

Velikost textarey se m∞°φ na znakovΘ °ßdky a sloupce, ale dß se p°etlouct pomocφ CSS. Zalamovßnφ °ßdek p°i psanφ a po odeslßnφ se °φdφ atributem wrap.

Atribut Name

Name je nejd∙le╛it∞j╣φ atribut formulß°ov²ch tag∙. Identifikuje je a posφlß svΘ jmΘno s daty. Symbolicky po odeslßnφ vypadß dotaz takto:
?jmΘno=hodnota&jmΘno2=hodnota2

P°φklady odesφlßnφ dat si m∙╛ete vyzkou╣et ve v²╣e uveden²ch tabulkßch. Nebo nap°φklad v dotazu

?jidlo=jablko&piti=kafe&zvire=ko%E8ka
jsou °et∞zce jidlo, piti a zvire obsahem atributu name, kde╛to jablko, kafe a koΦka jsou zadanΘ hodnoty.

Je╣t∞ pßr zajφmav²ch v²jimek:

• U <input type=radio> (p°epφnaΦ) se m∙╛e vyskytovat vφce puntφk∙ se stejn²m jmΘnem. V╛dy m∙╛e b²t zatr╛en² ale jenom jeden; ten se potom odesφlß se svou hodnotou
• U <input type=image> (obrßzkovΘ odesφlßnφ) se p°i kliknutφ musejφ odesφlat dv∞ hodnoty -- sou°adnice. Ke jmΘnu (name) se p°ipojujφ teΦka s pφsmenky x a y. Nap°φklad pokud je <input type=image name=obrazek>, potom jeho odeslßnφ m∙╛e vypadat takto:
?obrazek.x=13&obrazek.y=121
• U <select multiple> je t°eba odesφlat vφce hodnot se stejn²m jmΘnem. P°i odesφlßnφ se prost∞ za°adφ za sebe:
  ?platforma=unix&platforma=linux

Atribut Value

Hodnota, obsah polφ.

• U n∞kter²ch prvk∙ formulß°e je to hodnota p°ednastavenß (u <input type="text"> a <input type="password">), kterß jde p°ed odeslßnφm m∞nit
• u tlaΦφtek (input type="submit" a type="reset") n∞kter²ch prvk∙ je to hodnota zobrazovanß na tlaΦφtku
• u <input type="file> z bezpeΦnostnφch d∙vod∙ nefunguje atribut value a nejde jej ovlßdat ani skriptem (dal by se tak toti╛ vykrßst nap°. soubor s hesly)
• u ostatnφch prvk∙ (select, input type="checkbox", type="radio", type="hidden") je to hodnota nezobrazovanß a nem∞nitelnß, kterß se ale odesφlß s daty.
• Textarea atribut value nemß. Ve formulß°i se objevφ jako p°ednastavenß hodnota samotn² obsah tagu (vnit°ek, prost∞ <textarea>tohle</textarea>).

Velikosti prvk∙

• Input typu text a password nastavujφ svoji velikost podle atributu size. Ten udßvß poΦet znak∙, kter² se tam m∙╛e zobrazit. (Fakticky se tam ale vejde znak∙ vφce.)
• Size u tagu <select> oznaΦuje poΦet zobrazen²ch °ßdk∙ v²b∞ru.
• Tagu <textarea> se zadßvß ╣φ°ka a v²╣ka ve znacφch pomocφ atribut∙ rows a cols (°ßdky a sloupeΦky).
• Pokud je na prvky formulß°e aplikovßn CSS styl (zejmΘna width a height), p°evß╛φ p∙vodnφ nastavenφ (nefunguje v NN4).

Checked a selected

Atributy, jimi╛ se oznaΦuje p°ednastavenΘ zatr╛enφ polφΦka nebo v²b∞r. Jsou to atributy zvlß╣tnφ tφm, ╛e za nimi nenφ rovnφtko s hodnotou.

Checked se dß pou╛φt u <input type="checkbox"> a u <input type="radio">.

Selected se dß pou╛φt u v²b∞r∙ <select>.

Pokud jsou tyto atributy pou╛ity v jednom v²b∞ru nebo p°epφnaΦi vφcekrßt, platφ jen ten prvnφ z nich.

P°edchozφ: ┌vod do formulß°∙, Dal╣φ: Detaily formulß°∙, zdokonalenφ vzhledu, Formulß° na mail