Cvičenie č.12 – Tvorba formulára

Téma: Tvorba formulára

Úloha: Vytvorte registračný formulár ako HTML dokument s názvom formular.html, ktorý bude obsahovať položky podľa zadania a po odoslaní ktorého sa zobrazí PHP script udaje.php kde sa zobrazia všetky položky formulára.

Zadanie úlohy: Registračný formulár má obsahovať nasledujúce položky:

–        Osobné údaje: Meno, priezvisko, dátum narodenia, miesto narodenia

–        Bydlisko: ulica, číslo popisné, mesto, PSČ

–        Ďalšie údaje: štátna príslušnosť, pohlavie, vek, škola

–        V ktoré dni máme predmet EPU: párny a nepárny týždeň

–        Súhlas so spracovaním údajov

–        Odosielacie tlačítko

Podmienky: Vytvorený dokument umiestnite na svoj blog v položke PHP ako „Zadanie č.12 Tvorba formulára“ s plným znením úlohy a odkazom na súbor formular.php

Teória :

Pre každý odosielaný formulár je treba presne určiť, akou metódou majú byť dáta odoslané. Pokiaľ žiadnu metódu neurčíte vždy budú dáta odosielané prednastavenou (implicitnou) metódou GET. Metódu prenosu určíte v parametri METHOD tágu FORM. Najčastejšie sa využívajú nasledujúce metódy:

  • HEAD – slúži výlučne na získavanie informácie o dokumente, nie jeho obsah.
  • GET – prednastavená (implicitná) metóda. Všetky zadané dáta formulára pridáva k reťazci požiadaviek (URL)
  • POST – dáta sú odosielaná opäť, ako súčasť tela (HTTP), ale nie sú súčasťou URL, ako v metóde GET. Metóda POST umožňuje posielať väčšie množstvo dát než metóda GET . Ďalšou dôležitou odlišnosťou je, že POST vždy odosiela požiadavku serveru a nehľadá možnú odpoveď vo vyrovnávacej pamäti. Z tohto dôvodu je metóda POST oproti GET omnoho pomalšia, ale zato bude obsahovať zaručene aktuálnu odpoveď.

1. Metóda GET a tvar URL

Ako bolo už uvedené všetky dáta pri tejto metóde sú  vložené do reťazca požiadaviek. Dáta sú teda viditeľné, ako ktorákoľvek iná časť URL, preto nie je vhodné používať túto metódu v prípade chúlostivých dát, ako sú heslá, čísla účtov a podobne.

Pri tejto metóde si treba premyslieť, či nebude vadiť prípadná neaktuálnosť odpovede. Pokiaľ totiž vo vyrovnávacej pamäti ostane starší výsledok pre rovnaké hodnoty URL môžu byť tieto výsledky zobrazené bez skutočného dotazu na server. Ďalšou nevýhodou je obmedzené množstvo dát, ktoré ide pripojiť za požadovanú adresu.

Tu vidíte príklad URL formulára odoslaného metódou GET

formulare_odosielanie_get

Prvá časť http://localhost určuje webový server, ktorý má spracovať požiadavku. test je názov zložky, v ktorej je uložený súbor s formulárom v našom prípade get.php. Znak ? oddeľuje cestu súboru od pripojiteľných dát. Dáta sú k URL pripájané v pároch kľuč=hodnota oddelených &. Ďalšie znaky, ktoré sa v URL často objavujú sú znaky + a #. Znak + nahradzuje medzery a znak # sa používa ako odkaz na určité miesto dokumentu.

2. Prvky formulárov

Textové pole (TYPE=TEXT)

<input type=text name=pozdrav value="Napíš požadovaný pozdrav" size=60">

Tlačítko na odosielanie formulára (TYPE=SUBMIT)

<input type=submit value="Odoslať">

Tlačítko na resetovanie formulára (TYPE=RESET)

<input type=reset value="Obnoviť">

Bežné tlačítko (TYPE=BUTTON)

<input type=button value="Skús stlačiť">

Obrázkové tlačítko odosielania (TYPE=IMAGE)

<input type=image name=obrazok src=picture/php.gif>

Heslo (TYPE=PASSWORD)

<input type=password name=heslo value=abc>

Prepínacie tlačítka (TYPE=RADIO)

 <input type=radio name=predmet value="Matematika"> Matematika <br>
 <input type=radio name=predmet value="Fyzika" checked> Fyzika <br>
 <input type=radio name=predmet value="Ekonomika"> Ekonomika <br>

Zaškrtávacie pole (TYPE=CHECKBOX)

 <input type=checkbox name=predmet[] value="Matematika"> Matematika <br>
 <input type=checkbox name=predmet[] value="Fyzika" checked> Fyzika <br>
 <input type=checkbox name=predmet[] value="Ekonomika"> Ekonomika <br>

Skryté pole formulára (TYPE=HIDDEN)

<input type=hidden name="názov" value="hodnota">

Súbor (TYPE=FILE)

<input type=file name=obr>

3. Zoskupovanie formulárových prvkov

Ak sa chystáte vytvárať rozsiahlejšie formuláre, prídu vám určite vhod elementy FIELDSET LEGEND, ktoré vám umožnia rozdeliť formulár na prehľadnejšie časti. Tág GIELDSET je párový a ohraničí skupinu prvkov tenkou čiarou. Nadpis takejto skupiny môžte vytvoriť druhým tágom LEGEND, ktorý je tiež párový. V tágu LEGEND je zavedený atribút accesskey, ktorý umožňuje stlačením kláves ALT + nastavený kláves aktivovať príslušnú skupinu (ak túto funkciu podporuje prehliadač).

Zoznam

Zoznam sa používa, ak chceme užívateľovi ponúknuť jednu, alebo viac položiek prednastaveného zoznamu položiek. Použitím atribútu multiple umožníme viacnásobný výber.

<select size="1" name="zoznam">
 <option>Renault</option>
 <option selected>Opel</option>
 <option>Fiat</option>
 <option>Škoda</option>
 </select>

Hierarchický zoznam

Pokiaľ do zoznamu uvedieme veľké množstvo položiek stane sa výber dosť neprehľadný. Z tohto dôvodu je zavedený párový tág OPTGROUP, ktorý umožní hierarchické rozčlenenie zoznamu do prehľadnejších skupín. Text určujúci názov skupiny je uvedení pomocou atribútu label.

Základná syntax:

<select>
 <optgroup label=názov 1. skupiny>
 <option>Položka 1</option>
 <option>Položka n</option>
 </optgroup>
 <optgroup label=názov 2. skupiny>
 <option>Položka 1</option>
 <option>Položka n</option>
 </optgroup>
 <select>

Viacriadkový text

<textarea name="textove pole" rows="4" cols="24">Tu napíšte vaše pripomienky</textarea>

 

Postup pri práci : Vytvorte html dokument a php skript tak, aby spĺňal podmienky úlohy