Spracovanie formulára

Spomeňte si na sekciu jazyka HTML, v ktorej sme si preberali element formulár. Predstavili sme si aj niekoľko jeho prvkov, ktoré môže obsahovať a slúžia na rôznu formu zadania dát pre používateľa. Predstavili sme si textový input, radio button, selectovník a textareu. Pomocou každého takéhoto elementu vieme zadať nejakú hodnotu, ktorá sa po odoslaní formulára posiela na danú webstránku. Toto je hlavná funkcia formulára, je to v podstate najbežnejšia forma – cesta, akou používateľ posiela/zadáva nejaké údaje – dáta webstránke, ktorá je schopná následne s nimi pracovať. Pri predstavovaní formulára a jeho prvkov sme si však nepovedali všetko, čo potrebujeme na jeho plné využitie.

 

Na to, aby sme mohli pomocou formulára odoslať dáta, je potrebné, aby obsahoval tlačítko (element) na odoslanie (submit – podať, postúpiť), pomocou ktorého vieme túto udalosť vyvolať. Toto tlačítko je reprezentované tagom input, ktorého hodnota atribútu type je submit. Pri deklarácii tagu form vieme pomocou dvoch atribútov na to určených zadať, kam sa majú dáta odoslať a akou formou. Existujú dve formy odoslania dát pomocou formulára, na začiatok použijeme prvú, ktorú budeme zachýtvať podobne ako v predošlej kapitole. Atribút pre zadanie formy nesie meno method (metóda) a jeho hodnota bude nateraz get. Hodnota tohto atribútu určuje, ako bude možné následne posladné dáta zachytiť. My sme sa naučili v predošlej kapitole získať/načítať dáta pomocou premennej get, takže použijeme túto metódu. Atribút, ktorý určuje, kam sa dáta odošlú nesie názov action (akcia) a jeho hodnotou je URL adresa stránky, na ktorú sa dáta odosielajú a na ktorú budeme zároveň presmerovaný.

 

Okrem týchto vecí je dôležitá ešte jedna vec. Keď sme zadávali parametre v URL, definovali sme ich identifikátor a hodnotu. Hodnotu v tomto prípade zadefinuje používateľ pomocou prvku formulára (to čo zadá – vpíše/označí/vyberie), ale jeho názov určujeme my. Slúži na to atribút name (meno), ktorý je potrebné zadať pri každom prvku, inak sa k danej hodnote následne nedostaneme. Práve túto hodnotu budeme zadávať ako index v premennej get, aby sme sa k danej hodnote dostali. Poďme si to spolu vyskúšať na našom projekte. Aby to bolo jednoduchšie, formulár vložíme do súboru index.php a aj pri odoslaní budeme volať túto istú stránku, takže sa v nej budeme snažiť aj zachytiť údaje:

 

Index.php:

<body>
    <h1>Vitajte na domovskej stranke!</h1>
    <?php include "menu.html";?>

    <h2>Formular</h2>
    <form action="index.php" method="get">
        <input type="text" name="user_name">
        <input type="text" name="user_surname">
        <input type="submit">
    </form>

    <?php

    if($_GET['user_name'] || $_GET['user_surname']){
        echo 'Meno pouzivatela je : <b>'.$_GET['user_name']. '</b> a priezvisko : <b>'.$_GET['user_surname'].'</b>.';
    }

    ?>
</body>

 

Načítajte si stránku index.php (bez parametrov). Všimnite si, že sa na stránke nachádzajú dva inputy (s menami user_name, user_surname) a vedľa nich je tlačítko pre odoslanie formulára. Defaultne sa v ňom zobrazuje text submit query (posunúť otázku/dopyt). V URL nie je vidieť žiadne parametre, pretože sme si načítali stránku bez parametrov. Všimnite si kód pod formulárom. Pýtame sa v podmienke if, či je niečo v premennej get s indexom user_name alebo user_surname. Keďže sme stránku načítali bez parametrov z URL a zároveň sme stránku nenačítali tým, že sme odoslali formulár, resp. sme sa nedostali na stránku presmerovaním z odoslania formulára, obsah premennej musí byť prázdny, pretože nemala skade načítať dáta, resp. nemali jej byť skade poslané. Preto sa príkaz v podmienke nespustí, pretože podmienka nie je splnená, premenná get je úplne prázdna. Náš formulár je možné odoslať dvomi spôsobmi, buď kliknutím na submit tlačítko alebo stlačením klávesy enter, ak sa nachádzame vo formulári. Vo formulári sa nachádzame vtedy, ak sme nastavený na nejaký jeho input, v našom prípade, ak klikneme myšou do jedného z inputov. Všimnite si, že po kliknutí do inputu sa v prehliadači graficky zvýrazní a zároveň nám v ňom bliká kurzor pre písanie, to indikuje, že je daný input aktívny. Medzi inputmi sa vo väčšine dá pohybovať aj pomocou klávesy tabulátor.

 

