Home » Školení » Tvorba WWW – HTML » Formuláře

Formuláře

Formuláře jsou takové prvky stránky, které umožňují získat vstup přímo od uživatele.


Toho se využívá při tvorbě všemožných návštěvních knih, shoutboardů či administračních rozhraní redakčních systémů. Bohužel jediné co HTML umí, je formuláře zobrazit. Práci s vloženými daty musí přenechat nějakému programovacímu jazyku.

Základní tagy

Úplně nejzákladnější značkou je párový tag <form>, který vymezí, co přesně do formuláře patří a tedy to, co bude odesláno na server. Další důležitá značka je <input>, která vytvoří různá vstupní pole (tlačítka, políčka, roletky…).

Obecná syntaxe vypadá takto: <input type=“typ“ parametr1=“hodnota“>, input je nepárová značka, a základní parametr je TYPE, který značí typ, tedy o jaký formulářový prvek se jedná.

Tag <form> má také několik parametrů, především action, který obsahuje adresu/soubor, na kterou bude formulář odeslán. Třeba <form action=“uloz-komentar.php“>. Dalším důležitým parametrem je method, který určuje způsob odeslání dat, buď post nebo get. Co to přesně znamená vás nyní zajímat nemusí.

Jednotlivé typy vstupních polí

  • <input type=“text“> – zobrazí se jednoduché políčko, do kterého může uživatel vpisovat text. Pokud chcete omezit délku řetězce, použijte parametr MAXLENGTH. <input type=“text“ maxlength=“50″>. Do tohoto pole napíšete max 50 znaků. Celkem zajímavou funkci má parametr VALUE, který napíše do pole text, s kterým může uživatel dále pracovat. Dalším parametrem je SIZE, který udává šířku políčka ve znacích.
  • <input type=“button“> – tento tag slouží pro vytvoření tlačítka ve formuláři, důležitý je parametr VALUE, kterým nastavíte to, co se zobrazí na tlačítku.
  • <input type=“checkbox“> – toto je jednoduché zatržítko. Pokud do něj přidáme parametr checked=“checked“, zobrazí se políčko již zatržené. . Vypadá to trochu divně, ale je to zcela správně zapsané.
  • <input type=“hidden“> – tato část formuláře je skrytá a slouží pro předání dat, která uživatel nepotřebuje vidět.
  • <input type=“image“> – tlačítko tvaru obrázku, které je stisknutelné, obrázek je udán atributem SRC,
  • <input type=“password“> – toto pole slouží k zadaní hesla, kde se místo znaků objevují hvězdičky (či kolečka v jednom nejmenovaném systému
  • <input type=“radio“> – přepínač, v jedné sérii může být zatržen pouze jeden. Aby prohlížeč poznal, že jde o stejnou sérii, je nutno zde použít stejnou hodnotu parametru NAME (o tom více později). Defaultně bývá ze série zaškrtnutý první uvedený, ovlivnit to můžeme opět přidáním parametru checked=“checked“ jako u checkboxů
  • <input type=“reset“> – toto tlačítko slouží k vymazaní obsahu formuláře, respektive navrácení k původním hodnotám.
  • <input type=“submit“> – tento druh tlačítka slouží k odeslaní dat směrem k serveru. Vypadá (navenek) stejně jako <input type=“button“>. Pomocí parametru VALUE se nastaví popiska.

Parametr NAME

Každý <input> musí nutně mít nastavený parametr NAME, který obsahuje jméno daného políčka. Toto je nezbytně nutné, pokud má být formulář korektně odeslán. Přes toto jméno pak script přistupuje k jednotlivým datům. Z toho vyplývá i to, že v rámci jednoho formuláře musí být každé jméno unikátní. Trochu zvláštní situace nastává u přepínačů.

Chci zasílat novinky…
<input type=“radio“ name=“prepinac“ value=“tydne“>týdně<br>
<input type=“radio“ name=“prepinac“ value=“mesicne“ checked=“checked“>měsíčně<br>
<input type=“radio“ name=“prepinac“ value=“nikdy“>nikdy

 

Chci zasílat novinky…
týdně
měsíčně
nikdy

Takto vypadá jedna série přepínačů. Sérii určíme tak, že nastavíme každému inputu stejné jméno.

V jedné sérii může být označen vždy jen jeden. Value z označeného přepínače se pak odešle na server.

Textová oblast TEXTAREA

<input type=“text“> je pouze jednořádkový a proto se nehodí pro zadávání delších textů, třeba příspěvků do diskuze. Od toho tady máme textové pole, <textarea>. Syntaxe vypadá následovně:

<textarea name=“text“ rows=“30″ cols=“30″></textarea>

V tomto textovém poli lze i řádkovat stisknutím ENTERU. Počet řádku nastavíte parametrem ROWS. Pokud uživatel toto číslo překročí, objeví se posuvník. COLS nastavuje šířku ve znacích. Textarea neobsahuje parametr VALUE, pokud do ní chcete předem vepsat nějaký text, vložte ho mezi <textarea> a </textarea>. Od toho je to párový tag.

Praktický příklad

Právě jsme získali mnoho teoretických znalostí, nyní si je ověříme v praxi. Vytvoříme si jednoduchý formulář pro návštěvní knihu.

<form method=“post“ action=“ulozit-prispevek.php“>
<p>
Jméno: <input type=“text“ name=“jmeno“><br>
E-mail: <input type=“text“ name=“mail“><br>
Web: <input type=“text“ name=“web“><br>
Text: <textarea name=“text“ cols=“50″ rows=“5″></textarea>
</p>
<p>
<input type=“radio“ name=“pohlavi“ checked=“checked“>Muž<br>
<input type=“radio“ name=“pohlavi“>Žena
</p>
<p>
<input type=“checkbox“ name=“zasilat“ checked=“checked“>zaslat autorovi stránek na e-mail
</p>
<p>
<input type=“submit“ value=“Odeslat“>
<input type=“reset“ value=“Smazat“>
</p>
</form>

Aby to fungovalo, museli byste vytvořit script ulozit-prispevek.php, který by obstaral zpracování dat a uložení příspěvku. Jinak aby se dosáhlo přehlednějšího zobrazení formuláře, využívá se často tabulky.

Rolovací nabídka

Dalším speciální vstupním polem může být rolovací (rozbalovací) nabídka. Pro rolovací nabídku je značka <select>, pro jednotlivé položky tag <option>. Syntaxe je podobná seznamu.

<select name=“nabidka“>
<option value=“mleko“>Mléko&tl;/option>
<option selected=“selected“ value=“maslo“>Máslo</option>
<option value=“odpadky“>Odpadky</option>
</select>

 

Podobně jako u checkboxů a přepínačů lze vybrat výchozí hodnotu, tady je to ale pomocí parametru selected=“selected“.

Do tagu <select> můžeme přidat ještě size, který obsahuje počet zobrazených řádků. Defaultně je tam jedna, tzn. že se zobrazí pouze jeden řádek a zbytek se objeví po rozbalení.

Fieldset

Pomocí tagu <fieldset> můžeme seskupit skupinu vstupních políček do jednoho bloku ohraničeného rámečkem. Pomocí vnořeného tagu <legend> nastavíme titulek pro rámeček. Jedná se pouze o grafický efekt, který ale může formuláře dosti zpřehlednit.

<fieldset>
<legend>Nový komentář</legend>
Jméno: <input type=“text“ name=“jmeno“>
</fieldset>

 

Nový komentář

Jméno:

I když jsme si vytvořili takové krásné formuláře, nemůžeme je bohužel k ničemu použít. Pokud se ale začnete věnovat PHP či JavaScriptu, užijete si jich až až.