Image
15.6.2016 0 Comments

Vytvárame WWW stránky / 7. časť

Späť na úvod >> Späť na seriál

Táto časť nášho seriálu sa bude tak ako tá predchádzajúca venovať formulárom a práci s nimi.

Pole pre vstup hesla
Určite každý z nás pozná starú „fintu“ Windows, ktorá pri zadávaní hesla do nejakého vstupného poľa zobrazuje len hviezdičky. Slúži na to, aby vám nikto spoza chrbta neodpozoroval vaše heslo. To sa dá, samozrejme, obísť, ale tento seriál je o niečom inom. V HTML sa pole pre vstup hesla správa rovnako ako textové pole, iba s už spomínaným zobrazením hviezdičiek. Takéto pole vytvoríte parametrom type, ktorý bude mať hodnotu password. Ostatné atribúty sú rovnaké.

Toto heslo môže byť odhalené napríklad pri posielaní formulára elektronickou poštou, keď sa stačí iba pozrieť do správy. Asi najbezpečnejší je protokol HTTPS.

Príklad:
Heslo: <INPUT type="password" name="uzivheslo" size=20 maxlength=45 accesskey="a" align="left">

Teraz prejdeme k trochu praktickejšiemu príkladu. Vytvoríme si formulár, ktorý odošle položky meno, priezvisko, adresa a heslo elektronickou poštou.

<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method="post">
Meno: <INPUT type="text" name="meno" value="" size=15 maxlength=30 align="left"><BR>
Priezvisko: <INPUT type="text" name="priezvisko" value="" size=15 maxlength=30 align="left"><BR>
Adresa: <INPUT type="text" name="adresa" value="" size=30 maxlength=45 align="left"><BR>
Heslo: <INPUT type="password" name="heslo" size=20 maxlength=30 align="left"><BR>
<INPUT type="submit" value=" Odošli ">
<INPUT type="reset" value=" Zmaž" >
</FORM>

Zaškrtávacie polia
Zaškrtávacie pole je vhodné použiť najmä pri otázkach, na ktoré sa dá odpovedať viacerými spôsobmi alebo štýlom áno/nie. Zaškrtávacie pole sa takisto definuje tagom Input a jeho parameter type má hodnotu checkbox. Najpoužívanejšie atribúty sú tieto:

  • name – názov pre skupinu zaškrtávacích políčok. Ak patria všetky políčka do rovnakej skupiny, všetky majú hodnotu parametra name rovnakú.
  • value – hodnota, ktorá sa odošle skriptu, ak je políčko zaškrtnuté. Ak sa formulár odosiela elektronickou poštou, príjemca dostane výsledok všetkých zaškrtnutých tlačidiel v tvare name=value
  • checked – túto voľbu použijeme pre tlačidlo, ktoré má byť zaškrtnuté po zobrazení formulára, pretože je pravdepodobné, že ho používateľ zaškrtne.
  • align – zarovnávanie políčka na stránke (má hodnoty left, right, center).

Všetky atribúty si ukážeme na nasledujúcom príklade. Úlohou formulára bude zistiť, aké počítačové časopisy čítajú naši návštevníci:

<B>Ktoré počítačové časopisy čítate?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post>
<INPUT type="checkbox" name="casopisy" value="pcr" checked>PC Revue<BR>
<INPUT type="checkbox" name="casopisy" value="pcspace">PC Space<BR>
<INPUT type="checkbox" name="casopisy" value="computer">Computer<BR>
<INPUT type="checkbox" name="casopisy" value="chip">Chip<BR>
<INPUT type="checkbox" name="casopisy" value="pcworld">PC World<BR>
<INPUT type="checkbox" name="casopisy" value="ine">Iné<BR>
<INPUT type="submit" value="Odošli data!"><INPUT type="reset" value="Zmaž formulár!"> <BR>
</FORM>

Výsledok :

Prepínacie polia
Prepínacie pole (radio-button) sú polia, z ktorých môže používateľ zvoliť (vybrať) vždy len jednu možnosť. Syntax je podobná zaškrtávacím poliam, líši sa len parametrom type, ktorý má hodnotu radio

Príklad:

