by InesLomakkeet ovat HTML-kielen hyödyllisin osa. Artikkelissa opastetaan Javascriptin ja web-lomakkeiden maailmaan.
Lomakkeet ovat mielestäni vielä merkittävämpi HTML-peruskielen laajennus kuin esimerkiksi JavaScript, kehykset tai tyylitiedostot. Lomakkeet vievät käyttäjän antamat tiedot palvelimelle käsiteltäväksi. Ilman niitä ei olisi hakukoneita, sähköistä kaupankäyntiä eikä dot.com-vallankumousta.
Lomakkeet toimivat vuorovaikutuksessa palvelinohjelman kanssa, mutta lomakkeilla voi tehdä monia asioita myös ilman palvelinohjelman myötävaikutusta. Lomakkeen tiedot voi lähettää toiselle web-sivulle, jossa ne toimivat hakuehtoina siellä olevalle hakuskriptille. Lomakkeen avulla sivusta voi tehdä vuorovaikutteisen, kun lomakkeen kenttiin annettuja tietoja käytetään sivun muotoiluun.
<form>…</form> -rakenne sisällytetään HTML-sivun body-lohkoon ja se voi puolestaan sisältää mitä tahansa HTML-elementtejä (tekstiä, kuvia) sekä lisäksi erityisiä lomake- elementtejä. Lomakkeen määrittely näyttää seuraavalta:
<form name="Xform1" action="receiver.htm" method="get" onreset="resetHandler()" onsubmit="return(validat eSubmit())" target="receiverframe">
Kaikki lomake-elementit ovat valinnaisia, mutta tavallisesti lomakkeella on ainakin yksi elementti. Lomakkeelle annetaan name-attribuutissa nimi, jolla sitä kutsutaan skripteissä. (Huomaa Netscape-yhteensopivuus.) Action-attribuutissa kerrotaan, mikä on vastaanottavan ohjelman URL-osoite web-palvelimella. Lomakkeen tietojen lähettämiseen on käytettävissä kaksi HTTP-metodia. GET-metodissa tiedot liitetään vastaanottojan URL-osoitteen perään ja POST-metodissa ne lähetetään erillisenä sanomana palvelimelle. Target-attribuutti määrittelee, mihin kehykseen palautuksena tuleva sivu sijoitetaan.
Lomakkeella on tavallisesti kaksi painiketta, joilla on tyypit onreset ja onsubmit. Ensimmäinen tyhjentää lomakkeen kentät ja sijoittaa niihin kenttien oletusarvot. Jälkimmäinen lähettää lomakkeen tiedot toiselle sivulle tai palvelimelle.
Lomake-elementtjä on kuusi erilaista. Seuraavassa on niistä kuvaukset ja esimerkkejä, miten niitä käytetään sivun sisäisessä ja sivujen välisessä tiedonsiirrossa.
Tekstikenttä
<input type="text" name="userName" size="15" maxlength="25" value="Guest User" onchange="eventHandler()">
Kentän pituus määritellään size-attribuutilla, jossa mittayksikkönä on merkki. Pitkä teksti vieriin kentässä, jos se ei mahdu kokonaan kenttään. Tekstin enimmäispituutta säätelee attribuutti maxlength. Käyttäjän tekemät muutokset aiheuttavat tapahtuman, joka ohjataan tapahtumakäsittelijälle onchange-attribuutilla.
Esitystapa lomakkeen tiedoissa: Tekstikenttä saa aikaan nimi/ arvo-parin, joka tässä esimerkissä on ‘username=Guest+User’.
Esitystapa skriptissä: Kentän value-attribuutti on luettavissa ja kirjoitettavissa sivun skripteistä, jos siihen on luku- ja kirjoitusoikeus.
form1.userName.value = "New User"
Password-kenttä toimii tavallisen tekstikentän tapaan, mutta sen sisältö näkyy pelkkinä tähtimerkkeinä.
Käytettävissä on myös piilotettuja kenttiä (type=’hidden’), jotka toimivat muuten samoin kuin tekstikenttä, mutta eivät näy näytöllä. Niitä käytetään erilaisten apu- ja ohjaustietojen tallentamiseen ja lähettämiseen.
Tekstialue
<textarea name="Comments" cols="40" rows="4" wrap=" soft " onchange="eventHandler()"> Type your comments here </textarea>
Tekstialue sisältää useita rivejä ja siinä voi olla vierityspalkit. Alueen koko määräytyy cols- ja rows-attribuuttien mukaan. Sisältö annetaan <textarea>…</teaxtarea>-rakenteen sisällä, value-attribuuttia ei ole.
Esitystapa lomakkeen tiedoissa: Tekstialue antaa tekstikentän tapaan nimi/arvo-parin.
Esitystapa skriptissä: Tekstialueella on value-ominaisuus, joka käytettävissä skripteistä huolimatta siitä, että <textarea>-tagi ei sisällä value-attribuuttia.
Valintapainikkeisto
<input type="radio" name="Gender" value="Male" onclick="eventHandler()" checked> Male <input type="radio" name="Gender" value="Female" checked> Female
Valintapainikkeet (radio button) toimivat aina ryhmänä. Ryhmä muodostuu joukosta radio-tyyppisiä elementtejä, joilla on sama nimi (name- attribuutti). Yhdessä niistä voi olla checked-attribuutti, jolloin se on oletusvalinta. Selitystekstit on annettava jokaiselle painikkeelle erikseen.
Esitystapa lomakkeen tiedoissa: Ryhmä antaa nimi/arvo-parin, joka kuvaa tehtyä valintaa.
Esitystapa skriptissä: Valintaa kuvaavaa value-attribuuttia ei ole käytettävissä skripteissä. Ryhmä on sen sijaan taulukko painikeolioita, joilla jokaisella on value- ja checked-attribuutit. Vain yhden alkion checked-ominaisuus voi saada toden arvon kerrallaan. Seuraava JavaScript antaa valittuna olevan painikkeen nimen:
function findRadioSelection (radiogroup) {
var i=0, curval="none"
for (i=0; i < radiogroup.length; i++) {
if (radiogroup[i].checked == true) {
curval=radiogroup[i].value
}
}
return curval
}
Funktiota kutsutaan seuraavaan tapaan:
userGender = findRadioSelection (form1.Gender)
Valintaruudukko
<input type="checkbox" name="Musictype" value="Pop" checked onclick="eventHandler" > Pop <input type="checkbox" name=" Musictype " value=" Classical " onclick="eventHandler" > Classical
Valintaruudut liitetään usein ryhmäksi, mutta ne voivat olla myös erillisiä, jolloin yhden valinnan tekeminen ei vaikuta muihin valintoihin.
Esitystapa lomakkeen tiedoissa: Jokainen valittu ruutu antaa erikseen nimi/arvo-parin. Valitsematta jätetty ruutu ei anna mitään.
Näin ollen lomakkeelta luettavien tietojen määrä vaihtelee tilanteen mukaan. Ruudut yhdistetään ryhmiksi antamalla niille sama nimi.
Esitystapa skriptissä: Valintaruuduilla on päivitettävä checked-ominaisuus. Jos ruuduilla on eri nimet, tähän ominaisuuteen viitataan seuraavaan tapaan:
if (form1.Pop.checked)
Ryhmien sisällä ruutuihin viitataan taulukon alkioina:
if (form1.Music[0].checked)
Valikko
<select name="Cities" size="1" multiple onchange="eventHandler()"> <option value="0" selected>London</option> <option value="1">Paris</option> <option value="2">Rome</option> </select>
<select> on kaikkein monipuolisin ja joustavin lomake-elementti. Se on joko alasvetovalikko tai rullattava valikko, ja sen avulla voi antaa joko yhden tai useampia valintoja kerralla. Se ei kuitenkaan ole varsinainen combo-elementti, sillä käyttäjä ei voi itse kirjoittaa valintaa.
Rakenteen sisään voi kirjoittaa tarvittavan määrän valintoja <option>…</option>-elementteihin.
Esitystapa lomakkeen tiedoissa: Jokainen valinta antaa erikseen nimi/arvo-parin. Monivalinta edellisen esimerkin valikosta saisi aikaan merkkijonon ‘Cities=London& Cities=Rome’. Huomaa, että näytöllä näkyy <option>…</option>- rakenteen sisällä oleva teksti, mutta value-parametrin arvo on tosiasiallinen palautettava tieto.
Esitystapa skriptissä: Valikko-olio sisältää taulukon nimeltä options, jonka jokaisella alkiolla on value- ja selected-ominaisuudet. Kun vain yksi valinta on sallittu, saadaan valinta selville selectedIndex-tiedon avulla:
carMaker = carMakers.options[car Makers.selectedIndex].value
Useiden yhtäaikaisten valintojen ollessa kyseessä on koko taulukko käytävä lävitse silmukassa. Seuraava funktio antaa taulukon valinnoista, kun kyseessä on mikä tahansa select-rakenne:
function selectedValuesFrom(sControl) {
var i, j=0
selections = new Array()
for (i=0;i<sControl.options. length;i++) {
if(sControl.options[i]. selected) {
selections[j]=sControl.options[i].value j++
}
}
return selections
}
Funktiota kutsutaan seuraavalla tavalla:
selectedCities = selectedValuesFrom (form1.Cities)
Painike
<input type="button" name="B1" value="Click Me" onclick="eventHandler()">
Painike lähettää lomakkeelle tarkoitetut tiedot. Painikkeen kuvassa näkyy value-attribuuttiin kirjoitettu teksti.
Esitystapa lomakkeen tiedoissa: Painike ei anna tietoja, joita tarvitaan etsinnässä.
Esitystapa skriptissä: Internet Explorer sallii painikkeiden sijoittamisen <form>…</form>-rakenteen ulkopuolelle. Painikkeen arvoa voi muuttaa koska tahansa.
Submit-tyyppinen painike lähettää tietoja toiselle sivulle ja liittää mukaan oman nimi/arvo-parinsa.
Reset-tyyppinen painike tyhjentää lomakkeen kentät eikä muodosta mitään hakuehtoja.
