Formuláre sa definujú pomocou prvku form
. Všetky prvky, ktoré sú vnútri prvku form
, patria k danému formuláru.
<form> … </form>
V úvodnom prvku <form>
sa očakáva atribút action
. Tým sa nakoniec určuje, čo sa má stať s údajmi z formulára. Zvyčajne ide o aplikáciu PHP.
<form method="post" action="form.php"> … </form>
Dôležité je uistiť sa, že zadaný súbor je skutočne dostupný. Preto musíte zadať správnu cestu.
Namiesto skriptu je možné uviesť aj e-mailovú adresu.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
V tomto prípade sa údaje z formulára odosielajú e-mailom. To však nie je elegantné, preto sa takmer vždy uprednostňuje použitie skriptu. Ak momentálne nemáte k dispozícii skript, môžete formulár odoslať aj e-mailom.
Ďalší dôležitý atribút pre prvok form je method
. Určuje spôsob prenosu HTTP pre odoslanie obsahu formulára. Sú k dispozícii dva rôzne varianty.
• post
= Údaje z formulára sa tu odosielajú v dvoch krokoch na zadanú adresu. Najprv je kontaktovaná zadaná adresa prehliadačom. Keď sa to podarí, údaje z formulára sa odovzdajú skriptu.
• get
= Pri tomto spôsobe sa údaje z formulára pripájajú na koniec URL, ktorý bol priradený atribútu action
. Z tohto dôvodu sú údaje z formulára viditeľné aj v riadku s adresou prehliadača.
Samozrejme, vzniká otázka, ktorú z týchto dvoch variantov by ste mali použiť pre odoslanie údajov z formulára. Zásadne ich môžete využiť obidva. Avšak, najmä ak ide o veľké množstvo údajov a nahranie súborov na server, malo by sa uprednostniť použitie post
.
Jednoduché polia formulára
Zatiaľ bolo jedine definované vonkajšie schéma formulára. V prehliadači ešte však nie je viditeľný samotný formulár.
<form method="post" action="form.php"> … </form>
Teraz ide o to, naplniť formulár obsahom/životom.
Najčastejším typom poľa, ktoré sa potrebuje, je jednoriadkové vstupné pole. Používa sa napríklad na získanie mena, priezviska a e-mailovej adresy. Jednoriadkové vstupné polia sa definujú nasledovne:
<input type="text" name="vorname" />
Prvku input
je priradená kombinácia atribút-hodnota type="text"
. Okrem toho by ste mali každému vstupnému polu priradiť interný identifikátor. Tento identifikátor musí byť v dokumente jednoznačný. Je zaujímavý hlavne v prípade spracovania údajov z formulára pomocou skriptu. V identifikátore nezadávajte medzery a špeciálne znaky.
Ak si výsledok pozriete v prehliadači, uvidíte nasledujúci obraz:
Zatiaľ to vyzerá celkom obyčajne. Ak však kliknete do textového poľa, uvidíte, že už môžete robiť zadania.
Samozrejme, na to, aby návštevníci vedeli, čo majú do poľa zadať, tam chýba označenie.
Meno: <input type="text" name="vorname" />
Opäť, ak sa pozriete do prehliadača, uvidíte požadovaný výsledok.
Pomocou atribútu size
môžete určiť šírku poľa.
Meno: <input type="text" name="vorname" size="30" /> <br /> PSČ: <input type="text" name="plz" size="5" />
Atribútu size
priradíte požadovanú šírku poľa.
Hodnota 5
zodpovedá presne päť znakom. V tejto súvislosti je tiež zaujímavý atribút maxlength
. Cezeň sa určuje maximálny povolený počet znakov, ktoré môžu byť zadané do poľa. Tu je ďalší príklad:
Meno: <input type="text" name="vorname" size="30" maxlength="40" />
Ak je uvedená hodnota v maxlength
väčšia ako u hodnoty v size
, automaticky sa v prípade dlhších zadávaní prejde do rolovania v poli.
Pomocou atribútu value
môžete dosiahnuť predvyplnenie pola.
Meno: <input type="text" name="meno" value="Tvoje meno" />
Hodnota priradená k value
sa považuje za prednastavenie poľa.
Používatelia môžu túto prednastavenú hodnotu vymazať.
Môžete tiež zabrániť vymazaniu hodnôt z polí. Pri tom definujete vstupné pole, ktoré v podstate už nie je vstupné pole. Takéto polia sa často využívajú na výstupy. Mohlo by to byť zaujímavé napríklad na zobrazenie hodnôt určených skriptom. Myslite napríklad na kalkulačku. Ale tiež môžete manuálne predvyplniť pole s textom, ktorý návštevníci už nevedia zmeniť. (Upozornenie: Znak eura sa v zobrazení PDF bohužiaľ nezobrazuje správne).
<input name="cena" type="text" value="€ 699.-" readonly />
Aby ste pole nastavili ako iba na čítanie, priradíte mu atribút readonly
. Tu je opäť pohľad na výsledok:
Preddefinovaný text je priamo vidieť. Avšak nedá sa zmazať.
Definovať polia na zadanie hesla
Samozrejme poznáte polia na zadanie hesla. Všade tam, kde sa registrujete, musíte zadať heslo. (Zvyčajne ho musíte dokonca zadať dvakrát).
Vložené údaje do vstupného poľa nie sú viditeľné, ale prehliadač automaticky nahrádza hviezdičkami/bodkami. Výhodou tohto spôsobu je, že osoby, ktoré vás možno sledujú pri zadávaní hesla, nemôžu heslo rozlúštiť. Je však omyl, že polia na heslo sú automaticky bezpečné. Skutočnosťou je, že heslá sa pri bežnej komunikácii HTTP odosielajú v čistom texte.
Polia na zadanie hesla sa definujú nasledovne:
<input type="password" name="heslo" />
Typu priradený atribút password
. Tu je zase pohľad na výsledok.
Ak tam niečo napíšete, prehliadače to počas zadávania automaticky zneviditeľnia.