HTML formuláře - část v prohlížeči

Než budeme moci zpracovávat nějaká uživatelská data na straně serveru přes PHP, tak je musíme nejprve získat. To se dělá v prohlížeči přes HTML formuláře, které definují základní prvky k přijímání dat. Smyslem tohoto článku není představit veškeré možnosti formulářů, ale jen základní možnosti přijmutí dat a pochopení principu.

Základní zdroj HTML formuláře

<form action="script.php" method="get">

<!-- Zde bude celý obsah formuláře -->

</form>

Každý formulář začíná HTML značkou <form> a končí značkou </form>. Všechna formulářová pole umístěná mezi těmito značky budou odeslána.

Dále je nutné nastavit, kam formulář odeslat atributem action (název scriptu), a jakou metodou atributem method (GET nebo POST). Pokud metodu a cíl neuvedeme, tak se formulář defaultně posílá sám na sebe metodou GET.

Základní formulářová pole

Nejvíce používané pole slouží pro získání textu (stringu). Každé pole má svůj typ a název, podle kterého jej po odeslání poznáme.

Běžné textové pole

Za nejdůležitější požaduji obyčejné textové pole:

<input type="text" name="food">

Pole pro zadání hesla

<input type="password" name="heslo">

Checkbox

Slouží pro zjištění booleanu (TRUE a FALSE):

<input type="checkbox" name="vop" checked="checked">

Souhlasíte s podmínkami?

Radio button pro výběr více možností

<input type="radio" name="language" value="cz" checked> Čeština
<input type="radio" name="language" value="sk"> Slovenština
<input type="radio" name="language" value="en"> Angličtina

Umožňuje výber z několika možností. Vybraná možnost posílá svojí hodnotu (value). Defaultně je dobré vybrat jedno pole atributem checked="checked":

Velké textové pole

Vzniklo pro zadávání víceřádkového textu. Zadává se také:

• cols ~ počet sloupců
• rows ~ počet řádků

<textarea name="article" cols="40" rows="6">
Ahoj lidi!
</textarea>

Ahoj lidi!

Selectbox

Představuje pohodlnou možnost, jak vybrat z mnoha dat.

<select name="gender">
	<option value="man">Muž</option>
	<option value="woman">Žena</option>
</select>

Po odeslání formuláře se posílá hodnota ve value.

Tlačítko pro odeslání

Formulář může mít odesílacích tlačítek neomezeně mnoho. Zapisují se snadno:

<input type="submit" value="Odeslat">

Po kliknutí vezme všechna data z formulářových polí a odešle na nastavený script:

Zpracování dat na serveru

Dále je nutné data odeslat na server a tam zpracovat, o tom pojednává další článek.

Jan Barášek   Více o autorovi

Autor článku pracuje jako seniorní vývojář a software architekt v Praze. Navrhuje a spravuje velké webové aplikace, které znáte a používáte. Od roku 2009 nabral bohaté zkušenosti, které tímto webem předává dál.

Rád vám pomůžu:

KontaktSpolupráce