Vytváření webových formulářů

V zobrazení Návrh jsou formuláře označené červeným tečkovaným obrysem. Pokud tento obrys nevidíte, vyberte volbu Zobrazení > Vizuální pomůcky > Neviditelné elementy.

v inspektoru Vlastnosti (Okna > Vlastnosti) nastavte vlastnosti formuláře HTML:

a. V okně dokumentu klepněte na obrys formuláře, abyste formulář vybrali.

b. Do pole Název formuláře zadejte jednoznačný název označující formulář.

Pojmenování formuláře umožní odkazovat na formulář nebo ho ovládat skriptovacím jazykem, jako je například JavaScript nebo VBScript. Pokud formulář nepojmenujete, aplikace Dreamweaver vytvoří název pomocí syntaxe formn a zvýší hodnotu n pro každý formulář přidaný na stránku.

c. V poli Akce určete stránku nebo skript, který bude zpracovávat data formuláře tak, že napíšete cestu nebo klepnete na ikonu složky a přejdete na příslušnou stránku nebo skript. Například: processorder.php.

d. V rozbalovací nabídce Metoda určete metodu, která přenese data formuláře na server.

Nastavte libovolné z následujících voleb:

Výchozí K poslání dat formuláře na server se použije výchozí nastavení prohlížeče. Obvykle je výchozí hodnotou metoda GET.

GET Připojí hodnotu k adrese URL, která vytváří požadavek pro stránku.

POST Vloží data formuláře do požadavku HTTP.

Metodu GET nepoužívejte k posílání dlouhých formulářů. Adresy URL jsou omezené na 8192 znaků. Pokud je množství poslaných dat příliš velké, data se zkrátí a povede to k neočekávaným nebo k chybným výsledkům zpracování.

Dynamické stránky vytvořené pomocí parametrů předaných metodou GET mohou být označené záložkami, protože všechny hodnoty potřebné k obnovení stránky jsou obsažené v adrese URL zobrazené v poli Adresa v prohlížeči. Naopak dynamické stránky vytvořené pomocí parametrů předaných metodou POST nemohou být označeny záložkami.

Pokud shromažďujete důvěrná uživatelská jména a hesla, čísla kreditních karet nebo jiné důvěrné informace, metoda POST se může zdát bezpečnější než metoda GET. Ale informace posílané metodou POST nejsou šifrované a hacker je může snadno přečíst. Abyste data zabezpečili, použijte bezpečné připojení k bezpečnému serveru.

e. (Volitelně) V rozbalovací nabídce Typ šifrování určete typ šifrování MIME dat odeslaných serveru ke zpracování.

Výchozí nastavení application/x-www-form-urlencode se obvykle používá ve spojení s metodou POST. Pokud vytváříte pole pro odeslání souboru, určete typ MIME multipart/form‑data.

f. (Volitelně) V rozbalovací nabídce Cíl určete okno, ve kterém se mají zobrazit data vrácená vyvolaným programem.

Pokud pojmenované okno ještě není otevřené, otevře se nové okno s tímto názvem. Nastavte libovolnou z následujících hodnot cíle:

_blank Otevře cílový dokument v novém nepojmenovaném okně.

_parent Otevře cílový dokument v rodičovském okně okna zobrazujícího aktuální dokument.

_self Otevře cílový dokument ve stejném okně jako je okno, ze kterého byl formulář odeslaný.

_top Otevře cílový dokument v základním prostoru aktuálního okna. Tato hodnota se může použít, aby se zajistilo, že cílový dokument převezme celé okno, i když původní dokument byl zobrazený v rámci.

Vložte objekty formuláře na stránku:

a. Umístěte textový kurzor tam, kde by se měl objekt formuláře ve formuláři zobrazit.

b. Vyberte objekt v nabídce Vložit > Formulář nebo v kategorii Formuláře na panelu Vložit.

c. Vyplňte dialogové okno Atributy tagu pro usnadnění přístupu. Více informací získáte kliknutím na tlačítko Nápověda v dialogovém okně.

d. Nastavte vlastnosti objektů.

e. v inspektoru Vlastnosti zadejte název objektu.

Každé textové pole, skryté pole, zaškrtávací pole a objekt seznamu/nabídky musí mít jedinečný název, které objekt ve formuláři identifikuje. Názvy objektů formuláře nemohou obsahovat mezery ani speciální znaky. Můžete použít jakoukoliv kombinaci alfanumerických znaků a podtržítko (_). Popis, který přiřadíte k objektu, je název proměnné, ve které se uloží hodnota (zadaná data) pole. To je hodnota poslaná na server ke zpracování.

