Formuláre

Určite ste už nespočetne veľakrát v živote vyplňovali papiere, ktoré obsahovali položky (rámčeky), do ktorých ste museli niečo vpisovať alebo ste museli zaškrtnúť vhodnú možnosť z viacerých a podobne. Či to už boli prihlášky, žiadosti alebo testy, určite ste sa s tým stretli. Taký papier, ktorý obsahuje takéto položky na vyplnenie od vás – používateľov, sa volá formulár. Niečo podobné existuje aj na webstránkach a element na to určený sa volá rovnako – form (formulár). Je to párový tag, podobný ako tabuľka, ktorý ohraničuje priestor pre svoje prvky (prvky formulára, podobne ako tabuľka obsahuje riadky, ktoré obsahujú bunky a tie ďalej obsahujú niečo iné..). Týchto prvkov je viacero a zopár si z nich ukážeme v tejto kapitole.

Aby ste mali jasno o čo sa jedná, predstavte si webstránky, po ktorých štandardne surfujete každý deň. Spomeňte si na momenty na vašich stránkach, kedy vy ako používateľ/čitateľ stránky niečo robíte, resp. vykonávate nejakú interakciu so stránkou. Takou interakciou môže byť vykonávanie činnosti s nejakým elementom na stránke pomocou klávesnice alebo myši, ako je zaškrtnutie nejakej možnosti z viacerých, vpísanie textu niekam, odoslanie niečoho (kliknutie na tlačítko) a podobne. Medzi také praktické prípady patrí napríklad prihlásenie sa na ktorúkoľvek stránku. Jedná sa o dva rámčeky, kde vpíšete svoje prihlasovacie meno a heslo a následne kliknete na tlačítko prihlásiť. Alebo píšete nejaký komentár k nejakému článku, vypíšete svoje meno, text komentára a odošlete. Alebo na Facebooku napíšete nejaký status a dáte uverejniť príspevok. Všetky toto, do čoho píšete a na tlačítka, ktoré klikáte, sú prvky formulára.

Doteraz sme si ukazovali len elementy, ktoré niečo na webstránke zobrazujú. Vo väčšine zobrazujú to, čo je v kóde napísané, čiže text, obrázok alebo zobrazujú niečo z externého zdroja (inú webstránku, obrázok, načítaný text atď.). Neriešili sme doteraz žiadne elementy, kedy vy ako používateľ alebo čitateľ stránky môžete niečo s nimi robiť, resp. môžete s nimi vykonať nejaké akciu (odoslanie). Dá sa povedať, že drvivá väčšina elementov, kde môže používateľ niečo vpísať alebo zaškrtnúť, sú prvky formulára a každá taká časť webstránky, kde sa také elementy nachádzajú, je samotným formulárom, čiže obsahuje tag form.

Úplná podstata tohto celého je podobne ako na papierových formulároch, vpísať nejaké informácie. Informácie, ktoré vpisujete do papierového formulára, sú vo svojej podstate nejaké dáta. Tým, že ich vpíšeme na papier a ten papier niekde pošleme, tak odosielame dáta niekam na spracovanie. Na toto isté slúžia formuláre na webstránkach. Všetko, čo zaškrtnete alebo vpíšete, sú v podstate dáta, ktoré sa vo väčšine po kliknutí nejakého tlačítka niekam odošlú na spracovanie. Od vás idú teda dáta cez webstránku niekam inam. Ako idú, kam idú, kde sa uložia a ako sa potom načítavajú a spracovávajú sa dozvieme neskôr v jazyku PHP. Teraz sa tým nejdeme zaoberať, len som chcel podotknúť, že aké to má pozadie a význam. Verte mi, že keď budeme preberať túto časť, tak potom to pre vás bude strašne zaujímavé a záživné. Vtedy sa stretnete so skutočným významom programovania, pretože už budeme pracovať s dátami, čo je hlavný význam informačných systémov ako takých.

Vráťme sa ale k prvkom formulára. Ako sme si povedali, ich hlavný význam je zbierať (zachytiť) informácie/dáta/vstupy (input – vstup) od používateľa (user – používateľ). Podľa posledného vysvetlenia sa odvádza aj názov základného prvku formulára a to je input (vstup). Tento nepárový element má viacero podôb, ktoré sa určujú atribútom type (typ). Základná (defaultná) hodnota tohto atribútu je text (type=''text''), ktorý slúži na zachytenie textu od používateľa. Je to ten štandardný rámček, do ktorého sa vpisuje krátky text, ako napríklad pre prihlasovanie sa. Už sme ale dosť kecali, poďme si dať krátku ukážku, aby sme pred vysvetlením iných prvkov mali predstavu, o čom sa tu vlastne bavíme. V nasledujúcom príklade si ukážeme príklad jednoduchého formulára, ktorý bude obsahovať dva prvky typu input textového charakteru. Všimnite si, že prvý element input sme použili bez atribútu type s hodnotou text a vyzerá ajtak rovnako, pretože ako sme si povedali, jeho defaultná podoba je, že to je textový input:

<h2>Nas formular</h2>
<form>
     <p>
          <span>Prihlasovacie meno</span>
          <input>
     </p>

     <p>
          <span>Heslo</span>
          <input type="text">
     </p>
</form>

