Formuláře jsou definovány pomocí prvku form. Všechny prvky uvnitř form patří do tohoto konkrétního formuláře.
<form> … </form>
V úvodním <form> se očekává atribut action. Tím se nakonec určuje, co se stane s údaji z formuláře. Obvykle se jedná o aplikaci v PHP.
<form method="post" action="form.php"> … </form>
Dbejte na to, aby uvedený soubor byl skutečně nalezen. Musíte tedy nastavit správnou cestu.
Místo skriptu můžete také uvést e-mailovou adresu.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
V tomto případě jsou údaje z formuláře odesílány e-mailem. To však není příliš elegantní, a proto se téměř vždy sáhne po variantě se skriptem. Pokud však aktuálně nemáte skript po ruce, můžete odesílání formuláře provést v nouzi také e-mailem.
Dalším důležitým atributem pro prvek form je method. Tím se nastavuje metoda HTTP přenosu pro odesílání obsahu formuláře. Jsou k dispozici dvě různé varianty.
• post = Údaje z formuláře jsou zde odesílány na zadanou adresu ve dvou krocích. Nejprve prohlížeč kontaktuje zadanou adresu. Jestliže bylo úspěšné, jsou údaje z formuláře předány skriptu.
• get = Při této metodě jsou údaje z formuláře připojeny na konec URL, která byla přiřazena atributu action. Údaje z formuláře jsou tedy mimo jiné také viditelné v adresním řádku prohlížeče.
Samozřejmě se nabízí otázka, kterou z těchto dvou variant použít pro odesílání údajů z formuláře. Zásadně můžete použít oba. Zejména však pokud jde o velké objemy dat a nahrávání souborů na server, byste měli sáhnout spíše po post.
Jednoduchá políčka formuláře
Byla dosud definována pouze vnější struktura formuláře. V prohlížeči zatím ale není vidět samotný formulář.
<form method="post" action="form.php"> … </form>
Nyní jde tedy o to, jak naplnit formulář obsahem/životem.
Nejčastěji potřebným typem pole je jednořádkové vstupní pole. Tato pole se používají například k zadání jména, příjmení a e-mailové adresy. Jednořádková vstupní pole se definují následujícím způsobem:
<input type="text" name="vorname" />
Prvkům input je přiřazena kombinace atributu a hodnot type="text". Kromě toho byste měli každému vstupnímu poli přiřadit identifikátor. Tento identifikátor musí být v dokumentu jednoznačný. Je zajímavý zejména tehdy, pokud jde o zpracování dat formuláře pomocí skriptu. V identifikátoru nepoužívejte mezery a speciální znaky.
Když si výsledek prohlédnete v prohlížeči, získáte následující obrázek:
Celkově to vypadá zatím málo spektakulárně. Pokud však kliknete do textového pole, zjistíte, že zde již můžete zadávat údaje.
Aby návštěvníci věděli, co mají do pole zadat, chybí samozřejmě ještě štítek.
Jméno: <input type="text" name="vorname" />
I zde získáte po zobrazení v prohlížeči požadovaný výsledek.
Pomocí atributu size můžete určit šířku pole.
Jméno: <input type="text" name="vorname" size="30" /> <br /> PSČ: <input type="text" name="plz" size="5" />
Atributu size se přiřazuje požadovaná šířka pole.
Hodnota 5 představuje přesně pět znaků. V tomto kontextu je také zajímavý atribut maxlength. Tím se určuje maximální povolený počet znaků, které lze do pole zadat. I zde je opět příklad:
Jméno: <input type="text" name="vorname" size="30" maxlength="40" />
Pokud je hodnota uvedená u maxlength větší než u size, při delších zadáváních se automaticky posouvá obsah pole.
Pomocí atributu value můžete dosáhnout přednastavení pole.
Jméno: <input type="text" name="jmeno" value="Vaše jméno" />
Hodnota přiřazená k value se zobrazí jako předvyplněné pole.
Uživatelé mohou tuto předvyplněnou hodnotu smazat.
Můžete také zabránit mazání hodnot z polí. Definuje se políčko, které není ve skutečnosti více vstupním políčkem. Ve skutečnosti jsou taková pole často využívána pro výstupy. Zajímavé by to mohlo být například pro zobrazení hodnot získaných skriptem. Člověk by mohl například myslet na kalkulačku. Stejně tak je však možné ručně předvyplnit pole textem, který návštěvníci už nebudou moci změnit. (Poznámka: Znaménko eura bohužel není v PDF zobrazení správně zobrazeno).
<input name="cena" type="text" value="€ 699.-" readonly />
Aby bylo pole nastaveno jako pouze pro čtení, přidělí se mu atribut readonly. Zde se podívejte na výsledek:
Předdefinovaný text je viditelný, ale nelze ho smazat.
Definice polí pro heslo
Samozřejmě znáte pole pro heslo. Všude tam, kde se registrujete, musíte zadat heslo. (Obvykle je třeba ho dokonce zadat dvakrát).
Zadávaná data do pole nejsou viditelná, ale prohlížeč je automaticky nahrazuje hvězdičkami/bodky. Výhoda tohoto řešení spočívá v tom, že lidé, kteří se možná dívají přes rameno při zadávání hesla, nemohou heslo odšifrovat. Je však chybné si myslet, že pole pro heslo jsou automaticky bezpečná. Ve skutečnosti jsou hesla přenášena v otevřeném textu normálním HTTP protokolem při odesílání formuláře.
Definice polí pro heslo probíhá následovně:
<input type="password" name="heslo" />
Atributu type je přiřazen hodnotu password. Zde se podívejte na výsledek.
Pokud něco napíšete, prohlížeče to při zadávání ihned zakryje.