f. Abyste na stránce označili objekt textového pole, zaškrtávacího pole nebo přepínacího tlačítka, klepněte vedle objektu a zadejte popis.

Chcete-li formátovat formuláře, použijte zalomení řádků, zalomení odstavců, předformátovaný text nebo tabulky. Nemůžete vložit formulář do jiného formuláře (to znamená, že se tagy nemohou překrývat), ale do stránky můžete zahrnout více než jeden formulář.

Při návrhu formulářů nezapomeňte označit pole formuláře popisným textem, abyste uživatelům umožnili zjistit, na co mají odpovídat – například „Zadejte vaše jméno“ pro požadavek na informace o jméně.

Použijte tabulky, abyste zadali strukturu pro objekty formuláře a popisy polí. Při použití tabulek ve formulářích zkontrolujte, že jsou všechny tagy tabulky table zahrnuty mezi tagy formuláře form.

Určuje název objektu pole pro soubor.

Určuje maximální počet znaků, které mohou být v poli zobrazené.

Určuje maximální počet znaků, které pole může obsahovat. Pokud uživatel najde soubor procházením, název souboru a cesta mohou přesáhnout hodnotu určenou v poli Max. počet znaků. Pokud se ale uživatel pokusí zadat název souboru a cestu, pole pro soubor povolí pouze počet znaků určený hodnotou Max. počet znaků.

Zobrazí se dialogové okno Vybrat zdroj obrazu.

Přiřadí tlačítku název. Dva vyhrazené názvy, Odeslat a Vymazat, sdělují formuláři, aby odeslal data formuláře do aplikace nebo skriptu pro zpracování nebo aby vymazal pole formuláře na jejich původní hodnoty.

Určuje obraz, který chcete pro tlačítko použít.

Umožňuje zadat popisný text pro případ, že se v prohlížeči nepodaří načíst obraz.

Nastaví atribut zarovnání objektu.

Spustí výchozí editor obrazu a otevře soubor obrázku pro úpravy.

Umožňuje na objekt aplikovat pravidla CSS.

Vyberte volbu Vložit > Formulář > Skupina přepínacích tlačítek.

Vyplňte dialogové okno a klikněte na tlačítko OK.

a. Do pole Název zadejte název skupiny přepínacích tlačítek.

 Pokud nastavíte přepínací tlačítka, aby předala parametry zpět serveru, parametry budou spojené s názvem. Pokud například pojmenujete skupinu mojeSkupina a nastavíte metodu formuláře GET (to znamená, že chcete, aby formulář předal parametry URL místo parametrů formuláře, když uživatel klepne na tlačítko odeslání), výraz mojeSkupina="ZaškrtnutáHodnota" bude předán na server v URL.

b. Klepněte na tlačítko plus (+), abyste do skupiny přidali přepínací tlačítko. Zadejte popis a zaškrtnutou hodnotu pro nové tlačítko.

c. Klepněte na šipku nahoru nebo dolů, abyste tlačítka uspořádali.

d. Chcete-li nastavit, že při otevření stránky v prohlížeči bude vybrané určité přepínací tlačítko, zadejte hodnotu stejnou jako je hodnota přepínacího tlačítka v poli Vybrat hodnotu rovnající se.

Zadejte statickou hodnotu nebo určete dynamickou hodnotu klepnutím na ikonu s bleskem vedle pole a vyberte sadu záznamů, která obsahuje možné zaškrtnuté hodnoty. V obou případech by hodnota, kterou určíte, měla souhlasit se zaškrtnutou hodnotou jednoho z přepínacích tlačítek ve skupině. Abyste zobrazili zaškrtnuté hodnoty přepínacích tlačítek, vyberte každé přepínací tlačítko a otevřete inspektor Vlastnosti (Okna > Vlastnosti).

e. Vyberte formát, který chcete použít pro rozvržení tlačítek v aplikaci Dreamweaver. Nastavte rozvržení tlačítek pomocí zalomení řádků nebo pomocí tabulky. Pokud vyberete volbu tabulky, aplikace Dreamweaver vytvoří tabulku s jedním sloupcem a umístí přepínací tlačítka nalevo a popisy napravo.

Také můžete nastavit vlastnosti v inspektoru Vlastnosti nebo přímo v zobrazení Kód.

Vyberte volbu Vložit > Formulář > Skupina zaškrtávacích polí.

