Obrazci in elementi obrazcev

Večina dogajanja med spletno stranjo in uporabnikom se dogaja v notranjosti obrazca. To je prostor, kjer živi veliko stvari interaktivnega HTML za vsak brskalnik: besedilna polja, gumbi, potrditvena polja, izbirni gumbi... V družinski hiarhiji je obrazec vedno vsebovan v nekem dokumentu.

Obrazci in njihovimi elementi so dvosmeren kanal med uporabnikom in skripti. Element obrazca omogoča edini možen način vnosa uporabniških podatkov na različne načine: vnos besedila, izbira v seznamu, potrditev opcije...

Obrazci kot predmeti

V preprostem, združljivem predmetnem modelu ima obrazec relativno malo zbirko lastnosti, postopkov in dogodkov. Vse različice Netscape Navigatorja, ki podpirajo skripte in skoraj vse različice Internet Explorerja dovoljujejo skriptom, da spremenijo te lastnosti pod nadzorom skriptov, kar daje skriptom značilno moč neposrednega odzivanja obrazcev glede na uporabnikove izbore na spletni strani.

Dokument vsebuje obrazce in obrazec vsebuje določeno število elementov (včasih jim rečemo krmilniki obrazca). Vsi ti interaktivni elementi omogočajo uporabniku, da vstavi podatke ali naredi izbiro, sodijo k predmetu form. To razmerje prezrcali značke HTML, tako, da so elementi kot <input /> gnezdeni med značkami <form action="akcija.html"> in </form>.

Zbirka forms

Ta lastnost je polje vseh v dokumentu vsebovanih obrazcev. Elementi so shranjeni po vrstnem redu kot so shranjeni v izvorni kodi HTML. Lastnost id je uporabljena za dostopanje do posameznega elementa v tem polju. Obrazci (forms) so priveski <form action="akcija.html">...</form> v izvorni kodi HTML, njihov indeks je naravno število (prvi element v polju ima vrednost 0).

Do elementa v polju lahko dostopamo na več načinov. V prvem in v drugem dostopamo do priveska z imenom, v tretjem z indeksom.

(window.)document.forms["obrazec1"]
(window.)document.forms["obrazec2"]
(window.)document.forms["nekiObrazec"]

(window.)document.forms.obrazec1
(window.)document.forms.obrazec2
(window.)document.forms.nekiObrazec

(window.)document.forms[0]
(window.)document.forms[1]
(window.)document.forms[2]

Dostopanje do lastnosti obrazca

Obrazci so narejeni v celoti v celoti po standardu HTML. Lahko pa se nastavi vrednosti za lastnosti za id, action, method in enctype. Vsaka od teh je lastnosti predmeta obrazec je dostopna preko naslednjega postopka:

(window.)document.forms[0].lastnost
(window.)document.forms.imeObrazca.lastnost

Da se spremeni katera od teh lastnosti, se jim preprosto dodeli nove vrednosti:

document.forms[0].lastnost = "novaVrednost"

Dostopanje do krmilnika obrazca

Ko se opazuje zgradbo obrazca vidimo, da ima brskalnik seznam vseh krmilnih elementov znotraj obrazca. Ta seznam je še eno polje s predmeti razvrščenimi glede na zaporedje njihovih značk, kot se te pojavljajo v izvorni kodi HTML. V bistvu je bolj učinkovito narediti neposredno pot do elementov, z uporabo njihovih imen (lastnosti name in id).

(window.)document.forms[0].elements[3]
(window.)document.forms.imeObrazca.imeElementa

Elementi (krmilniki) obrazca imajo svoje lastnosti. Vsaka od teh je lastnosti je dostopna preko naslednjega postopka:

(window.)document.forms[0].elements[3].lastnost
(window.)document.forms.imeObrazca.imeElementa.lastnost

Bljižnjice

Večkrat mora neki skript pregledati vse ostale elemente v obrazcu. To še posebej velja takrat, če se vsebina obrazca spremeni z vsakim nalaganjem strani zaradi spreminjanja števila besedilnih polj glede na vrsto uporabnikovega brskalnika (primer: skript na strani uporablja postopek document.write(), da doda dodatni besedilno polje za informacijo, potrebno samo za uporabnike sistema Windows). V spodnjem primeru je ustvarjena spremenljivka glej, ki se sklicuje na prvi element form v dokumentu. To je narejeno zato, da se v primeru množice sklicanj na ta obrazec, lahko uporabi krajša dolžina sklicev, ki je posledično tudi hitrejša. Prireditev se lahko uporabi tudi kot bližnjico za grajenje sklicev na elemente, ki so gnezdeni globlje v obrazcu:

var glej = window.document.forms[0]

for (var i = 0; i < glej.elements.length; i++)
{
if (glej.elements[i].type == "text")
    {
    glej.elements[i].value = ""
    }
}

Gor e-gradiva JavaScript Nov datum Krmilniki obrazcev

SERŠ Maribor : Strokovna gimnazija : 2004 : Jure Štern

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri