CELA OBRAZOVKA ZPET NA OBSAH


FORMUL.GIF


Obsah lekce:



Co je to formulß°?

Pomocφ p°φkaz∙ pro tvorbu formulß°∙ lze do jazyka HTML zabudovat polφΦka pro zadßvßnφ textu a tlaΦφtka. ┌daje vypln∞nΘ u₧ivatelem se zasφlajφ serveru, kde se takΘ zpracovßvajφ (v drtivΘ v∞tÜin∞ p°φpad∙ jsou odeslanß data zpracovßna CGI skriptem, kter² je nutnΘ umφstit do adresß°e CGI skript∙ - je nutnΘ kontaktovat administrßtora serveru a po₧ßdat jej o umφst∞nφ vaÜeho CGI programu do tohoto adresß°e).
Ji₧ jazyk HTML 2.0 poskytuje p°φkazy pro tvorbu formulß°∙. ╚ßsti dokument∙, kterΘ majφ slou₧it k zφskßvßnφ informacφ, lze vytvo°it v podob∞ formulß°e, do n∞ho₧ autor m∙₧e umφstit jak vstupnφ pole, tak i seznamy s mo₧nostmi, z nich₧ se polo₧ky vybφrajφ pomocφ tlaΦφtka nebo zaÜkrtßvacφch tlaΦφtek. Jakmile u₧ivatel stiskne po vypln∞nφ formulß°e tlaΦφtko "Submit", jsou ·daje zφskanΘ tφmto formulß°em odeslßny na server.
V tomto mφst∞ vÜak nastßvajφ problΘmy. Bez programu, kter² by na serveru dßle zpracoval data z formulß°e, nelze prakticky nic d∞lat. NaÜt∞stφ existuje jedna v²jimka, kdy se zadanß data mφsto na server mohou zaslat pomocφ funkce mailto na libovolnou e-mailovou adresu. Bohu₧el doÜl² v²sledek na danou adresu nenφ p°φliÜ p°ehledn², nebo¥ obsahuje spoustu specißlnφch znak∙. I p°esto vÜak z∙stßvß funkce mailto tφm nejsch∙dn∞jÜφm °eÜenφm, jak vyu₧φt HTML formulß°e a dostat se k vyhodnocenφ zφskan²ch v²sledk∙.


╚innost formulß°e

Definice formulß°e je uzav°ena mezi nßv∞Ütφ <FORM> a </FORM>. Do kontejneru FORM jsou pomocφ mnohostrannΘho p°φkazu <INPUT> vklßdßna vstupnφ pole. Atribut TYPE u p°φkazu INPUT m∙₧e nab²vat dvou specißlnφch hodnot "submit" a "reset". V obou p°φpadech je zobrazeno odpovφdajφcφ tlaΦφtko. ┌kolem tlaΦφtka "Submit" je zaslat zφskanß data z formulß°e na server k dalÜφmu zpracovßnφ. V nejjednoduÜÜφm p°φpad∞ si prohlφ₧eΦ znovu vy₧ßdß aktußlnφ HTML strßnku, ke kterΘ p°ipojφ informaci zadanou u₧ivatelem. TlaΦφtko "Reset" vyma₧e z formulß°e vÜechny ji₧ zadanΘ hodnoty.


Ilustrativnφ p°φklad:

<FORM>
<INPUT NAME="Test"><BR>
<INPUT TYPE="submit">
</FORM>

Po zpracovßnφ prohlφ₧eΦem:




<FORM action="url_skriptu" method=[get | post] enctype="zp∙sob_k≤dovßnφ" script="url_skriptu" target="cφlovΘ_okno">
...prvky formulß°e...
</FORM>
pßrovß znaΦka vymezujφcφ formulß°, kter²m se zφskßvajφ informace od u₧ivatele; formulß°e nelze vno°ovat
action URL skriptu, kter² zpracuje data odeslanß pomocφ formulß°e
method zp∙sob odeslßnφ dat
get dopln∞nφm na konec aktivnφho URL (implicitnφ)
post v t∞le po₧adavku
enctype zp∙sob k≤dovßnφ dat (implicitn∞ application/x-www-form-urlencoded)
script lokßtor jedno·ΦelovΘho CGI skriptu, kter² prohlφ₧ecφ program zavede za ·Φelem p°edzpracovßnφ v²stup∙ formulß°e p°ed jejich odeslßnφm na cφl specifikovan² atributem action
target jmΘno okna, rßmce, nebo prohlφ₧eΦe, ve kterΘm mß b²t zobrazen v²sledek zφskan² odeslßnφm formulß°e