<B>Ktorý počítačový časopis považujete za najlepší?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post>
<INPUT type="radio" name="casopisy" value="pcr" checked>PC Revue<BR>
<INPUT type="radio" name="casopisy" value="pcspace">PC Space<BR>
<INPUT type="radio" name="casopisy" value="computer">Computer<BR>
<INPUT type="radio" name="casopisy" value="chip">Chip<BR>
<INPUT type="radio" name="casopisy" value="pcworld">PC World<BR>
<INPUT type="radio" name="casopisy" value="ine">Iné<BR>
<INPUT type="submit" value="Odošli data!"><INPUT type="reset" value="Zmaž formulár!"> <BR>
</FORM>

V dokumente je možné nadefinovať skupiny prepínacích polí, vždy si však dávajte pozor na názov – tlačidlá s rovnakou hodnotou parametra name sa vzájomne ovplyvňujú a nie je možné, aby bolo aktívne viac ako jedno tlačidlo. Pri použití viacerých skupín je nevyhnutné, aby každá skupina mala svoj vlastný názov (name). 

Skrytý prvok
Skrytý prvok nám umožňuje odosielať na spracovanie dáta, ktoré nie sú viditeľné a nevyplňuje ich používateľ. Parameter type má hodnotu hidden, dôležité atribúty sú len name, ktorý obsahuje názov, a value, ktorý obsahuje zadanú hodnotu. Napríklad <INPUT type="hidden" name="formular" value="dotaznik">.

Textové pole s definovanou veľkosťou
V predchádzajúcej časti sme si ukázali, ako vytvoriť textové pole pomocou parametra type=text. Týmto spôsobom však môžeme vytvoriť pole s iba jedným riadkom, čo nie vždy postačuje. Ak chceme napríklad vytvoriť formulár, ktorým budú používatelia vyjadrovať svoj názor na našu stránku, musíme použiť párový element TextArea. Ten má nasledujúce parametre:

  • cols – šírka zadávaná v počte znakov
  • rows – výška zadávaná v počte znakov
  • wrap – spôsob zalamovania textu. Hodnota off znamená, že sa text nezalamuje, hodnota virtual, že sa text zalamuje iba na obrazovke, ale odoslaný je ako jediný riadok a hodnota physical znamená, že sa text zalamuje a odosiela vrátane znakov zalomenia.

Príklad:

<B>Názor na stránku</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk" method=post><BR>
<TEXTAREA cols=40 rows=4 wrap="virtual"></TEXTAREA><BR>
<INPUT type="submit" value=" Odoslať "><INPUT type="reset" value=" Zmazať "><BR>
</FORM>

Záver
Nateraz je to všetko. O mesiac budeme s formulármi pokračovať. Dovtedy si  skúste vytvoriť formulár, ktorý bude obsahovať všetky doteraz opísané prvky, a to textové pole, pole pre zadanie hesla, zaškrtávacie pole, prepínacie pole, skrytý prvok a pole s viacerými riadkami.

 

 

 

Zobrazit Galériu
Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

CES 2017: Lenovo predstavilo nové notebooky ThinkPad X1, Miix 720 a prvý smartfón s podporou Tango - Lenovo Phab 2

03.01.2017 00:09

Lenovo odštartovala ďalší ročník veľtrhu s celou škálou nových produktov. Nová generácia produktov radu ThinkPad X1 Carbon 2017 je najľahším 14-palcovým biznis notebookom, ktorý váži len 1,14kg a obsa ...

Ako na to

Tipy a triky: Ako správne poskytovať IT pomoc a ako o ňu správne žiadať?

14.12.2016 09:40

Či už ste pokročilý používateľ počítača, ktorý často poskytuje IT pomoc známym a rodine, alebo ste to vy, kto o takúto pomoc zvyčajne žiada, ľahko sa stanete nechcenou príčinou frustrácie a obrovskej ...

Ako na to

Tipy a triky: Ako diagnostikovať a opravovať neúspešné upgrady Windows 10

14.12.2016 09:37

Microsoft prešiel s Windows 10 do celkom novej éry vývoja. Namiesto samostatných verzií Windows, vydávaných zvyčajne s odstupom dvoch až piatich rokov (XP, Vista, 7 a podobne), začal svoj systém vyvíj ...

Žiadne komentáre

Vyhľadávanie

qubitconference

Najnovšie videá