programování aplikací pro internet

tvorba formulářů


Pokud budete chtít vytvořit opravdu interaktivní aplikace, neobejdete se bez formulářů - formulářových prvků. Příkladem může být aplikace, která zaregistruje uživatele nebo jen odešle proměnné skriptu.

Pokud budeme chtít použít (vložit) formulář do skriptu, použijeme HTML tag FORM respektive <FORM>. Formulář má následující atributy, které nastaví chování formuláře. Musíme nastavit atribut ACTION=" << skript >> " , který určuje jméno skriptu, kterému budou data z formuláře předány. Posledním atributem, který bychom měli vyplnit je METHOD="<<POST / GET >>" . Tento atribut určuje, jak budou data z formuláře odeslána. Pokud nastavíme metodu GET, budou hodnoty formuláře předány skriptu za URL adresou. Metoda GET se používá pro přenášení menších hodnot. Metoda POST se používá pro přenášení větších dat v těle HTTP požadavku. Obě metody jsou funkčně stejné, liší se jen přenosem dat.

příklad formuláře

<FORM ACTION="udaje.php" METHOD="POST">

Data formuláře

</FORM>

Nejčastěji používaným formulářovým elementem je INPUT. Při použití tohoto elementu musíme ještě nastavit atribut TYPE="<< typ >>" Nyní si ukážeme, jaké můžeme použít typy tohoto elementu.

 

Vstupní pole <INPUT TYPE="TEXT" NAME="...">

Tento formulářový prvek se používá k činnostem, kdy chceme od uživatele zjistit údaje a odeslat je zpět skriptu. Atribut NAME určuje, jak se bude jmenovat proměnná, kterou odešleme skriptu. Jednoduše řečeno. V této proměnné budeme mít obsah tohoto pole. Mezi další atributy jako je TYPE, NAME můžeme použít VALUE, MAXLENGTH a SIZE. Atribut VALUE určuje počáteční hodnotu, která bude v tomto vstupním poli již předepsána. Atribut MAXLENGTH určuje, kolik znaků budeme moci do tohoto vstupního pole napsat. Atribut SIZE určuje velikost tohoto vstupního pole.

příklad formuláře a vstupního pole

<FORM ACTION="jmeno_skriptu.php" METHOD="POST">

<INPUT TYPE="TEXT" NAME="jmeno_uzivatele"
VALUE="Sem zadejte své jméno" SIZE="25">

</FORM>

v praxi to bude vypadat následovně:

Pokud budeme mít více vstupních polí, můžeme je uspořádat do tabulky:

<form action="registrace.php" method="post">
<table align="center">
<tr>
<td>Jméno:</td>
<td><input type="text" name="jmeno"></td>
</tr>
<tr>
<td>Věk:</td>
<td><input type="text" name="vek"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>

v praxi to bude vypadat následovně:

Jméno:
Věk:
E-mail:

 

Odesílání formuláře <INPUT TYPE="SUBMIT" VALUE="...">

K čemu by nám byl formulář s vstupními poli, který bychom neuměli skriptu odeslat. Tzn. vyplněné hodnoty předat skriptu, který je může dále zpracovat. Atribut TYPE="SUBMIT" nám stanovuje, že se jedná o odesílací tlačítko. Při použití tohoto formulářového prvku bychom měli nastavit také atribut VALUE="". Tento atribut nám určuje text (nápis), který bude na tlačítku umístěn.

příklad odesílacího tlačítka

<FORM ACTION="jmeno_skriptu.php" METHOD="POST">

<INPUT TYPE="SUBMIT" VALUE="Odeslat údaje">

</FORM>

v praxi bude toto tlačítko vypadat následovně:

Teď si vytvoříme funkční příklad, který odešle zvolené data z formuláře skriptu:

<form action="data.php" method="post">
<table align="center">
<tr>
<td>Jméno:</td>
<td><input type="text" name="jmeno"></td>
</tr>
<tr>
<td>Věk:</td>
<td><input type="text" name="vek"></td>
</tr>
<tr> <td>E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Odeslat údaje"></td>
</tr>
</table>
</form>

Nyní máme vytvořený formulář, který po odeslání předá hodnoty vstupních polí skriptu data.php (název si můžete upravit podle sebe, ale musíte upravit také ACTION=".."). Ve skriptu budeme mít přístupné proměnné $jmeno, $vek a $email.

Vytvoříme také skript data.php , který nám zpracuje data:

<?
echo "Jmenuješ se $jmeno a máš $vek roků.
Vím taky, že máš e-mail $email !";
?>

Pokud budete chtít někdy ve svém skriptu použít mechanizmus, kdy se uživatel rozhodne, jestli ano nebo ne, můžete použít také tyto "odesílací tlačítka".

praktický příklad

<FORM ACTION="registrace.php" METHOD="POST">
Souhlasíte s pravidly registrace:
<INPUT TYPE="SUBMIT" VALUE="ANO" NAME="souhlas">
<INPUT TYPE="SUBMIT" VALUE="NE" NAME="souhlas">
</FORM>

A skript registrace.php bude vypadat následovně:

<?
if ($souhlas == "ANO"){

echo "Uživatel souhlasí s registrací !!!";

}else{

echo "Bohužel s pravidly musíte souhlasit !!!";

}
?>

Atribut NAME="..." zajistí, že skriptu bude odeslána proměnná $souhlas, která bude obsahovat hodnoty ANO / NE. Podle této hodnoty potom vykonáme určenou akci.

 

Vstupní pole (heslo) <INPUT TYPE="PASSWORD" VALUE="...">

Toto pole, stejně jako vstupní pole (type="text"), je určeno k zadávání hodnot od uživatele, které nemají být zjištěny "při pohledu přes rameno". Jednoduše řečeno: místo hodnoty (písmen) budou zobrazeny tečky.

příklad vstupního pole (hesla)

<FORM ACTION="jmeno_skriptu.php" METHOD="POST">
<INPUT TYPE="PASSWORD" NAME="heslo" SIZE="25"
VALUE="Vaše heslo">
</FORM>

v praxi to bude vypadat následovně:

Přepínací pole (tlačítka) <INPUT TYPE="RADIO" VALUE="...">

Tento formulářový prvek použijeme tehdy, pokud chceme dát uživateli na výběr z několika možností. Například výběr pohlaví, mobilního telefonu atd. U tohoto elementu můžeme nastavit atribut CHECKED, který znamená, že tento prvek (pole) již bude vybrán.

Vše si ukážeme na příkladu.

<INPUT TYPE="RADIO" NAME="pohlavi" VALUE="Muž" CHECKED>Muž<br>
<INPUT TYPE="RADIO" NAME="pohlavi" VALUE="Žena">Žena

výsledek:

Muž
Žena

Výsledek výběru máme následně v proměnné $pohlavi.


příklady:

ukázka možností formulářů - část 1

ukázka možností formulářů - část 2

ukázka možností formulářů - část 3

ukázka možností formulářů - část 4