Vyplňte dialogové okno a klikněte na tlačítko OK.

a. Do pole Název zadejte název skupiny zaškrtávacích polí.

Pokud nastavíte zaškrtávací pole, aby předala parametry zpět serveru, parametry budou spojené s názvem. Pokud například pojmenujete skupinu mojeSkupina a nastavíte metodu formuláře GET (to znamená, že chcete, aby formulář předal parametry URL místo parametrů formuláře, když uživatel klepne na tlačítko odeslání), výraz mojeSkupina="ZaškrtnutáHodnota" bude předán na server v URL.

b. Klepnutím na tlačítko plus (+) přidáte do skupiny zaškrtávací pole. Zadejte popis a zaškrtnutou hodnotu pro nové zaškrtávací pole.

c. Klepnutím na šipku nahoru nebo dolů změníte uspořádání zaškrtávacích polí.

d. Chcete-li nastavit, aby se při otevření stránky v prohlížeči vybralo určité zaškrtávací pole, zadejte hodnotu odpovídající hodnotě zaškrtávacího pole do pole Vybrat hodnotu rovnající se.

Zadejte statickou hodnotu nebo určete dynamickou hodnotu klepnutím na ikonu s bleskem vedle pole a vyberte sadu záznamů, která obsahuje možné zaškrtnuté hodnoty. V obou případech by hodnota, kterou určíte, měla souhlasit se zaškrtnutou hodnotou jednoho ze zaškrtávacích polí ve skupině. Abyste zobrazili zaškrtnuté hodnoty zaškrtávacích polí, vyberte každé zaškrtávací pole a otevřete inspektor Vlastnosti (Okna > Vlastnosti).

e. Vyberte formát, která chcete použít pro rozvržení zaškrtávacích polí v aplikaci Dreamweaver.

Nastavte rozvržení zaškrtávacích polí pomocí zalomení řádků nebo pomocí tabulky. Pokud vyberete volbu tabulky, aplikace Dreamweaver vytvoří tabulku s jedním sloupcem a umístí zaškrtávací pole nalevo a popisy napravo.

Také můžete nastavit vlastnosti v inspektoru Vlastnosti nebo přímo v zobrazení Kód.

Vložte objekt seznamu/nabídky formuláře HTML do stránky:

    a. Klepněte na stránce do formuláře HTML (Vložit > Formulář > Formulář).

    b. Vyberte volbu Vložit > Formulář > Seznam/nabídka, abyste vložili objekt formuláře.

Proveďte jeden z následujících úkonů:

• Vyberte nový nebo existující objekt seznamu/nabídky formuláře HTML a pak klepněte na tlačítko Dynamické v inspektoru Vlastnosti.

• Vyberte volbu Vložit > Objekty dat > Dynamická data > Dynamický seznam pro výběr.

Vyplňte dialogové okno Dynamický seznam/nabídka a klepněte na tlačítko OK.

  a. V rozbalovací nabídce Volby ze sady záznamů vyberte sadu záznamů, kterou chcete použít jako zdroj obsahu. Tuto nabídku také později použijete k úpravám položek statického i dynamického seznamu/nabídky.

  b. V oblasti Statické volby zadejte výchozí položku v seznamu nebo nabídce. Tuto volbu také použijete k úpravám statických položek v objektu seznamu/nabídky formuláře po přidání dynamického obsahu.

  c. (Volitelně) Pomocí tlačítek plus (+) a minus (-) přidejte nebo odstraňte položky ze seznamu. Položky jsou ve stejném pořadí jako v dialogovém okně Počáteční hodnoty seznamu. První položka v seznamu je při načtení stránky v prohlížeči vybraná. Použijte tlačítka se šipkou nahoru a dolů, abyste uspořádali položky v seznamu.

  d. V rozbalovací nabídce Hodnoty vyberte pole obsahující hodnoty položek nabídky.

  e. V rozbalovací nabídce Popisy vyberte pole obsahující popisy položek nabídky.

  f. (Volitelně) Abyste určili, že při otevření stránky v prohlížeči nebo při zobrazení záznamu ve formuláři bude vybraná konkrétní položka nabídky, zadejte hodnotu rovnající se hodnotě položky nabídky v poli Vybrat hodnotu rovnající se.

    Můžete zadat statickou hodnotu nebo můžete určit dynamickou hodnotu kliknutím na ikonu s bleskem vedle pole a vybrat dynamickou hodnotu ze seznamu zdrojů dat. V obou případech by hodnota, kterou určíte, měla souhlasit s jednou z hodnot položek nabídky.

