Image
15.6.2016 0 Comments

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

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

Aj v tomto pokračovaní nášho seriálu sa budeme zaoberať formulármi. Tentoraz už naposledy, pretože témou júnového pokračovania budú rámce. 

Roletové menu a zoznamy
Na vytváranie roletových menu o zoznamov slúži element SELECT, jednotlivé voľby potom uvádzame tagom Option, ktorý môžeme, ale nemusíme uzatvárať. Jednoduchá štruktúra takéhoto menu môže vyzerať takto:

<SELECT parametre>
<OPTION parametre>možnosť číslo 1
<OPTION parametre>možnosť číslo 2
<OPTION parametre>možnosť číslo 3
.
.
.
<OPTION parametre>možnosť číslo x
</SELECT>

Tag Select má nasledujúce parametre:

  • name – označenie formulárového prvku, ktoré je veľmi dôležité a nesmie sa v jednom formulári vyskytovať viackrát

  • size – určuje, koľko položiek bude súčasne zobrazených; pri klasickom roletovom menu sa nastavuje size na hodnotu 1; ostatné ponúkané možnosti sa zobrazia až pri rozbalení menu

  • multiple – tento parameter nemá žiadnu hodnotu, jeho uvedenie v tagu Select znamená, že používateľ môže vybrať aj viac ako jednu z ponúkaných položiek; môže tak urobiť pridržaním klávesu CTRL alebo Shift a kliknutím na položku 

Tag Option má dva dôležité parametre:

  • selected – určuje, či je položka predvolene vybraná, alebo nie
  • value – meno vybranej položky; tento parameter je dôležitý najmä pre ďalšie spracovanie formulára 

Príklad:

Chceme vytvoriť formulár, ktorého účelom bude zistiť najčastejšie jedávané ovocie. Použijeme roletové menu: prvok pomenujeme ovocie (name="ovocie"), zobrazovať sa bude vždy len jedna položka (size=1) a bude možné vybrať len jednu položku (parameter multiple neuvedieme). Budem predpokladať, že najviac ľudí jedáva jablká, preto bude voľba jablko prednastavená (pri položke jablko bude v tagu Option uvedený parameter selected). Okrem roletového menu bude formulár obsahovať aj tlačidlo na odoslanie:

<FORM name="test" ENCTYPE="text/plain" ACTION="mailto:meno@server.sk">
<B>Aké ovocie jedávate najčastejšie?</B><BR>
<SELECT name="ovocie" size=1>
<OPTION name="slivka">Slivka
<OPTION name="hruska">Hruška
<OPTION name="jablko" selected>Jablko
<OPTION name="broskyna">Broskyňa
<OPTION name="marhula">Marhuľa
<OPTION name="ine">Iné
</SELECT>
<INPUT type="submit" value=" Odošli ">
</FORM>

Výsledok:

Obrázok namiesto tlačidla
Sivé tlačidlo nemusí vždy vyhovovať vášmu estetickému cíteniu. Určite ste si už na niektorých serveroch všimli, že sa namiesto tlačidla používa obrázok s rovnakou funkciou. Pri použití obrázka by ste však mali zvoliť taký, z ktorého je jasné, že slúži na odoslanie formulára. Grafické tlačidlo získame použitím známeho tagu Input s parametrom type=image, obrázok, ktorý chceme použiť ako tlačidlo, určime parametrom src=cesta. V našom predchádzajúcom príklade len upravíme predposledný riadok na  <INPUT type="submit" type="image" src="obrazok.jpg">.

Zlepšené tlačidlo (Button)
Pretože tlačidlo vytvorené pomocou elementu Input neponúka príliš široké možnosti, objavil sa vo formáte HTML 4.0 samostatný tag Button. Ten umožňuje oveľa lepšie špecifikovať vlastnosti tlačidla, do ktorého je možné umiestniť objekty, ako napríklad obrázky, tabuľky, formátovaný text a podobne. Základné parametre:

  • name – meno prvku je dôležité najmä vtedy, ak je tlačidlo viazané na nejaké skripty
  • value – hodnota, ktorá je odovzdaná serveru v okamihu stisnutia tlačidla
  • type – má tri možnosti: submit (odosielanie dát z formulára), reset (vymazanie formulára a nastavenie všetkých polí do predvoleného stavu) a button (tlačidlo, ktoré nevykoná žiadnu akciu s vlastným formulárom, ale vykoná zadaný skript) 
  • disabled – zvolenie tohto parametra spôsobí, že tlačidlo nebude aktívne (nebude sa dať stlačiť)
  • acceskey – definovanie klávesovej skratky, ktorá umožní stlačenie tlačidlá bez použitia myši

