Gumbi v HTML formah

Lekcije

Začetna stran

www.zaplana.net

Ime lekcije Gumbi v HTML formah 
Uporabljene tehnologije HTML forme, JavaScript
Kaj se boste naučili Kako zamenjati "submit" in "reset" gumb v formi z drugimi HTML elementi 
Kaj se boste še naučili
bulletKako preizkušati HTML forme brez pomoči strežnika
bulletKako uporabiti HTML element <INPUT TYPE=IMAGE>
bulletKako naslavljati HTML forme v JavaScriptu
bulletKako v JavaScriptu v formi sprožiti akcijo submit ali reset
Pred to lekcijo preberi

Obrazci v HTML straneh

Osnove CSS

V lekciji "Obrazci v HTML straneh" ste videli kako lahko s pomočjo ukaza <INPUT TYPE=SUBMIT> ali <INPUT TYPE=RESET> v HTML obrazec dodamo gumb za zaključek vnosa in prenos podatkov na strežnik ter gumb za vračanje podatkov na začetne vrednosti. V večini primerov bi želeli imeti svoj obrazec nekoliko lepše oblikovan ter uporabljati gumbe, ki bi bili lepši kot tisti, ki jih generirata zgoraj omenjena ukaza. V tej lekciji boste spoznali, kako lahko v HTML formo dodamo poljuben HTML element, ki bo služil kot gumb v formi ter kako lahko HTML forme testirate ne da bi imeli na razpolago strežnik kamor boste pošiljali podatke.

Testiranje HTML form brez strežnika

Testiranje HTML form brez prisotnosti strežnika je zelo enostavno - kot akcijo forme uporabimo JavaScript ukaz, ki izpiše opozorilo, da se je vnos podatkov v formo zaključil. Uporabili bomo ukaz alert, ker pa moramo kot akcijo forme uporabiti URL, bomo JavaScript ukaz spremenili v URL tako, da bomo dodali predpono javascript:

Primer: HTML forma ...

<Form name=test action="javascript:alert('submit')">

Forma ima eno tekst polje <INPUT TYPE=TEXT NAME=p1><br>

in submit gumb <INPUT TYPE=SUBMIT VALUE="Pritisni me">

</Form>

... bo ob pritisku na gumb "pritisni me" izpisala opozorilo 'submit'.

Forma ima eno tekst polje
in submit gumb

Pri vpisu URLja v ukaz <FORM> smo morali uporabiti dvojne narekovaje (ki jih zahteva sintaksa HTML), zato moramo v JavaScript kodi uporabiti enojne narekovaje (uporaba enojnih ali dvojnih narekovajev je v JavaScriptu ekvivalentna).

Izvedba akcije Submit ali Reset iz poljubnega HTML elementa 

Zamenjava submit in reset gumbov z drugimi HTML elementi je zelo enostavna - vsaka forma v HTML strani je tudi JavaScript objekt, ki podpira metodi submit in reset. Ti dve metodi lahko kličemo iz JavaScripta, npr. iz onClick dogodka HTML elementa.

HTML formo iz JavaScript najlažje dosegamo s pomočjo njenega imena, ki ga definiramo s pomočjo parametra NAME= ukaza <FORM>. Seveda pa mora biti ime forme takšno, da ga lahko uporabimo kot spremenljivko JavaScripta - ne sme imeti presledkov ali drugih posebnih znakov, začeti se mora s črko ali podčrtajem in lepo je, da ima ime forme malo začetnico. Formo s takšnim imenom naslavljamo v JavaScriptu zelo enostavno kot document.forma, njene metode pa kot document.forma.submit() in document.forma.reset().

Oklepaji za imenom metode so obvezni tudi če metoda nima parametrov, drugače browser tega ukaza ne bo razumel kot klic metode.

Primer: V formi je submit gumb zamenjan z lepše oblikovanim gumbom, ki ga naredimo z ukazom <BUTTON>, ki ga dodatno oblikujemo s pomočjo CSS parametrov.

<Form name=mojgumb action="javascript:alert('Dobili smo submit')">

Forma ima eno tekst polje <INPUT TYPE=TEXT NAME=p1> in lepši submit gumb 

<Button style="color: yellow; background-color: blue;"

  onClick="document.mojgumb.submit()">Pritisni me</Button>

</Form>

Forma ima eno tekst polje in lepši submit gumb

Zamenjava submit gumba s sliko 

Submit gumb v formi lahko zamenjamo s sliko na dva načina:

bulletSliko vstavimo v formo s HTML ukazom <IMG>, ki mu dodamo onClick dogodek, ki, podobno kot <BUTTON> element v prejšnjem razdelku, sproži submit metodo forme.
bulletUporabimo ukaz <INPUT TYPE=IMAGE>.

Ukaz <INPUT TYPE=IMAGE> zahteva parameter NAME= in parameter SRC= (podobno kot ukaz <IMG>) ter prikaže sliko, ki bo ob kliku nanjo sprožila submit metodo HTML forme. Poleg vrednosti vseh drugih polj v formi bo browser ob uporabi ukaza <INPUT TYPE=IMAGE> strežniku sporočil tudi X in Y koordinato uporabnikovega pritiska z miško.

Primer: V formo je dodana slika, ki bo ob pritisku nanjo sprožila submit metodo forme.

<Form action="javascript:alert('Pritisnil si sliko')">

Tekst polje <INPUT TYPE=TEXT NAME=p1> in submit slika

<input type=image name=submit src="../../images/smile.gif">

</Form>

Tekst polje in submit slika