Fromuláře v HTML

Formulář, to je skupina objektů, do kterých se zadávají data nebo se data vybírají, ty se pak odešlou najednou ke zpracování.

Tvorba formuláře se provádí několika tagy:

<form>
Základní tag formuláře: <input>
Vstupní pole či tlačítka: <select>
Pole výběru: <option>
Položka výběru: <textarea>
Textové vstupní pole: <fieldset>
Vykreslí kolem formuláře rámeček: <legend>
Nadpis formuláře

Tag < form >

Nutně párový tag, ohraničující formulář.

Atributy tagu < form >

Atribut	Hodnota	Význam
action	URL, kde je skript zpracovávající formulář nebo emailová adresa ve tvaru: "mailto:jmenoschránky@server.cz"	Říká kam se pošle formulář k dalšímu zpracování
method	get - data se pošlou jako součást URL post - data se pošlou mimo URL (nebudou vidět v adrese)	Jakým způsobem se budou odesílat vyplněná data k dašímu zpracování

Pozor: Dbejte na to, aby ste neposílali například password(heslo) pomocí metody get! Heslo pak bude samozřejmě vidět v URL.
Budete-li se chtít bez vyplňování vrátit k nastavení formuláře, tedy spíše odeslat ty samá data ke zpracování, půjde to jen metodou post, ta bude mít totiž v odesílací URL i vyplněná data, což s metodou get nejde. Také velikost URL je velikostně omezena, proto větší formuláře musíte posílat jen pomocí metody post.

Tag < input >

S pomocí tohoto tagu se vytvářejí vstupní pole nebo tlačítka.

Atributy tagu < input >

Atribut	Hodnota	Význam
type	text - jednořádkové vstupní textové pole passwodr - jednořádkové vstupní textové pole, ve kterém se znaky nahrazují hvězdičkami. Používá se k zadávání hesel. hidden - skryté textové pole radio - přepínač mezi hodnotami checkbox - zaškrtávací čtvereček výběru submit - tlačítko odeslat reset - resetovací tlačítko, data z formuláře se vymažou button - tlačítko, funkci mu nastavíte pomocí javascriptu
name	text	jméno pole odeslílané s daty
value	text, čísla	implicitní hodnota
size	počet znaků	určuje velikost vstupního textového pole
maxlenght	počet znaků	nastavuje maximální počet znaků, které se mohou napsat do vstupního textového pole
checked	checked	nastavuje, je-li daná možnost výběru implicitně zaškrtnutá checked="checked - zaškrtnuto"
disabled	disabled	pole bude šedé a nepůjde v něm nic měnit

Tag < select >

výběrové rolovací pole, jednotlivé položky jsou uzavřeny do tagu < option >.

Atributy tagu < input >

Atribut	Hodnota	Význam
name	text	jméno pole odeslílané s daty
size	počet řádků	určuje počet zobrazených řádků
multiple	multiple	umožňuje hromadný výběr položek
disabled	disabled	pole bude šedé a nepůjde v něm nic měnit

Tag < option >

položky rolovacího seznamu

Atributy tagu < input >

Atribut	Hodnota	Význam
value	hodnota, text	hodnota dané volby
label	text	název dané položky
selected	selected	vybraná položka
disabled	disabled	pole bude šedé a nepůjde v něm nic měnit

Tag < textarea >

velké textové pole chcete-li, aby byl v poli implicitně zobrazen text, stačí ho vložit mezi tagy clt; textarea > a
< /textarea >

Atributy tagu < input >

Atribut	Hodnota	Význam
name	text	jméno pole odeslílané s daty
cols	číslo	šířka ve znacích
rows	číslo	počet řádků
disabled	disabled	pole bude šedé a nepůjde v něm nic měnit

Tag < fieldset >

Kolem formuláře vytvoří tenký rámeček.
Musi následovat po tagu < form > !!

Tag < legend >

Nadpis celého formuláře.
Musí následovat bezprostředně za tagem < fieldset >!!

Atributy tagu < input >

Atribut	Hodnota	Význam
align	top \| right \| left \| bottom	zarovnání

Atributy pro každý tag

Atribut	Hodnota	Význam
tabindex	číslo	Jde o to, když tmáčknete TAB, tak se pohybujete mezi položkami formuláře, tím to číslem, můžete měnit pořadí procházení.
accesskey	znak	Když podržíte tento znak + ALT, bude aktivní právě pole, u kterého je to definované

Příklad:

Kód příkladu:

<form action="http://amun.felk.cvut.cz/vypis_form.php" method="post">

<fieldset>
<legend>Příklad:</legend>
<fieldset>
<legend>Jméno a Přímeni</legend>
<label for="jmeno">Jméno</label>
<input type="text" id="jmeno" name="jmeno" />
<label for="prijmeni">Příjmení</label>
<input type="text" id="prijmeni" name="prijmeni" />
<label for="muz">Muž</label>
<input type="radio" checked="checked" id="muz" name="pohlavi" value="muz" />
<label for="zena">Žena</label>
<input type="radio" id="žena" name="pohlavi" value="zena" />
</fieldset>

<fieldset>
<legend>Způsob dopravy</legend>
<label for="doprava">Doprava</label>
<select id="doprava" name="doprava">
<option value="posta">Pošta</option>
<option value="jine">Jiná přeprava</option>
</select>
</fieldset>

<fieldset>
<legend>Zboží</legend>
<select name="zbozi" size="4" multiple="multiple">
<option value="loko">Grafická karta</option>
<option value="ponorka">Zvuková karta</option>
<option value="paratko">Monitor</option>
<option value="chleba">Myš</option>
</select>
</fieldset>

<fieldset>
<legend>Zdarma</legend>
<input type="checkbox" value="USB" /><label>USB klíčenka</label>
<input type="checkbox" value="tricko" /><label>Tričko Firmy</label>
<input type="checkbox" checked="checked" value="karabina" /><label>Karabina</label>
</fieldset>

<fieldset>
<legend>Vzkaz</legend>
<textarea rows="4" cols="30" name="dlouhytext">Zde napište, co chcete
</textarea>
</fieldset>

<p>
<input type="submit" value="odeslat" />
<input type="reset" value="resetovat" />
</p>
</fieldset>
</form>