Skúste si najprv formulár odoslať prázdny a všimnite si, čo sa stane. Po odoslaní formulára sa nám načíta znova naša stránka, pretože sme ju zadali v parametri action (jej URL adresu) a vizuálne sa nič nezmenilo. Pozrite sa ale na našu URL adresu teraz, za identifikátorom index.php sa nachádzajú dva parametre, ktoré reprezentujú prvky nášho formulára. Akonáhle je formulár odoslaný, všetky parametre sa zobrazujú v URL aj s ich hodnotami. V tomto prípade sme nezadali žiadne dáta, takže ich hodnoty sú prázdne, nie je v nich nič. Keďže je to tak, opäť sa nespustí príkaz v našej podmienke. Skúste si teraz pre zmenu zadať meno Janko do prvého inputu a Mrkvicka do druhého a stlačte enter. V tomto prípade budú naše zadané hodnoty viditeľné v URL adrese a taktiež sa spustí príkaz v ife, pretože podmienka je splnená, jeden z parametrov obsahuje hodnotu. Ako je vidieť vo výpise, pomocou formulára sme si skutočne poslali nami zadané dáta – hodnoty, zachytili sme ich a mohli sme v kóde s nimi čokoľvek spraviť.

 

Je dôležité si uvedomiť, ako to funguje. My máme načítanú stránku na svojom počítači v HTML, do ktorej vpíšeme dáta. Po stlačení tlačítko submit alebo stlačení klávesy enter odosielame tieto dáta na server, na stránku zadanú v action, čiže na index.php. Tam sa spustí kód tohto súboru, ktorému prídu nami poslané dáta. Po vykonaní PHP kódu serverom sa vygeneruje kód HTML, ktorý je spätne poslaný nám – používateľovi do prehliadači, kde sa zobrazí výsledok. Toto je základ komunikácie s dátami, my odosielame na server, tam sa to spravuje a vráti sa nám odpoveď.

 

Všimnite si, že ak našu stránke refreshneme, tak parametre v URL ostávajú, tým pádom sa spustí aj náš príkaz v podmienke. Ak však klikneme na položku Domov z menu, príkaz sa nespustí, pretože daný odkaz spúšťa stránku index.php bez parametrov, takže premenná get bude prázdna. Skúsme si našu jednoduchú ukážku troška upraviť, aby to aj nejako vyzeralo ako skutočný formulár:) V prvom rade vás asi napadlo, že by sme mali zmeniť text tlačítka submit na nejaký Slovákom zrozumiteľnejší. Hodnotu – text zobrazený na tlačítku sa dá nastaviť pomocou atribútu value (hodnota). Pomocou tohto atribútu môžeme nastaviť počiatočnú hodnotu prvku formulára. Počitatočnou hodnotou myslíme jeho defaultnú hodnotu, resp. tú, ktorú budeme mať nastavenú pri načítaní stránky. To sa využíva v prípade, ak chceme nejakú hodnotu používateľovi predvyplniť, ak sa napríklad nejaká hodnota často opakuje alebo aby dopísal iba zvyšnú časť požadovanej hodnoty. Napríklad telefónne číslo ak vieme, že bude len v nejakom meste, tak môžeme predvyplniť predvoľbu a zvyšok dopíše používateľ. Druhý prípad, kedy vypĺňame hodnotu inputov je v prípade nesprávne vyplneného formulára. Určite ste sa stretli s tým, že ste vypĺňali nejaký formulár a zabudli ste vyplniť jednu z povinných položiek alebo ste nejakú hodnotu nezadali správne. Formulár sa vám neodoslal, znova sa vám načítal s vami zadanými hodnotami a zobrazil vám hlášku, že máte niečo vyplnené zle. V našej ďalej ukážke budeme považovať náš formulár za stále zle vyplnený, aby sme si ukázali ako predvyplniť dáta.

 

Okrem atribútu value si v nasledujúcej ukážke vyskúšame ešte jednu novú vec. Určite ste si všimli, že náš formulár z poslednej ukážky bol dosť suchý, resp. tam určite chýbalo pomenovanie jednotlivých inputov, akési menovky, čo daná položka znamená. Tento nápomocný text je možné zadať ľubovoľným spôsobom, iba ako jednoduchý text pred tag, ako span, ako div, jendoducho...ako sa nám zachce. Najlepší ale spôsob je použiť na to formulárový element s názvom label (menovka). Tento element neurobí nič špeciálne, iba obalí daný text, ktorý sa bude nachádzať v tagu, čiže bude naň ľahšie aplikovať nejaký štýl. Jednu vymoženosť ale predsa len má a tou je atribúť s názvom for (pre). Tento atribút akoby vyjadroval určenie danej menovky – popisuje, pre ktorý prvok formulára je daná menovka určená. Na to, aby mohol byť label prepojený s nekaým prvokm, musí mať daný prvok zadanú hodnotu atribútu id, vo väčšine to býva to isté čo v atribúte name a túto hodnotu musí obsahovať atribút for v prvku label. Toto prepojenie zabezpečí rôzne správanie pri rôznych elementoch, ktoré má uľahčiť prácu – vypĺňanie formulára používateľovi. Pri textovom inpute po kliknutí na label sa rovno zobrazíme v príslušnom prvku – input bude aktívny a kurzor bude v ňom. Pri inpute typu radio button sa napríklad po kliknutí na label označí daná možnosť z inputu a nie je nutné triafať myšou konkrétne do malej bodky prisluchájucej danú možnost radio buttonu. Poďme si atribút value a prvok label vyskúšať:

 

