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 index.htm, který je uložen na serveru firmy OKNETojmo, kde najdete podrobný popis jazyka HTML: