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 Zobrazit > Vizuální pomůcky > Neviditelné prvky.

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.

K formátování formulářů použijte konce řádků, konce odstavců, předformátovaný text nebo tabulky.Formulář nelze vložit do jiného formuláře (to znamená, že značky se nemohou překrývat), ale na stránku můžete zahrnout více než jeden formulář.

Při navrhování formulářů nezapomeňte označit pole formuláře popisným textem, aby uživatelé věděli, na co odpovídají – například „Napište své jméno" pro vyžádání informací o jméně.

K poskytnutí struktury pro objekty formuláře a popisky polí použijte tabulky.Při použití tabulek ve formulářích se ujistěte, že všechny značky table jsou uvedeny mezi značkami form.

Určuje název objektu pole pro soubor.

Určuje maximální počet znaků, které lze zobrazit v poli.

Určuje maximální počet znaků, které pole pojme. Pokud uživatel procházením vyhledá soubor, název souboru a cesta mohou překročit zadanou hodnotu Max Chars. Pokud se však uživatel pokusí název souboru a cestu napsat, pole souboru povolí pouze počet znaků určený hodnotou Max Chars.

Zobrazí se dialogové okno Vybrat zdroj obrazu.

Přiřadí tlačítku název. Dva vyhrazené názvy, Submit a Reset, říkají formuláři, aby odeslal data formuláře do zpracovávající aplikace nebo skriptu, nebo aby obnovil všechna 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 obrázek nepodaří načíst v prohlížeči.

Nastaví atribut zarovnání objektu.

Spustí váš výchozí editor obrázků 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, ve kterém má Dreamweaver rozložit tlačítka. 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 dostupné zdroje dat nesplňují vaše potřeby, klikněte na tlačítko Plus (+) pro definování nového zdroje dat.

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

  Zdroj dat musí obsahovat booleovská 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é odpovídají zaškrtnutým hodnotám přepínačů. Chcete-li zobrazit zaškrtnuté hodnoty přepínačů, vyberte každý přepínač a otevřete jeho Inspektor vlastností (Okno > 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.

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

Například můžete určit, že textové pole pro věk osoby přijímá pouze čísla.

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

Můžete například definovat následující funkci JavaScript v sekci head dokumentu pro zobrazení zprávy, když uživatel klikne na tlačítko Odeslat:

function processMyForm(){

alert('Děkujeme za vaši objednávku!');

}

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: Toto je upřednostňovaná možnost pro přístupnost, funkčnost se však může lišit v závislosti na prohlížeči.

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

Používá ekvivalent klávesnice (jedno písmeno) a klávesu Alt (Windows) nebo klávesu Control (Macintosh) k výběru objektu formuláře v prohlížeči. Pokud například zadáte B jako přístupovou klávesu, uživatelé s prohlížečem Macintosh mohou stisknout klávesu Control+B k výběru objektu formuláře.

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

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

Objekt formuláře se zobrazí v dokumentu.

• Upravte příslušné atributy v režimu kódu.

• Klikněte pravým tlačítkem myši (Windows) nebo stiskněte klávesu Control a klikněte (Macintosh) a pak vyberte možnost Upravit značku.