Upravený formulár z predchádzajúcej časti bude takýto:

<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>
<BUTTON name="tlacitko" type="submit" acceskey="O">
<B><U>O</U>doslať data k spracovaniu</B><BR>
<FONT COLOR="blue">v tlačítku Button je možné použiť aj farebný text</FONT><BR>
</BUTTON>
</FORM>

a výsledok:

Odoslať dáta na spracovanie
V tlačidle Button je možné použiť aj farebný text.
Okrem farebného textu môžeme do obrázka vkladať aj tabuľky, obrázky a väčšinu prvkov jazyka HTML.

Rámčeky vo formulároch (Fieldset a Legend)
Pri lepšej orientácii môže pomôcť rozčlenenie jednotlivých prvkov formulára do niekoľkých častí. Na to slúžia párové tagy Fieldset a Legend. Fieldset ohraničí všetky prvky vo formulári, ktoré umiestnime medzi úvodným a ukončovacím tagom, tenkým rámčekom, čím ich opticky oddelí. Legend nám ponúka vytvorenie popisu tohto rámčeka. Tag Fieldset nemá žiadne podstatné parametre, pri tagu Legend je podstatné iba zarovnávanie vzhľadom na rámček pomocou parametra align. Hodnoty sú podobné ako pri väčšine prvkov HTML – top (hore), bottom (dole), left (vľavo) a right (vpravo).  Tu je jednoduchý príklad:

<FORM name="test2" ENCTYPE="text/plain" ACTION="mailto:adresa@server.sk">
<FIELDSET>
<LEGEND align="top">Informácie užívateľovi</LEGEND>
Meno: <INPUT type="text" name="meno" size=30 maxlength=45 align="left"><BR>
Priezvisko: <INPUT type="text" name="priezvisko" size=30 maxlength=45 align="left"><BR>
e-mail: <INPUT type="text" name="email" size=30 maxlength=45 align="left"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Konfigurácia počítača</LEGEND>
Procesor:<BR>
<INPUT type="radio" name="procesor" value="pentium4" chcecked>Pentium IV<BR>
<INPUT type="radio" name="procesor" value="pentium3" chcecked>Pentium III<BR>
<INPUT type="radio" name="procesor" value="pentium2" chcecked>Pentium II<BR>
<INPUT type="radio" name="procesor" value="celeron" chcecked>Celeron<BR>
<INPUT type="radio" name="procesor" value="pentiummmx" chcecked>Pentium MMX<BR>
<INPUT type="radio" name="procesor" value="pentium" chcecked>Pentium<BR>
<INPUT type="radio" name="iny" value="pentium" chcecked>Iný<BR>
Modem:<BR>
<INPUT type="checkbox" name="vybava" value="int56" chcecked>Interný 56kB<BR>
<INPUT type="checkbox" name="vybava" value="int33" chcecked>Interný 33.6kB<BR>
<INPUT type="checkbox" name="vybava" value="int28" chcecked>Interný 28.8kB<BR>
<INPUT type="checkbox" name="vybava" value="isdn" chcecked>ISDN modem<BR>
<INPUT type="checkbox" name="vybava" value="iný" chcecked>Iný<BR>
</FIELDSET>
<INPUT type="submit" value="Odoslať dáta">
</FORM>

Výsledok:

Záver
To by bolo všetko. Touto časťou sme tému formuláre skončili. O mesiac sa budeme venovať menej obsiahlej a „milovanej i nenávidenej“ téme rámce (frames). Ukážeme si základy ich používania a na záver si povieme o ich výhodách a nevýhodách.

 

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á