Webový formulář je část stránky složená ze vstupních polí, různých tlačítek a přepínačů, která slouží pro získání dat od uživatele. S využitím těchto dat se provádí script, který data zpracuje a výsledek předá uživateli nebo uloží do souboru (text, databáze).
Základ formuláře tvoří párové tagy <form> a </form>, mezi něž se vkládají prvky formuláře. Kód tedy bude vypadat takto:
<form>
zde budou formulářové prvky
</form>
U tagu <form> se určují minimálně tyto parametry:
name="jméno"
Určuje jméno formuláře, pomocí kterého je možné odkazovat se na formulář v např. CSS a scriptech. Tento atribut je zachován pouze kvůli zpětné kompatibilitě. V současné době by se měl používat atribut id="", který má tytéž vlastnosti.
method="post"
Používají se dva způsoby (metody) odesílání dat z formuláře určené parametrem method. Jsou to post a get. Více používaná je metoda post, které je bezpečnější.
action="skript.js"
Atribut action="" určuje, který script se má použít pro zpracování zadaných údajů. Pokud nemáte možnost použít žádný programovací jazyk pro zpracování dat, můžete je odeslat na mail, action="mailto:mujmail@server.cz".
enctype="multipart/form-data"
Atribut určuje, jak se bude obsah formuláře kódovat. Výchozí hodnotou je application/x-www-form-urlencoded. Pro běžné formuláře, které načítají jen textová data toto kódování stačí, ale pokud chcete přenášet i celé soubory (obrázky, dokumenty, tabulky...) musíte použít kódování multipart/form-data.
Vstupní pole formuláře, tag input
Vstupní pole umožňují interakci internetové stránky a koncového uživatele. Jsou to pole pro zápis, zaškrtávací políčka, políčka pro výběr z více možností, atp. Typ vstupního pole určuje atribut type.
type určuje typ vstupního pole
value základní obsah vstupního pole
maxlenght maximální délka napsaného textu
checked políčko je již zaškrtnuté
name jméno vstupního pole – důležité!
Seznam typů vstupních polí
text pole pro zápis textu. Délka je omezena parametrem maxlenght.
password podobné jako pole text. Při zápisu do pole se namísto textu zobrazují hvězdičky.
checkbox zaškrtávací políčko
radio políčko pro výběr z několika možností
file pro odeslání dat
submit tlačítko pro odeslání dat z formuláře
reset tlačítko vymaže formulář
hidden není vidět, skryté pole, může se v něm odesílat cokoliv Vámi nadefinovaného
textarea
Tag je párový
Určuje se parametr rows (počet řádek)
Určuje se parametr cols (počet sloupců)
Nesmíme opomenout ani parametr name
To, co je napsáno mezi <textarea> a </textarea>, se ve výsledku objeví, takže něco jako když zvolíte u <input type="text"> parametr value. Takže vám ukážu příklad:
<textarea name="vzkaz" rows="5" cols="7">Zde mi můžete napsat vzkaz</textarea>
select
Tag je párový
Mezi tagy <select> a </select> se vkládá nepovinně párový (může být nepárový) tag <option>, u kterého se povinně určuje parametr value Za tag se píše to, co se zobrazí na výběr. Nesmíme opomenout ani parametr name, který se píše pouze k tagu <select>