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

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

ShowIT

Najnovšie videá