<INPUT type=[text | password | checkbox | radio | submit | reset | hidden | image | file | range | scribble | jot] name="jmΘno_pole" value="hodnota" checked min=dolnφ_mez max=hornφ_mez src="url_grafiky" size="rozm∞ry_pole" maxlength=max_znak∙ align=[top | middle | bottom | left | right] accept="souborov²_typ" dissabled error="chybovΘ_hlßÜenφ">
nepßrovß znaΦka slou₧φcφ k definici jednoho jednoduchΘho vstupnφho pole formulß°e; formulß° zpravidla obsahuje n∞kolik <INPUT> prvk∙
type druh vstupnφho pole
text jedno°ßdkovΘ vstupnφ pole; atributem value lze zadat poΦßteΦnφ hodnotu pole
password jako text, ale nenφ zobrazovßna u₧ivatelem zapisovanß hodnota
checkbox zaÜkrtßvacφ polφΦko, atributem value lze specifikovat hodnotu vracenou p°i zaÜkrtnutφ tohoto polφΦka
radio volba prßv∞ jednΘ mo₧nosti; atributem value lze specifikovat hodnotu vracenou pro tuto volbu
submit tlaΦφtko odesφlajφcφ data k serveru; atributem value lze definovat popis tlaΦφtka
reset tlaΦφto pro nastavenφ implicitnφch hodnot prvk∙ formulß°e; atributem value lze definovat popis tlaΦφtka
hidden skrytΘ pole; atributem value lze specifikovat pevnou hodnotu nezadßvanou u₧ivatelem
image na poklep citlivß grafika specifikovanß atributem src - pokyn k odeslßnφ dat serveru s p°ipojen²mi sou°adnicemi mφsta odkliknutφ
file pole pro zadßnφ jmΘna souboru; umo₧≥uje k v²stupu formulß°e p°ipojit jeden nebo vφce lokßlnφch soubor∙; atributem value lze specifikovat implicitnφ nßzev souboru; atributem accept lze vymezit p°φpustnΘ typy soubor∙; tento typ pole vy₧aduje v deklaraci formulß°e atributy enctype="multipart/form-data" method=post
range Φφseln² interval (p°etßΦecφ pole)
scribble "poΦmßratelnß" grafika specifikovanß atributem src
jot "popsatelnß" grafika specifikovanß atributem src
name symbolickΘ jmΘno pole odesφlanΘ serveru (musφ b²t v rßmci formulß°e jednoznaΦnΘ); pro typ pole checkbox|radio m∙₧e mφt °ada INPUT prvk∙ vytvß°ejφcφch blok toto₧nΘ symbolickΘ jmΘno
value hodnota pole (dle typu)
checked specifikuje implicitnφ zaÜkrtnutφ pole typu checkbox nebo urΦuje implicitnφ volbu pole typu radio
min dolnφ mez ΦφselnΘho intervalu pro typ pole range
max hornφ mez ΦφselnΘho intervalu pro typ pole range
src URL grafiky pro typ pole image, scribble, jot
size poΦet_znak∙ | poΦet_znak∙, poΦet_°ßdk∙; fyzick² rozm∞r pole typu text|password
maxlength maximßlnφ poΦet znak∙ akceptovan² v poli typu text|password
align ovliv≥uje umφst∞nφ objektu v∙Φi okolφ
top hornφ okraj objektu bude zarovnßn s hornφm okrajem °ßdku
middle st°ed objektu bude zarovnßn na ·Φa°φ °ßdku
bottom dolnφ okraj objektu bude zarovnßn se spodnφm okrajem °ßdku
left vodorovnΘ umφst∞nφ objektu na lev² okraj
right vodorovnΘ umφst∞nφ objetu na prav² okraj
accept seznam MIME typ∙ nebo vzor∙ p°φpustn²ch pro pole typu file, kter² je skript ochoten p°ijφmat; je na prohlφ₧ecφm programu, aby podle p°φpony zkontroloval, zda u₧ivatel zadal p°φpustn² soubor
disabled zobrazenφ pole bez mo₧nosti jeho modifikace
error hlßÜenφ pro p°φpad chybnΘ hodnoty

