Dnes je Přidat k oblíbeným
Formuláře v HTML
Co to vlastně je a k čemu to slouží?
Formuláře v jazyce html jsou v podstatě nějaká vstupní pole, kam návštěvník Vašich stránek zadává text popř. jiné údaje. Ty se zasílají serveru, kde se pomocí nějakého skriptovacího jazyka (nejčastěji php) zpracovávají. Do formuláře můžete umístit vstupní pole pro text nebo seznamy, odkud se položky vybírají stiskem tlačítka nebo zaškrtnutím čtverečku apod.
Jakmile po vyplnění uživatel stiskne tlačítko k odeslání, všechny vyplněné údaje jsou předány serveru. V této chvíli však nastává problém- pokud na serveru není skript, který by data dokázal zpracovat, nelze s nimi v podstatě nic dělat. Naštěstí existuje jedna výjimka a tou je funkce mailto (syntaxi popíšu později), která data odešle na Váš email. Došlý mail sice není příliš přehledný, ale i tak zůstává nejjednodušším způsobem, jak se k údajům dostat.
Vytváření formuláře
Formulář se definuje párovým tagem <form> </form>, který má povinný atribut action. Ten udává URL skriptu, který má data z formuláře zpracovat. Skript je normální soubor webové stránky, ale místo přípony .htm má příponu většinou .php. Mezi tagy <form> a </form> se pomocí nepárového příkazu <input> vkládají vstupní pole. Tag <input> má dva povinné atributy. Atribut type udává typ vstupního pole a atribut name udává název, který je předán skriptu jako proměnná.
Jméno: <input type="text" name="jmeno"><br>
Mám rád: knihy <input type="checkbox" name="rad" value="knihy"> počítače <input type="checkbox" name="rad" value="počítače"><br>
Pohlaví: Muž <input type="radio" name="pohlavi" value="muz">Žena <input type="radio" name="pohlavi" value="zena"><br>
<input type="submit" value="Odeslat!"><input type="reset" value="Vymazat!"> </form>
Výsledek:
Výše uvedený příklad, Vám ale nebude fungovat, pokud na serveru nebudete mít skript zpracuj.php, který by data zpracoval. Proto existuje jednodušší řešení, které data odešle na Váš email. Problémem tohoto řešení je ale to, že uživatel by měl mít ve svém počítači nainstalován poštovní klient Outlook. Pokud byste však nějaký skript měli, pak je třeba zadat tagu form atribut method. Hodnotou atributu method je buď "get" nebo "post". Pokud použije metodu post, všechny údaje budou předány v těle požadavku a nikdo je neuvidí. Je to bezpečnější a používá se to především pro objemnější údaje (příspěvky v návštěvní knize apod.). Metoda get je nastavena implicitně. Pokud ji použijete, data vyplněná ve formuláři se připojí do adresní řádky za název dokumentu otazníkem. Po otazníku následuje označení (label) vstupního pole, které je shodné s hodnotou atributu name zadaného u tagu input. Mezery jsou nahrazeny znaménky plus (+). Speciální znaky jsou zapsány v hexadecimálním kódu, kterému předchází znak %
Jméno: <input type="text" name="jmeno"><br>
Mám rád: holky <input type="checkbox" name="rad" value="holky"> vdolky <input type="checkbox" name="rad" value="vdolky"><br>
Pohlaví: Muž <input type="radio" name="pohlavi" value="muz">Žena <input type="radio" name="pohlavi" value="zena"><br>
<input type="submit" value="Odeslat!"><input type="reset" value="Vymazat!"> </form>
Výsledek:
Všechny typy tagu <input>
<input type="text">
Tento typ slouží k definování jednořádkových textů a je definován jako implicitní. To znamená, že pokud tagu input nepřiřadíte atribut type, použije se právě type="text". Délku tohoto vstupního pole je možné omezit pomocí atributu size. Maximální počet znaků je možné omezit atributem maxlenght. Pokud je maxlenght menší než size, pak se text v okénku posouvá (roluje). Atributem value lze zadat přednastavenou hodnotu textového pole.<input type="password">
Políčka tohoto typu jsou úplně stejná jako textová, ale při vpisování textu se nezobrazuje text, ale diskrétní hvězdičky. Tento způsob psaní hesla však není nejbezpečnější. Slouží jen k tomu, aby Vám nikdo nemohl číst přes rameno.<input type="checkbox">
Toto tlačítko je zobrazeno jako malý čtvereček, který lze zaškrtnout nebo odškrtnout. Narozdíl od textových polí, jejichž obsah je zasílán serveru i v případě, že jsou prázdná, název checkboxu je serveru sdělen jen v případě, že je políčko zaškrtnuto. Checkboxy, které patří k sobě (odpovídají na stejnou otázku) musí mít shodný atribut name, ale rozdílný atribut value. Atribut name nesmí začínat číslicí a neměl by obsahovat české znaky.Vlastním:<br>
<input type="checkbox" name="spotrebic" value="televize"> Televizor<br>
<input type="checkbox" name="spotrebic" value="video"> Videorekordér<br>
<input type="checkbox" name="spotrebic" value="hifina"> Hi-Fi soupravu<br>
</form>
Výsledek:
Po zaškrtnutí skupin televizoru a videorekordéru se odešle na email (nebo na server):
$spotrebic="televize"&$spotrebic="video"
Pomocí atributu checked s hodnotou checked (<input type="checkbox" name="spotrebic" value="hifina" checked="checked">) je možné označit ta políčka, která budou v nabídnutém formuláři zaškrtnuta. Uživatel má samozřejmě možnost toto zaškrtnutí zrušit. Pomocí atributu disabled="disabled" můžete uživateli zakázat políčko zaškrtnout nebo odškrtnout nebo v poli cokoliv měnit.
Komu: <input type="text" name="komu" value="Správci stránek kekel.tym.cz" disabled="disabled" size="30">
Hodnocení stránek:<br>
<input type="checkbox" name="hodnoceni" value="skvele" checked="checked" disabled="disabled"> Skvělé!<br>
<input type="checkbox" name="hodnoceni" value="strasne" disabled="disabled"> Strašné<br>
</form>
Výsledek:
<input type="radio">
Tlačítka typu radio jsou checkboxům dost podobná, s tím rozdílem, že se vyznačují se kruhovým zaškrtávacím políčkem a v každém okamžiku je možné mít zaškrtnuto maximálně jedno políčko. I v tomto případě je možné nastavit předvolbu pomocí atributu checked="checked". Pokud bude tato předvolba použita u více prvků, bude použit jako aktivní poslední z nich.Fandím<br>
<input type="radio" name="fandi" value="sparta"> Spartě
<input type="radio" name="fandi" value="slavia"> Slávii
<input type="radio" name="fandi" value="slovan" checked="checked"> Slovanu
</form>
Výsledek:
<input type="reset">
Stisknutím tohoto tlačítka dojde k přenastavení všech údajů ve formuláři na počáteční nastavení. Standardní nápis na tlačítku "Reset" lze změnit nastavením atributu value. Nedoporučuji toto tlačítko příliš používat. Pokud se uživatel překlikne, vymažou se mu všechna pracně vyplněná data a to dokáže pěkně naštvat.<input type="submit">
Vzhled tlačítka je stejný jako u typu reset, ale stisknutím dojde k odeslání zaškrtnutých hodnot na server k dalšímu zpracování. I u této funkce je možné přenastavit standardní nápis "Submit" pomocí atributu value.Textarea
Párový tag textarea umožňuje ve formuláři zadat víceřádkový text. Šířku okna (udanou počtem znaků) a výšku okna je možné nastavit atributy cols a rows. Těmito atributy však není délka textu omezena, neboť v okně je možné scrollovat. Text mezi počátečním a koncovým tagem textarea bude zapsán v okně jako přednastavený.<textarea name="vzkaz" rows="5" cols="40"> Sem napište svůj vzkaz</textarea>
</form>
Výsledné zobrazení:
Select- vybírání ze seznamů
Párový tag select umožňuje výběr z několika nabízených možností, které jsou definovány párovým tagem option. Select může mít dva základní atributy- size="počet" (udává, kolik položek bude možné zobrazit bez rozbalování nebo posouvání) a multiple="multiple" (možnost označit pomocí kliknutí a držení klávesy ctrl více možností).<select name="kniha" size="2" multiple="multiple">
<option value="1">Bible</option>
<option value="2">Korán</option>
<option value="3">Listina základních lidských práv a svobod</option>
</select>
</form>
Bude zobrazeno:
Tlačítka jako odkazy
Pomocí formulářových funkcí lze do dokumentu zabudovat také standardní tlačítka sloužící jako hyperlinky. Vysvětlení podá následující příklad.<input type="submit" value="Barvy">
</form>
Toto tlačítko umožňuje vyvolání dokumentu barvy.htm, který je uložen v aktuálním adresáři:
Logické členění formuláře do celků
Většina větších formulářů je pro přehlednost členěna do logicky souvisejících částí. Ke sdružení vstupních polí se používá párový tag "fieldset" a k zadání názvu této skupiny tag "legend".<fieldset>
<legend>Osobní údaje</legend>
Jméno: <input type="text" name="jmeno"><br>
Příjmení: <input type="text" name="prijmeni"><br>
Věk: <input type="text" name="vek"><br>
</fieldset>
<fieldset>
<legend>Údaje o Vašem psovi</legend>
Jméno: <input type="text" name="jmenopsa"><br>
Rodokmen: <input type="text" name="rodokmenpsa"><br>
Věk: <input type="text" name="vekpsa"><br>
Výška: <input type="text" name="vyskapsa"><br>
Váha: <input type="text" name="vahapsa"><br>
</fieldset>
</form>
Zarovnání polí pod sebe
Aby byla všechna pole pěkně pod sebou vyřešíme jednoduchou tabulkou. Pokud ještě nevíte, jak se tabulky tvoří a jak fungují, můžete tuto část přeskočit nebo si přečíst kapitolu, věnovanou speciálně tabulkám.<fieldset>
<legend>Osobní údaje</legend>
<table><tr><td>Jméno:</td><td><input type="text" name="jmeno"></td></tr> <tr><td>Příjmení:</td><td><input type="text" name="prijmeni"></td></tr>
<tr><td>Věk:</td><td><input type="text" name="vek"></td></tr></table>
</fieldset>
<fieldset>
<legend>Údaje o Vašem psovi</legend>
<table>
<tr><td>Jméno:</td><td><input type="text" name="jmenopsa"></td></tr>
<tr><td>Rodokmen:</td><td><input type="text" name="rodokmenpsa"></td></tr>
<tr><td>Věk:</td><td><input type="text" name="vekpsa"></td></tr>
<tr><td>Výška:</td><td><input type="text" name="vyskapsa"></td></tr>
<tr><td>Váha:</td><td><input type="text" name="vahapsa"></td></tr>
<tr><td></td><td><input type="submit" value="Odeslat údaje!"></td></tr>
</table>
</fieldset>
</form>
| Tag | Párový | Význam | Atributy |
|---|---|---|---|
| <form> | Párový | Vymezuje formulář, kterým se získávají informace od uživatele | action="URL skriptu, který data zpracuje" |
| method="způsob odeslání dat"; get doplněním na konec aktivního URL (implicitní) | post v těle požadavku | |||
| <input> | Nepárový | Slouží k definici jednoho vstupního pole | type="text | password | checkbox | radio | submit | reset | hidden | file" text jednořádkové vstupní pole; atributem value lze zadat počáteční hodnotu pole password jako text, ale není zobrazována uživatelem zapisovaná hodnota checkbox zaškrtávací políčko, atributem value lze specifikovat hodnotu vracenou při zaškrtnutí tohoto políčka radio volba právě jedné možnosti; atributem value lze specifikovat hodnotu vracenou pro tuto volbu submit tlačítko odesílající data k serveru; atributem value lze definovat popis tlačítka reset tlačíto pro nastavení implicitních hodnot prvků formuláře; atributem value lze definovat popis tlačítka hidden skryté pole; atributem value lze specifikovat pevnou hodnotu nezadávanou uživatelem file pole pro zadání jména souboru; umožňuje k výstupu formuláře připojit jeden nebo více lokálních souborů; atributem value lze specifikovat implicitní název souboru; atributem accept lze vymezit přípustné typy souborů |
| name="jméno pole odesílané serveru (musí být v rámci formuláře jednoznačné); pro typ pole checkbox|radio může mít řada input prvků vytvářejících blok totožné jméno" | |||
| value="hodnota pole(liší se podle typu pole)" | |||
| checked="checked" specifikuje zaškrtnutí pole checkbox nebo určuje přednastavenou volbu pole radio | |||
| size="počet_znaků" fyzický rozměr pole typu text|password | |||
| accept="seznam MIME typů nebo vzorů přípustných pro pole typu file, který je skript ochoten přijímat; je na prohlížecím programu, aby podle přípony zkontroloval, zda uživatel zadal přípustný soubor | |||
| disabled="disabled" zobrazení pole bez možnosti jeho modifikace | |||
| <textarea> | Párový | Slouží k definici víceřádkového vstupního pole formuláře; text uložený mezi počáteční a koncovou značku je vložen do pole jako předvolba | name="jméno odesílané serveru" |
| rows="počet řádků pole (v počtu znaků)" | |||
| cols="počet sloupců pole (v počtu znaků)" | |||
| align="top | bottom | middle | left | right" ovlivňuje umístění objektu vůči okolí | |||
| <select> | Párový | sloužící k výběru z nabídky | name="jméno odesílané serveru" |
| size="určuje počet zobrazených položek při inicializaci formuláře; pokud je počet položek větší než číslo uvedené u size dochází k jejich rolování" | |||
| multiple="multiple" možnost vybrat více položek | |||
| disabled="disabled" zobrazení pole bez možnosti jeho modifikace | |||
| <option> | Párový | Identifikuje volbu mezi tagy <select> a </select> | selected="selected" přednastavená volba |
| value="název volby, odesílaný serveru" | |||
| disabled="disabled" zobrazení pole bez možnosti jeho modifikace | |||
| fieldset | Párový | Seskupuje části formuláře do jednoho celku | |
| legend | Párový | Udává zobrazovaný název prvku fieldset |