Jazyk HTML obsahuje prvky, pomocí nichž lze vytvářet interaktivní formuláře. Interaktivní formuláře slouží pro získání informací, které jsou odesílány na server. Informace se předají CGI-skriptu, který je vyhodnotí. Formulář má proto ve skutečnosti dvě složky: viditelnou část v HTML stránce a neviditelnou část na serveru (CGI-skript).
| vymezení <FORM> |
<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, která vymezuje formulář; obsahem prvku FORM jsou vstupní pole, jejichž prostřednictvím uživatel zadává své požadavky; kromě vstupních polí se mohou uvnitř formuláře vyskytovat běžné HTML konstrukce; formuláře nelze vnořovat | ||
| action= | lokátor CGI skriptu, který zpracuje data, odeslaná prostřednictvím formuláře | |
| method= | způsob odeslání dat: | |
| get | doplnění na konec aktivního URL (implicitní) | |
| post | v těle požadavku | |
| enctype= | způsob zakódování dat (implicitně aplication/x-www-form-urlencoded) | |
| script= | lokátor jednoúčelového CGI skriptu, který prohlížecí program zavede za účelem předspracování výstupů formuláře před jejich odesláním na cíl specifikovaný atributem action (v návrhu) | |
| 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 | |
| prvky formuláře: | ||
| vstupní pole <INPUT> |
<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” maxlenght=max_znaků align=[top|middle|bittom|left|right] accept=”souborový_typ” disabled error=”chybové_hlášení”> | |
| nepárová značka, která slouží k definici jednoho jednoduchého vstupního pole formuláře; formulůř zpravidla bude obsahovat řadu INPUT prvků různého provedení | ||
| type= | druh vstupního pole: | |
| text | jednořádkové textové pole (implicitní typ); atributem value lze zadat počáteční hodnotu pole | |
| password | jako text, ale není zobrazována uživatelem vpisovaná hodnota | |
| checkbox | zaškrtávací políčko; atributem value lze specifikovat hodnotu vrácenou při zaškrtnutí tohoto políčka | |
| radio | volba právě jedné možnosti; atributem value lze specifikovat vrácenou pro tuto volbu | |
| submit | tlačítko pokyn k odeslání dat serveru; atributem value lze specifikovat popis tlačítka | |
| reset | tlačítko pokyn k obnovení implicitních hodnot; atributem value lze specifikovat popis tlačítka | |
| hidden | skryté tlačítko; 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 poklepání | |
| 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 anctype=”multipart/form-data” method=post | |
| range | číselný interval (přeskrtávací 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 IMPUT 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, scrobble, jot | |
| size= | počet_znaků\počet_znaků, počet_řádků; fyzický rozměr pole typu text\password ve znacích nebo ve znacích, řádcích | |
| 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 řádku (levý okraj objektu na levý okraj řádku) | |
| right | vodorovné umístění objektu na pravý okraj řádku (pravý okraj objektu na pravý okraj řádku) | |
| 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 pole | |
| textové pole <TEXTAREA> |
<TEXTAREA name=”jméno_pole” rows=”počet_řádků” cols=”počet_sloupců” wrap=[off|virtual|psysical] align=[top|middle|bottom|left|right] disabled error=”chybové_hlášení”> ...text... </TEXTAREA> | |
| párová značka, která slouží 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 uzavřený mezi počáteční a koncovou značkou je počátečním zobrazeným obsahem pole; implicitně vrácená hodnota je prázdná hodnota; přípustný je pouze ASCII text, nové řádky jsou respektovány | ||
| nam= | symbolické jméno pole odesílané serveru | |
| rows= | fyzický počet řádků pole (v počtu znaků na výšku) | |
| cols= | fyzický počet sloupců pole (v počtu znaků na šířku) | |
| 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 jsou zapisová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 řádku (levý okraj objektu na levý okraj řádku) | |
| right | vodorovné umístění objektu na pravý okraj řádku (pravý okraj objektu na pravý okraj řádku) | |
| disabled | zobrazení pole bez možnosti jeho modifikace | |
| error= | hlášení pro případ neplatné hodnoty pole | |
| výběrové pole (rozbalovací nabídka) <SELECT> |
<SELECT name=”jméno_pole” size=výška_vlajky multiple src=”url_grafiky” width=šířka_grafiky heigth=výška_grafiky units=jednotka align=[top|middle|bottom|left|right] disabled error=”chybové_hlášení”> <OPTION>... . . </SELECT> | |
| párová značka, která slouží ke specifikaci nabídky s řadou volitelných vstupů identifikovaných prvkem OPTION; uvnitř prvku SELECT se předpokládá nejméně jeden prvek OPTION; značku nelze vnořovat | ||
| name= | symbolické jméno pole odesílané serveru | |
| size= | určuje počet fyzicky viditelných voleb v okamžiku zobrazení formuláře; size=1 ukazuje pouze jednu | |
| 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 “hospot” | |
| width= | požadovaná šířka grafiky | |
| heigth= | požadovaná výška grafiky | |
| units= | jednotka pro zadání rozměrů grafiky (implicitně pixely, (viz. Dodatky)) | |
| 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 řádku (levý okraj objektu na levý okraj řádku) | |
| right | vodorovné umístění objektu na pravý okraj řádku (pravý okraj objektu na pravý okraj řádku) | |
| disabled | zobrazení nabídky bez možnosti výběru | |
| error= | hlášení pro případ neplatného výběru | |
| identifikace volby ve výběrovém poli <OPTION> |
<OPTION selected value=”odesílaná_hodnota” shape=”tvar_hotspot” disabled error=”chybové_hlášení”> ... identifikace_volby ... </OPTION> | |
| párová značka, která identifikuje volbu uvnitř prvku SELECT; značka se smí vyskytovat pouze uvnitř prvku SELECT a nelze ji vnořovat; koncová značka </OPTION> není povinná | ||
| 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,r”, “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 | |
Příklady základních typů polí, včetně zdrojového kódu ukazuje tabulka na následující stránce.
| Prvek formuláře | Zdrojový text prvku |
| návěští: | návěští: <INPUT name=”pole” type=text size=2> |
| poloha 0 | <INPUT name=”poloha” type=radio value="0"> poloha 0 <BR> |
| poloha 1 | <INPUT name=”poloha” type=radio value="1" checked> poloha 1 <BR> |
| poloha 2 | <INPUT name=”poloha” type=radio value="0"> poloha 2 <BR> |
| poloha 3 | <INPUT name=”poloha” type=radio value="0"> poloha 3 <BR> |
| možnost 0 | <INPUT name=”moznosti” type=checkbox value="0"> možnost 0 <BR> |
| možnost 1 | <INPUT name=”moznosti” type=checkbox value="0"> možnost 1 <BR> |
| možnost 2 | <INPUT name=”moznosti” type=checkbox value="0"checked> možnost 2 <BR> |
| možnost 3 | <INPUT name=”moznosti” type=checkbox value="0"checked> možnost 3 <BR> |
| možnost 4 | <INPUT name=”moznosti” type=checkbox value="0"> možnost 4 <BR> |
| <INPUT name="ok" type=submit value="Odeslat"> | |
| <INPUT name="no" type=reset value="Vymazat"> | |
| <INPUT name="soubor" type=file value="D:\FORM.HTM"> | |
| <SELECT name="volby" size=5> <OPTION value=1> hodnota 1 <OPTION value=2> hodnota 2 <OPTION value=3> hodnota 3 <OPTION value=4> hodnota 4 <OPTION value=5> hodnota 5 </SELECT> | |
| <SELECT name=”vyber” size=1> <OPTION value=1> něco </SELECT> |