Zdroj dat by měl obsahovat textové informace. Pokud se v seznamu nezobrazí žádné zdroje dat nebo pokud zdroje dat, které jsou k dispozici, nesplňují vaše požadavky, klepněte na tlačítko plus (+), a definujte nový zdroj dat.

• Klepněte na ikonu s bleskem vedle pole Zaškrtnout, když a vyberte pole ze seznamu zdrojů dat.

  Zdroj dat musí obsahovat boolovská data jako například Ano a Ne nebo true a false. Pokud se v seznamu nezobrazí žádné zdroje dat nebo pokud zdroje dat, které jsou k dispozici, nesplňují vaše požadavky, klepněte na tlačítko plus (+), a definujte nový zdroj dat.

• V poli Rovná se zadejte hodnotu, kterou pole musí mít, aby se zaškrtávací pole zobrazilo jako vybrané.

  Aby se například zobrazilo zaškrtávací pole jako vybrané, když má určité pole v záznamu hodnotu Ano, zadejte Ano do pole Rovná se.

Pole Hodnota přepínacího tlačítka zobrazuje hodnoty všech přepínacích tlačítek ve skupině.

Sada záznamů, kterou vyberete, obsahuje hodnoty, které souhlasí se zaškrtnutými hodnotami tlačítek. Abyste zobrazili zaškrtnuté hodnoty přepínacích tlačítek, vyberte každé přepínací tlačítko a otevřete inspektor Vlastnosti (Okna > Vlastnosti).

Vyplňte dialogové okno Dynamická data a klepněte na tlačítko OK.

  a. Ze seznamu zdrojů dat vyberte zdroj dat.

  b. (Volitelně) Vyberte formát dat pro text.

  c. (Volitelně) Upravte kód, který aplikace Dreamweaver vloží do stránky, aby se zobrazil dynamický text.

Zkontrolujte, že každé textové pole, které chcete ověřit, má jedinečný název.

Můžete například určit, že textové pole pro věk osoby akceptuje pouze čísla.

Můžete například zadat název funkce, která ještě neexistuje, například zpracovatMujFormular().

Mohli byste například definovat následující funkci jazyka JavaScript v sekci head dokumentu, aby se zobrazila zpráva, když uživatel klepne na tlačítko Odeslat:

Tento krok se provádí pouze jednou.

Zobrazí se dialogové okno Atributy tagu pro usnadnění přístupu.

Přiřadí poli formuláře identifikátor. Tato hodnota se může použít jako odkaz na pole z jazyka JavaScript; také se používá jako hodnota pro atribut for, pokud zvolíte volbu Připojit tag popisu s použitím for pod volbami Styl.

Uzavře tag popisu okolo položky formuláře následujícím způsobem:

Použije atribut for pro uzavření tagu popisu okolo položky formuláře následujícím způsobem:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Tato volba způsobí, že prohlížeč vykreslí text připojený k zaškrtávacímu poli a přepínací tlačítko s rámečkem kolem aktivního pole a povolí uživateli vybrat zaškrtávací pole a přepínací tlačítko kliknutím kdekoliv v připojeném textu místo klepnutí pouze na ovladač zaškrtávacího pole nebo přepínacího tlačítka.

Poznámka: To je preferovaná volba pro usnadnění přístupu; ale funkčnost se může lišit v závislosti na prohlížeči.

Nepoužije tag popisu následujícím způsobem:

K výběru objektu formuláře v prohlížeči použije klávesový ekvivalent (jedno písmeno) a klávesu Alt (Windows) nebo klávesu Ctrl (Macintosh). Pokud například jako přístupovou klávesu zadáte B, uživatelé prohlížeče v systému Macintosh by mohli zadat Ctrl+B, aby vybrali tento objekt formuláře.

Určuje pořadí procházení polí pomocí tabulátoru pro objekty formuláře. Pokud nastavíte pořadí procházení pro jeden objekt, musíte nastavit pořadí procházení polí pomocí tabulátoru pro všechny objekty.

Nastavení pořadí procházení pomocí tabulátoru je užitečné, když máte na stránce další odkazy a objekty formuláře a potřebujete, aby jimi uživatel procházel v určitém pořadí.

Objekt formuláře se zobrazí v dokumentu.

• Upravte příslušné atributy v zobrazení Kód.

• Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) a pak vyberte volbu Upravit tag.