index.php:

<h2>Formular</h2>
<form action="index.php" method="get">
    <label for="user_name">Meno</label>
    <input type="text" name="user_name" id="user_name" value="<?php echo $_GET['user_name'];?>"><br><br>

    <label for="user_surname">Priezvisko</label>
    <input type="text" name="user_surname" id="user_surname" value="<?php echo $_GET['user_surname'];?>"><br><br>
    <input type="submit" value="Odoslat">
</form>

 

Keď si načítate ukážku, skúste poklikať striedavo na menovky (labely) inputov. Po každom kliknutí by sa mal stať príslušný input aktívny. Aby sme toto docielili, máme vyplnené atribúty id u inputu a for pri labeli tou istou hodnotou. Vyplňte inputy a odošlite formulár. Všimnite si, že hodnota, ktorú sme zadali, ostala v inpute. Je to preto, pretože sme naše hodnoty poslali na server, v kóde PHP sme ich vyplnili do atribútu value pri inputoch a poslali sme späť (zo servera používateľovi) kód HTML. Všimnite si, akým spôsobom sme museli vypísat hodnotu premennej get. Keďže sme sa nachádzali v kóde HTML, museli sme obaliť kód PHP a jednoduchým príkazom echo sme danú hodnotu vypísali do kódu HTML.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - global.css

.pretty{
color: black;
text-decoration: none;
border: 3px solid green;
background-color: white;
text-align: center;
padding: 10px 50px;
}

.pretty:hover{
background-color: green;
color: white;
border: 3px solid blue;
}

.pretty:active{
background-color: yellow;
color: blue;
border: 3px solid blue;
}

2 - index.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<h1>Vitajte na domovskej stranke!</h1>
<?php include "menu.html";?>

<h2>Formular</h2>
<form action="index.php" method="get">
<label for="user_name">Meno</label>
<input type="text" name="user_name" id="user_name" value="<?php echo $_GET['user_name'];?>"><br><br>

<label for="user_surname">Priezvisko</label>
<input type="text" name="user_surname" id="user_surname" value="<?php echo $_GET['user_surname'];?>"><br><br>
<input type="submit" value="Odoslat">
</form>

<?php

if($_GET['user_name'] || $_GET['user_surname']){
echo 'Meno pouzivatela je : <b>'.$_GET['user_name']. '</b> a priezvisko : <b>'.$_GET['user_surname'].'</b>.';
}

?>
</body>
</html>

3 - menu.html

<a href="index.php" class="pretty">Domov</a>
<a href="page2.php?param1=Ahoj&param2=svet" class="pretty">Stranka 2</a>

4 - page2.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>

<h1>Vitajte na stranke 2!</h1>
<?php include "menu.html";?>

<h2>Zoznam ziakov</h2>
<?php

//deklaracia pola
$pole = array("Jano", "Fero", "Lujza", "Barbora", "Michal", "Lenka", "Katarina", "Peter", "Jozef", "Karol");
$dlzka_pola = count($pole); //zistenie dlzky pola

//moznosti vypisu uvodzoviek
// echo "<table border='1'>";
// echo '<table border=''1''>';
echo "<table border=\"1\">";

for($i = 0; $i < $dlzka_pola; $i = $i + 1){
//pre kazdy prvok pola vypiseme jeden riadok tabuky
echo "<tr><td>".($i + 1)."</td><td>".$pole[$i]."</td></tr>";
}

echo "</table>";

echo $_GET["param1"]." ".$_GET["param2"]."!";
?>


</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

formularformular dataformular getzachytenie formularanacitanie formularasend formposlanie formularaphp formularspracovanie formulara

IT ftip

Dievča vo FastFoode: Môžem si zaznačiť vašu objednávku? Ja: Číslo 6, BBQ, diétna cola, debetnou kartou. DvFF: Akú si želáte omáčku? Ja: BBQ, diétna cola, debetnou kartou. DvFF: Čo na pitie? Me: Diétna cola, debetnou kartou. DvFF: Môže byť Pepsi? Ja: Jasné. Platím debetnou kartou. DvFF: A ako budete platiť? Ja: [vzdychajúc] debetnou kartou.