Skúste si do vami vytvorených inputov kliknúť a niečo vpísať a uvidíte, že to je presne to isté, čo už tak dlho používate. Všimnite si aj, že medzi inputmi na stránke je možné pohybovať sa (prepínať) pomocou klávesy tab (tabulátorom). Možno vám prišlo divné, že text, ktorý vidíte v poli pre heslo je viditeľný (čitateľný) a že takto to nie ste zvyknutý vídať. Text v poli určenom pre heslo býva nečitateľný, resp. maskovaný, vo väčšine sa namiesto znakov v texte zobrazujú bodky. To vieme dosiahnuť pomocou hodnoty password (heslo) atribútu pre typ inputu (type). Táto hodnota zaručí, že input bude vyzerať rovnako ako textový input, len text v ňom bude maskovaný. Presne tento element tohto typu je na toto určený. Ďalšia základná hodnota atribútu type je submit (postúpiť, podať, nateraz je pre nás správny preklad odoslať), ktorá nám vo formulári zobrazí prvok pre odoslanie celého formulára (na ktorý sa dá kliknúť). Poznáte to najmä ako tlačítko s textom odoslať (send) alebo prihlásiť (log in). Pomocou jeho textového atribútu value (hodnota) určujeme text, ktorý sa zobrazuje na tlačítku. V nasledujúcej ukážke náš pôvodný príklad obohatíme o takéto tlačítko a z druhého inputu spravíme input pre heslo. Upozornil by som na fakt, že po klikutí tlačítka sa vám nezobrazí nič. Je to preto, pretože po kluknutí tlačítka sa stránka niekam presmeruje, pretože dáta sa posielajú niekam. Niečo podobné, ako v prípade odkazu (href). Teraz sa však s dátami ešte nezaoberáme a ani si nejdeme preto vysvetlovať zadávanie cieľa, kam by sa mali dáta posielať... :

<h2>Nas formular</h2>
<form>
     <p>
          <span>Prihlasovacie meno</span>
          <input type="text">
     </p>

     <p>
          <span>Heslo</span>
          <input type="password">
     </p>
     <p> 
          <input type="submit" value="Prihlasit">
     </p>
</form>

Ďalší často používaný formulárový element je prvok na zaškrtávanie (checkbox). Poznáte ho ako malý štvorček, ktorý sa vo väčšine nachádza vo formulári spolu s ostatnými prvkami (text, tlačítko...), do ktorého keď kliknete, tak sa zaškrtne (spraví sa krížik do jeho vnútra, celý sa vyfarbí alebo sa vyfarbí alebo je odchecknutý - odfajknutý). Jeho zaškrtnutie, resp. nezaškrtnutie značí väčšinou zapnutie/vypnutie nejakej vlastnosti, slúži často ako prepínač medzi dvomi možnosťami (áno, nie), či daná vlastnosť platí alebo nie. Z praxe ho poznáte najčastejšie pri prihlasovaní, kde pri dvoch textových inputoch pre meno a heslo býva často jeden checkbox, či chcete, aby bolo prihlásenie zapamätané. Ak je checkbox zaškrtnutý, tak to platí a keď nie, tak sa prihlásenie nezapamätá. Iné časté využitie je napríklad pri vypĺňaní profilov, kde pri výpise viacerých možností zaškrtávate tie, ktoré s vami súvisia. Poďme si to ale vyskúšať, v tomto prípade teda použijeme hodnotu atribúty type checkbox:

<h2>Ktore jazyky ovladate?</h2>
<form>
     <p>
          <span>HTML</span>
          <input type="checkbox">
          <span>CSS</span>
          <input type="checkbox">
          <span>PHP</span>
          <input type="checkbox">
          <span>MySQL</span>
          <input type="checkbox">
     </p>
</form>

Posledný typ elementu input, ktorý si ukážeme v tejto kapitole, je tzv. rádiový prepínač (radio button). Poznáte to ako prepínač, kedy môžete vybrať len jednu z uvedených možností, podobne ako na rádiu, keď ste napríklad prepínali stanice alebo ladili frekvenciu. Tento element je podobný ako checkbox, líši sa však tým, že môže obsahovať vždy len jednu vybratú možnosť (option). Nemôže byť zaškrtnutých/vybratých viacej možností ako pri checkboxe, ale vždy len jedna, je to v podstate ako koliečko na rádiu, ktorým otáčame a vyberáme jednu možnosť. Pre jeho zobrazenie musí byť hodnota atribútu type nastavená na hodnotu radio. Upozornil by som na to, že tento typ elementu input musí mať vždy nastavenú ešte hodnotu atribútu name. Každá možnosť rádio tlačítka musí mať svoje meno, aby sa vedelo, ktorá možnosť s ktorou súvisí, resp. aby sa vedelo, že ak mám tri možnosti v radio button, aby bolo jasné, že sú prepojené. Čiže ak vyberiem jednu možnosť, tak aby sa ostatné odškrtli. Po kliknutí na nejakú možnosť sa hľadajú všetky radio buttony s rovnakým menom a odškrtnú sa:

<h2>Ktory jazyk viete najlepsie?</h2>
<form>
     <p>
          <span>HTML</span>
          <input name="najlepsi_jazyk" type="radio">
          <span>CSS</span>
          <input name="najlepsi_jazyk" type="radio">
          <span>PHP</span>
          <input name="najlepsi_jazyk" type="radio">
          <span>MySQL</span>
          <input name="najlepsi_jazyk" type="radio">
     </p>
</form>