Aby mohl b²t v²stup z formulß°e dßle zpracovßvßn, musφ b²t tato strßnka spojena s n∞jak²m CGI skriptem, kter² komunikuje s dalÜφm programem ulo₧en²m na stran∞ serveru. Program vyhodnotφ zaslanß data a v²sledek odeÜle klientskΘmu browseru.
Data dopl≥enß do formulß°e jsou p°ipojovßna za nßzev dokumentu otaznφkem. Po otaznφku nßsleduje oznaΦenφ (label) vstupnφho pole, kterΘ je shodnΘ s hodnotou atributu NAME zadanΘho v nßv∞Ütφ <INPUT>. Mezery jsou nahrazeny znamΘnky plus (+). Specißlnφ znaky jsou zapsßny v hexadecimßlnφm k≤du, kterΘmu p°edchßzφ znak %.


Tvorba formulß°e

Nejv∞tÜφ Φßst prßce ve formulß°φch obstarßvß p°φkaz <INPUT>. Typ vstupnφho pole je urΦen atributem TYPE, kter² m∙₧e nab²vat nßsledujφcφch hodnot:

  • <INPUT TYPE="text">

    • Typ "text" slou₧φ k zadßvßnφ jedno°ßdkov²ch text∙. Tento typ je definovßn jako implicitnφ, tak₧e je pou₧it i v p°φpad∞, ₧e u p°φkazu INPUT nenφ typ definovßn. DΘlku tohoto vstupnφho pole je mo₧nΘ omezit pomocφ atributu SIZE. Maximßlnφ dΘlku zobrazovanΘho pole je mo₧nΘ omezit atributem MAXLENGTH. Pokud je MAXLENGTH menÜφ ne₧ SIZE, pak se text v okΘnku posouvß (roluje).

  • <INPUT TYPE="password">

    • PolφΦka typu "password" jsou velice podobnß polφΦk∙m pro zadßvßnφ textu ovÜem s v²jimkou, ₧e mφsto hodnoty zapisovanΘ do pole typu "password" jsou vypisovßny hv∞zdiΦky. Je vÜak nutnΘ upozornit na to, ₧e tento zp∙sob zadßvßnφ hesla nenφ nejbezpeΦn∞jÜφ a nenφ velk²m problΘmem toto heslo odhalit.

  • <INPUT TYPE="checkbox">

    • PolφΦko typu "checkbox" je zobrazeno bu∩ v podob∞ malΘho ΦtvereΦku, kter² lze zak°φ₧kovat, nebo tlaΦφtka, kterΘ lze vypnout nebo zapnout. Na rozdφl od textov²ch polφ, jejich₧ obsah je posφlßn na server i v p°φpad∞, ₧e jejich obsah je prßzdn², je nßzev checkboxu sd∞len serveru pouze v p°φpad∞, kdy₧ je aktivnφ. Hodnota aktivnφho checkboxu je stanovena na zßklad∞ atributu VALUE, kter² standardn∞ p°echßzφ do stavu "on".


    <FORM>
    <INPUT TYPE="checkbox" NAME="MAJ"> Vlastnφm televizor
    </FORM>

    Vytvo°φ zaÜkrtßvacφ polφΦko, kterΘ po zak°φ₧kovßnφ odeÜle na server hodnotu:
    MAJ="on"


    Nebo p°i definovßnφ:

    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="BTV"> Vlastnφm barevn² televizor

    Na server vracφ:

    MAJ="BTV"



    Atribut VALUE umo₧≥uje zabrßnit kolizφm v p°φpadech, kdy je stejn²m jmΘnem oznaΦeno n∞kolik checkbox∙. V t∞chto p°φpadech je nutnΘ atributu VALUE p°i°adit r∙znΘ hodnoty.


    P°φklad:

    <FORM>
    Vlastnφm:<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV"> Televizor<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> VideorekordΘr<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
    </FORM>

    Zobrazenφ:

    Vlastnφm:
    Televizor
    VideorekordΘr
    Hi-Fi soupravu


    Nap°φklad po zaÜkrtnutφ skupin televizoru a videorekordΘru se odeÜle na server:

    MAJ="TV"&MAJ="VR"



    Pomocφ atributu CHECKED je mo₧nΘ oznaΦit n∞kolik polφΦek, kterΘ ji₧ budou v nabφdnutΘm formulß°i zaÜkrtnuty. U₧ivatel mß samoz°ejm∞ mo₧nost toto zaÜkrtnutφ zruÜit.


    P°φklad:

    <FORM>
    Vlastnφm:<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> VideorekordΘr<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
    </FORM>

    Zobrazenφ:

    Vlastnφm:
    Televizor
    VideorekordΘr
    Hi-Fi soupravu


  • <INPUT TYPE="radio">

    • TlaΦφtka typu "radio" se chovajφ obdobn∞ jako checkboxy. VyznaΦujφ se kruhov²m zaÜkrtßvacφm polφΦkem a v danΘm okam₧iku je mo₧nΘ mφt zaÜkrtnuto maximßln∞ jedno polφΦko. T∞mto tlaΦφtk∙m musφ b²t hodnota VALUE zadßna povinn∞. I v tomto p°φpad∞ je mo₧nΘ nastavit p°edvolbu pomocφ atributu CHECKED. Pokud bude tato p°edvolba pou₧ita u vφce prvk∙, bude pou₧it jako aktivnφ poslednφ z nich.


    P°φklad radiobutton∙:

    <FORM>
    Vlastnφm televizor<BR>
    <INPUT TYPE="radio" NAME="TV" VALUE="B" CHECKED> barevn²
    <INPUT TYPE="radio" NAME="TV" VALUE="C" > Φernobφl²
    </FORM>

    V²sledek:

    Vlastnφm televizor
    barevn² Φernobφl²

  • <INPUT TYPE="reset">

    • Atribut TYPE="reset" je znaΦkou INPUT zobrazen jako obyΦejnΘ tlaΦφtko, kterΘ mß vÜak specißlnφ funkci. Stisknutφm tohoto tlaΦφtka dojde k p°enastavenφ vÜech ·daj∙ ve formulß°i na poΦßteΦnφ nastavenφ. Standardnφ nßpis "Reset" lze zm∞nit nastavenφm atributu VALUE.

  • <INPUT TYPE="submit">

    • TakΘ funkce typu "submit" je zpracovßna stejn²m zp∙sobem jako typ "reset". AvÜak stisknutφm tohoto tlaΦφtka dojde k odeslßnφ zaÜkrtnut²ch hodnot na server k dalÜφmu zpracovßnφ. I u tΘto funkce je mo₧nΘ p°enastavit standardnφ nßpis "Submit Query" pomocφ atributu VALUE.

    <TEXTAREA> ... </TEXTAREA>
    Nßv∞Ütφ TEXTAREA umo₧≥uje ve formulß°i zadat vφce°ßdkov² text. èφ°ku okna (udanou poΦtem znak∙) a v²Üku okna je mo₧nΘ nastavit atributy COLS a ROWS. T∞mito atributy vÜak nenφ dΘlka textu omezena, nebo¥ v okn∞ je mo₧nΘ listovat. Text mezi poΦßteΦnφm a koncov²m nßv∞Ütφm TEXTAREA bude zapsßn v okn∞ jako p°edvolba.


    P°φklad p°φkazu TEXTAREA:

    <FORM>
    <CENTER>
    <TEXTAREA NAME="text" ROWS=5 COLS=40> P°edurΦenß hodnota</TEXTAREA>
    </CENTER>
    </FORM>

    V²slednΘ zobrazenφ:



    <TEXTAREA name="jmΘno_pole" rows="poΦet_°ßdk∙" cols="poΦet_sloupc∙" wrap=[off | virtual | physical] align=[top | middle | bottom | left | right] disabled error="chybovΘ_hlßÜenφ"
    ...text...
    </TEXTAREA>
    pßrovß znaΦka slou₧φcφ k definici vφce°ßdkovΘho vstupnφho pole formulß°e; smφ se vyskytnout pouze v prvku FORM a nesmφ b²t vno°ovßna; text ulo₧en² mezi poΦßteΦnφ a koncovou znaΦku je vlo₧en do pole jako p°edvolba
    name symbolickΘ jmΘno odesφlanΘ serveru
    rows poΦet °ßdk∙ pole (v poΦtu znak∙)
    cols poΦet sloupc∙ pole (v poΦtu znak∙)
    wrap zalamovßnφ textu uvnit° pole
    off data jsou odesφlßna p°esn∞ jak jsou zapisovßna (implicitnφ hodnota)
    virtual text je v poli zalamovßn, ale data jsou odesφlßna p°esn∞ jak byla zapsßna
    physical text je v poli zalamovßn a v bod∞ zlomu je odesφlßn nov² °ßdek
    align ovliv≥uje umφst∞nφ objektu v∙Φi okolφ
    top hornφ okraj objektu bude zarovnßn s hornφm okrajem °ßdku
    middle st°ed objektu bude zarovnßn na ·Φa°φ °ßdku
    bottom dolnφ okraj objektu bude zarovnßn se spodnφm okrajem °ßdku
    left vodorovnΘ umφst∞nφ objektu na lev² okraj
    right vodorovnΘ umφst∞nφ objetu na prav² okraj
    disabled zobrazenφ pole bez mo₧nosti jeho modifikace
    error hlßÜenφ pro p°φpad neplatnΘ hodnoty pole

    <SELECT>
    Funkce SELECT umo₧≥uje v²b∞r ze seznamu nabφzen²ch mo₧nostφ, kterΘ jsou v₧dy v rßmci kontejneru <SELECT> uvozeny nßv∞Ütφm <OPTION>.


    P°φklad na prvek <SELECT>

    <FORM>
    <SELECT NAME="volby" SIZE=3>
    <OPTION VALUE=1>hodnota 1</OPTION>
    <OPTION VALUE=2>hodnota 2</OPTION>
    <OPTION VALUE=3>hodnota 3</OPTION>
    <OPTION VALUE=4>hodnota 4</OPTION>
    <OPTION VALUE=5>hodnota 5</OPTION>
    </SELECT>
    </FORM>

    Bude zobrazeno:


    <SELECT name="jmΘno_pole" size=poΦet_zobrazen²ch multiple src="url_grafiky" width=Üφ°ka_grafiky height=v²Üka_grafiky units=jednotka align=[top | middle | bottom | left | right] disabled error="chybovΘ_hlßÜenφ"
    <OPTION> ...
    ...
    </SELECT>
    pßrovß znaΦka slou₧φcφ k v²b∞ru z nabφdky definovanΘ prvky <OPTION> uvnit° kontejneru <SELECT>
    name symbolickΘ jmΘno odesφlanΘ serveru
    size urΦuje poΦet zobrazen²ch polo₧ek p°i inicializaci formulß°e; pokud je poΦet polo₧ek v∞tÜφ ne₧ Φφslo uvedenΘ u size dochßzφ k jejich rolovßnφ
    multiple mo₧nost v²b∞ru vφce polo₧ek souΦasn∞ (implicitn∞ 1)
    src absolutnφ/relativnφ URL grafiky zobrazovanΘ pro tuto nabφdku mφsto OPTION text∙ identifikovan²ch na grafice jako "hotspot"
    width po₧adovanß Üφ°ka grafiky
    height po₧adovanß v²Üka grafiky
    units jednotka pro zadßnφ rozm∞r∙ grafiky (implicitn∞ pixely)
    align ovliv≥uje umφst∞nφ objektu v∙Φi okolφ
    top hornφ okraj objektu bude zarovnßn s hornφm okrajem °ßdku
    middle st°ed objektu bude zarovnßn na ·Φa°φ °ßdku
    bottom dolnφ okraj objektu bude zarovnßn se spodnφm okrajem °ßdku
    left vodorovnΘ umφst∞nφ objektu na lev² okraj
    right vodorovnΘ umφst∞nφ objetu na prav² okraj
    disabled zobrazenφ pole bez mo₧nosti jeho modifikace
    error hlßÜenφ pro p°φpad neplatnΘ hodnoty pole

    <OPTION selected value="odesφlanß_hodnota" shape="tvar_hotspot" disabled error="chybovΘ_hlßÜenφ" >
    ...identifikace volby...
    </OPTION>
    pßrovß znaΦka identifikujφcφ volbu uvnit° kontejneru <SELECT>
    selected poΦßteΦnφ vybranß volba
    value urΦenφ odesφlanΘ hodnoty pro tuto volbu; nenφ-li atribut uveden, odesφlß se obsah volby
    shape tvar "hotspotu" na grafickΘm objektu definovanΘm atributem src; navrhovanΘ hodnoty jsou: "default", "circle x,y,z", "rect x,y,w,h", "polygon x1,y1,x2,y2,..."
    disabled zobrazenφ hodnoty bez mo₧nosti jejφ volby
    error hlßÜenφ pro p°φpad neplatnΘ volby


    Standardnφ tlaΦφtka

    Pomocφ formulß°ov²ch funkcφ lze do dokumentu zabudovat takΘ standardnφ tlaΦφtka slou₧φcφ jako hyperlinky. Vysv∞tlenφ podß nßsledujφcφ p°φklad.


    <FORM ACTION="help.htm">
    <INPUT TYPE="submit" VALUE="Help">
    </FORM>

    Toto tlaΦφtko umo₧≥uje vyvolßnφ dokumentu help.htm, kter² je ulo₧en v aktußlnφm adresß°i:




    CELA OBRAZOVKA ZPET NA OBSAH