Prvky formulára
V tejto kapitole si povieme niečo viac o prvoch formulára, pretože táto oblasť je najmä pri zložitejších webstránkach/systémoch kľúčovou. Vráťme sa na chvíľu ešte k poslednému predstavenému prvku v poslednej kapitole, k radio buttonu. Na záver sme si povedali, že musí mať vyplnenú hodnotu name, aby sa vedelo, ktorý radio button (prázdny krúžok) je s čím prepojený. V nasledujúcej ukážke budeme mať tri skupiny radio buttonov, aby ste to lepšie pochopili. V prvej pri inputoch nepoužijeme atribút name, čo bude znamenať, že každý radio button bez tohto atribútu ako keby bol zodpovedný sám za seba, resp. nebol s nikým iným prepojeným. Každý jeden input bez tohto atribútu je sám sebou skupinou. To znamená, že jeho hodnota sa neodzrkadľuje na žiadnom inom inpute. Je to ako keby bolo na rádiu koliečko len s jednou možnosťou. Ak je na ňu nastavené, žiadna iná nie je vypnutá, pretože tam žiadna iná nie je. V druhej a tretej skupine budú inputy s dvomi rôznymi hodnotami atribútu name, aby ste videli, že pomocou tohto atribútu rozlišujeme rôzne skupiny radio buttonov:
<h2>Ktory jazyk viete najlepsie?</h2>
<form>
<p>
<span>HTML</span>
<input type="radio">
<span>CSS</span>
<input type="radio">
</p>
</form>
<h2>Ktory jazyk viete najlepsie?</h2>
<form>
<p>
<span>HTML</span>
<input name="najlepsi_jazyk" type="radio" checked>
<span>CSS</span>
<input name="najlepsi_jazyk" type="radio">
<span>PHP</span>
<input name="najlepsi_jazyk" type="radio">
</p>
</form>
<h2>Ktory jazyk viete najhorsie?</h2>
<form>
<p>
<span>HTML</span>
<input name="najlepsi_jazyk2" type="radio">
<span>CSS</span>
<input name="najlepsi_jazyk2" type="radio" checked>
<span>PHP</span>
<input name="najlepsi_jazyk2" type="radio">
</p>
</form>
Poďme si ešte vysvetliť zopár vecí. Všimnite si, že v prvej skupine dvoch inputov, ktoré nemajú nastavený atribút name, sú obidva inputy na začiatku neoznačené (nezaškrtnuté, nevybraté), ale v druhej skupine je na začiatku zaškrtnutá nejaká možnosť. To, čo je na začiatku zaškrtnuté, určuje atribút checked, ktorý sme vložili do možnosti HTML v druhej skupine a CSS do možnosti tretej. Ako vidíte, tento atribút nemá hodnotu (=“hodnota“), je použité iba jeho meno. Tento atribút znamená, že daná možnosť (radio button) bude na začiatku vybratá (checked). Podľa mňa by mal byť z každej skupiny radio buttonov (inputov s rovnakým name) aspoň jeden na začiatku nastavený (checked), pretože tak je to aj v reálnom svete, aj na rádiu je koliečko vo väčšine otočené na jednej z možností, ale samozrejme nie je to chyba, je to vec názoru... Druhá vec, na ktorú by som rád upozornil je, že keď kliknete na nejakú možnost v druhej alebo tretej skupine, vždy sa tá daná možnosť označí ako vybratá a ostatné sa vypnú. Po kliknutí sa spustí mechanizmus, ktorý nájde všetky inputy s rovnakým menom tohto typu a odznačí ich. Ak však klikneme na input z prvek supiny, ostane označený a už sa nedá vypnúť. Toto správanie je logické, pretože tento element nemá meno, takže neexistuje žiadný iný s rovnakým menom, ktorý by sa mohol zapnúť a tento prípadne vypnúť.
Dúfam, že sme radio button pochopili a poďme si ukázať aj iné prvky, ktoré môžeme vo formulároch použiť. Ďalší prvok, ktorý si predstavíme, má v podstate rovnakú funkciu (správanie, mechanizmus) ako radio button, ale vyzerá na pohľad inak. Tiež obsahuje viacero možností, z ktorých je možné vybrať len jednu. Pravdupovediac, najväčší problém pri písaní týchto článkov mi robí prekladať odborné názvy do slovenčiny, no a v tomto prípade som už úplne bezradný, že ako sa mám pri tomto elemente vykoktať :-D Jedná sa o vysúvací zoznam (rolovník možností :-D ) alebo už neviem ako...jednoducho selectovník (select box, drop down list). Jedná sa o element, na ktorý keď kliknete, vysunie sa zoznam viacero možností na výber, z ktorých po kliknutí sa vyberie jedna, čiže selectovník sa nastaví na jednu hodnotu. Rozdiel oproti radio buttonu je, že ak je tých možností viacej, selectovník je vhodnejší, pretože vizuálne zaberá v podstate len jeden riadok, na ktorom sa sám nachádza a všetky možnosti sú schované, zobrazia sa až po kliknutí. Odlišuje sa však v zápise v kóde.
Pri elemente input sme pre každú možnosť (option) pri checkboxe a radio buttone zapisovali samotný tag input s príslušnou hodnotou atribútu type (každý checkbox na zaškrtnutie alebo „bodka“ radio buttona). Tento prvok má troška odlišný zápis. Hlavný párový tag určujúci tento element má názov select (vybrať) a v jeho vnútri sa definujú jednotlivé možnosti (options). Každá možnosť je definovaná párovým tagom option, ktorého obsah (priestor medzi otvárajúcim tagom a zatvárajúcim) je text, ktorý sa zobrazuje v zozname možností. Podobne ako pri radio buttone, aj tu je možnosť určiť dopredu prednastavenú (vybratú/označenú – selected) možnost pomocou atribútu selected. V nasledujúcej ukážke si ukážeme dve najbežnejšie použitia tohto elementu, v prvom nepoužijeme atribút selected a použijeme aj ako keby prázdnu hodnotu, ktorá sa zobrazuje na začiatku (vyberte) a v druhom použijeme atribút selected bez prázdnej hodnoty:
<h2>Ktory jazyk viete najlepsie?</h2>
<form>
<p>
<select>
<option>---Vyberte---</option>
<option>HTML</option>
<option>CSS</option>
<option>PHP</option>
</select>
</p>
</form>
<h2>Ktory jazyk viete najlepsie?</h2>
<form>
<p>
<select>
<option>CSS</option>
<option>PHP</option>
<option selected>HTML</option>
</select>
</p>
</form>
Na zadávanie textu sme si ukázali na začiatku textový element – input (type=''text''). Tento element sa vo väčšine využíva na zadávanie krátkych textov ako je meno, priezvisko, používateľské meno (username), heslo, adresa a podobne. Naznačuje to aj defaultný rozmer tohto elementu, rámček na zadanie textu je relatívne malý, zobrazuje len niekoľko znakov (písmen), pre dlhší vstup (nami zadaný text) je pre zobrazenie/prečítanie nutné posúvať sa šípkami(teda pokiaľ nie je jeho rozmer väčší – upravené jazykom CSS). Okrem toho je tento element jednoriadkový, takže pre zadanie dlhších textov, resp. textov s formátovaním (kde sú použité prázdne riadky, nové riadky, odsadenia, odrážky, číslovania a podobne), nie je vhodný. Na zadávanie takýchto zložitejších vstupov (dlších textov alebo textov s formátovaním) existuje špeciálny formulárový prvok s názvom textarea (priestor pre text), ktorý je defaulnte väčší ako input a jeho rozmer zaberá viacej riadkov. Okrem iného sa defaultne dá jeho rozmer zväščiť, čiže sa dá zväčšiť aj jeho šírka a výška podobne ako keď sa rozťahuje/sťahuje okno programu v operačnom systéme. Využíva sa na dlšie texty vo webstránkach ako sú komentáre, text článku, blogu, maily a podobne. Aj keď sme si povedali, že je väčší ako input, jeho základné (defaultné) nastavenia ho až takým veľkým nerobia. Na zadanie jeho rozmeru slúžia dva atribúty, s ktorým sme sa ešte nestretli, doteraz sme na rozmer niektorých elemtnov používali atribúty height a width. V tomto prípade sa používajú atribúty, pomocou ktorých určujeme, koľko riadkov, resp. stĺpcov sa má zobraziť. Počet riadkov určuje atribút rows (row – riadok) a jeho číselná hodnota určuje, koľko riadkov sa na začiatku (pred menením veľkosti textarea pomocou pravého dolného rohu) zobrazí. Druhý atribút určujúci šírku tohto elementu má meno cols (col – column – stĺpec) a jeho hodnota určuje počet stĺpcov, ktoré sa na začiatku zobrazia. Jeden stĺpec pri textarea zodpovedá jednému znaku (písmeno, medzera, číslo atď.), ktoré sa zobrazí. Takže ak použijeme tento element s rozmermi napríklad rows=''3'' cols=''4'', zobrazia sa tri riadky a šírka elementu bude na 4 znaky, takže napríklad sa zobrazí celé slovo Ahoj. Poďme si to ale vyskúšať, všimnite si, že textarea podobne ako element pre zachováva formátovanie obsahu tagu, tažke zachová počet medzier, nové riadky a podobne:
<div>
<form>
<textarea rows="10" cols="60">
Toto je nejaky dlhy text!
Zacinem ale uz na novom riadku. Skuste elementu menit rozmer pomocou praveho dolneho rohu.
</textarea>
</form>
</div>
Na záver tejto kapitoly si ukážeme ešte dva atribúty, ktoré sa dosť často používajú a poznáte ich aj vy z bežného používania webstránok. Určite ste sa stretli s tým, že ste vyplňovali nejaký formulár a v niektorých položkách (chlievikoch/inputoch) už bola zadaná dopredu nejaká hodnota. Táto hodnota bola s najväčšou pravdepodobnosťou tá, ktorá sa očakávala alebo ju bolo nutné len trocha pozmeniť. Je to akokeby nástroj, aby používateľovi napovedal, čo tam asi má byť vyplnené alebo aj nástroj na uľahčenie práce používateľovi, aby nemusel zadávať všetky hodnoty do unputov, ktoré sú predom jasné (je jasné, čo tam bude asi vyplnené). To, čo sa v elementoch na začiatku (pri načítaní stránky) nachádza (text, ktorý sa zobrazuje), sa zadáva ako hodnota atribútu value (value – hodnota). Okrem tohto existuje ešte jeden atribút, ktorý má podobné správanie, jeho význam je však jediný a to je našepkať, resp. pomôcť používateľovi vyplniť danú položku. Hodnota tohto atribútu by mala byť akokeby ukážka hodnoty, ktorá sa očakáva. Používa sa najmä v prípadoch, kedy je nejaká položka nejasná a je možné, že používatelia nemusia pochopiť, čo tam majú vyplniť. Alebo aj keď sa očakáva nejaký predpísaný formát položky, ako napríklad iba čísla a podobne, pomocou hodnoty tohto atribútu je možné o tejto skutočnosti informovať alebo predpísať formát hodnoty, aký sa očakáva (napríklad tvar deň.mesiac.rok a podobne). Tento text sa zobrazuje v elementoch šedou farbou a vyznčauje sa tým, že akonáhle začneme zadávať hodotu do položky (začneme písať), tento text zmizne a bude sa zobrazovať už len náš vstup (nami zadaný text). Meno tohto atribútu je placeholder (náhrada textu). V nasledujúcej ukážke si ukážeme praktické využitie týchto dvoch atribútov:
<form>
<p>
<span>Prihlasovacie meno</span>
<input type="text" placeholder="Ferko">
</p>
<p>
<span>Priezvisko<span>
<input type="text" placeholder="Mrkvicka">
</p>
<p>
<span>Mate nad 18 rokov?<span>
<input type="text" value="Ano">
</p>
<p>
<span>Zadajte datum narodenia<span>
<input type="text" placeholder="V tvare den.mesiac.rok">
</p>
</form>