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

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá