Slabikář JavaScriptu – základy práce s formuláři

Formuláře jsou na HTML stránkách velmi časté. V tomto pokračování si shrneme základní možnosti práce s nimi.

Všechny formuláře dokumentu jsou prvky kolekce forms. Lze k nim přistupovat několika způsoby:

1. Pořadovým číslem formuláře v kolekci. Do kolekce jsou formuláře začleňovány v pořadí, v jakém jsou natahovány do prohlížeče. Na první formulář se tedy lze odkázat document.forms[0].
2. Přes ID formuláře document.getElementById(‚id_formuláře‘).
3. Odkazem na název formuláře document.getElementByName(‚název_formuláře‘), případně document.forms[‚název_formuláře‘].

Každý formulář má soubor vlastností, které lze číst nebo měnit skriptem. Z nich jsou nejpoužívanější:

• elements – kolekce ovládacích prvků formuláře (INPUT, SELECT, TEXTAREA …), pouze pro čtení
• length – počet ovládacích prvků ve formuláři, pouze pro čtení
• name – název formuláře
• action – název serverového skriptu pro zpracování formuláře
• method – metoda použitá pro odeslání formuláře. Povolené hodnoty jsou get (implicitní) nebo doporučovaná post. Metoda je důležitá pro serverový handling s odesílanými hodnotami formuláře.
• target – odkaz na FRAME, do něhož má být natažen výsledek serverového zpracování skriptu

Hodnotou atributu target může být název rámu (hodnota vlastnosti name), do něhož má být HTML dokument natažen. Pokud rám odkazovaného názvu neexistuje, internetový prohlížeč vytvoří nové okno s rámem, který pojmenuje hodnotou atributu target. Kromě toho existuje několik speciálních předdefinovaných hodnot tohoto atributu s následujícím významem:

• _self – otevřít do stejného rámu, ze kterého je stránka volána
• _parent – otevřít do rodičovského rámu. Používá se v případě, že jeden element FRAMESET je vnořen do druhého.
• _top – otevřít do kořenového dokumentu – na celou plochu prohlížeče
• _blank – otevřít do nového okna

Nejčastějším ovládacím prvkem formuláře bývá INPUT. Proberme si nejdůležitější vlastnosti a metody, které jsou opět dostupné a ovladatelné JavaScriptem:

• type – jedná se o udání typu ovládacího prvku. Povolené hodnoty jsou text|password|checkbox|radio|submit|reset|file|hidden|image|button.

Hodnota této vlastnosti je pouze pro čtení, a proto není možné typ ovládacích prvků dynamicky měnit.

• defaultValue – první hodnota vlastnosti value po natažení ovládacího prvku do internetového prohlížeče. Pokud měníte dynamicky hodnotu value a potřebujete se vrátit k původní hodnotě, použijte defaultValue.
• defaultCheck – u typů ovládacích prvků checkbox a radio obsahuje první hodnotu vlastnosti checked – chová se stejně jako defaultValue
• form – vlastnost uchovává odkaz na formulář, v němž je ovládací prvek obsažen. Pokud je prvek mimo formuláře, má vlastnost hodotu null. Tuto vlastnost využijete ve chvíli, kdy k prvku formuláře přistupujete nikoli přes hierarchii dokumentu (například document.forms[1].elements[‚id_prvku‘]), ale metodou document.getElementById(‚id_prvku‘). Vlastnost je pouze pro čtení, není možné přesouvat dynamicky prvky z jednoho formuláře do druhého.
• accessKey – přístupová klávesa k ovládacímu prvku. Je–li definovaná accessKey, funguje klávesová zkratka ALT+accessKey pro přenesení focusu do příslušného ovládacího prvku. Definice přístupové klávesy se často používá ve spojení s tagem LABEL:
  

  <LABEL for=“fuser“ accesskey=“U“> <U>U</U>ser Name</LABEL> <INPUT type=“text“ name=“user“ id=“fuser“>

  Atribut for prvku LABEL je reprezentován vlastností htmlFor pro přístup JavaScriptem. Hodnotou vlastnosti je id ovládacího prvku, k němuž je návěstí připojeno. Návěstí jsou ve formulářích často neprávem opomíjena, ačkoli by jejich použití často velmi zpříjemnilo práci návštěvníkům webových stránek.

• checked – pro typ ovládacích prvků radio a checkbox udává, zda je (hodnota true) nebo není (hodnota false) políčko zaškrtnuto
• disabled – povolené hodnoty false nebo true. Pokud je aktuální hodnotou true, prvek není dostupný pro uživatele HTML stránky, není možné do něj přenést focus a přepisovat jeho hodnoty. Skriptem je však vlastnost value dostupná a měnitelná. Zakázaný prvek je vyloučen z navigace pomocí klávesy TAB (tabbing navigation – viz dále) a jeho hodnota se NEODESÍLÁ při submitu formuláře.
• maxLength – pro ovládací prvky text a password udává hodnota počet znaků, které může uživatel do pole vložit. Skriptem však lze do ovládacího prvku (vlastnosti value) vložit znaků více.
• readOnly – vlastnost dostupná pouze u typu ovládacího prvku text nebo password. Je–li hodnota nastavena na true, uživateli není povoleno měnit hodnotu pole.
• src – vlastnost dostupná pouze u typu ovládacího prvku image (grafický submit button). Obsahuje cestu k obrázku.
• value – aktuální hodnota ovládacího prvku, která se předává ke zpracování při odeslání formuláře. Podle standardů nesmí být hodnota vlastnosti prázdná u ovládacích prvků radio a checkbox. Pokud vlastnost u těchto prvků definovaná není a hodnota checked je při odesílání true, odesílá každý prohlížeč obecně jinou hodnotu.
• tabIndex – číslo udávající pořadí prvku v tzv. tab order, tedy v pořadí, v jakém získávají prvky focus, když mezi nimi uživatel prochází pomocí klávesy TAB, (respektive v obráceném pořadí kombinací kláves SHIFT+TAB). Do tab order jsou zařazeny všechny ovládací prvky, které podporují vlastnost tabIndex, které je přiřazena kladná hodnota. Prvky mající stejnou hodnotu tabIndex získávají focus v pořadí, v jakém byly natahovány do prohlížeče. Ostatní prvky jsou zařazeny na konec tab orderu v pořadí, v jakém byly natahovány do stránky. Prvky s vlastností disabled nastavenou na true jsou z tab order vyloučeny.

Ovládací prvek INPUT má i své metody:

• blur – metoda odstraní focus z ovládacího prvku, například document.getElementById(‚id_prvku‘).blur()
• focus – metoda nastaví focus na daný prvek. Využije se například tam, kde ve skriptu připojenému k události onBlur (při opuštění ovládacího prvku) probíhá kontrola správnosti vyplnění pole. Pokud je pole vyplněno neplatnými daty, lze touto metodou vrátit focus zpět do pole (this.focus()).
• select – metoda vybere veškerý text vložený do prvku typu text, password nebo file. Lze použít i u tagu TEXTAREA.
• click – metoda vyvolá událost kliknutí myší na ovládací prvek

Kromě popsaných vlastností lze použít i vlastnosti zděděné. Z nich nejdůležitější jsou:

• id – jednoznačná identifikace
• title – titulek, který se ukáže při najetí myší na ovládací prvek – lze výhodně používat pro nápovědu
• className – hodnota atributu CLASS, tedy třída odkazující na vložený nebo propojený styl, podle něhož má být prvek naformátován
• style – kolekce vlastností in–line stylu konkrétního ovládacího prvku

Pro naprostou většinu ovládacích prvků formuláře platí velice podobné schéma dostupných vlastností a metod. Jedinou větší výjimkou je ovládací prvek SELECT, s nímž jsme již v našem seriálu několikrát pracovali. Podrobně se na něj podíváme v příštím pokračování.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.