10 Lomakkeet Kontrollit. 10 Lomakkeet

Transkriptio

1 154 Suurin osa HTML-dokumenteista on tarkoitettu vain selailtaviksi ja katseltaviksi ilman, että katselijan rooli olisi ollut muuta kuin passiivinen. Lisäämällä dokumenttiin lomake-elementti, voidaan pieni osa toiminnallisuudesta siirtää käyttäjänkin puolelle. Lomakkeiden avulla on mahdollista laatia mitä erilaisimpia palautelomakkeita, tilauskaavakkeita ja kyselylomakkeita. Lomakkeet koostuvat pääasiassa kahdesta osasta, joista ensimmäinen on varsinainen täytettävä webbilomake ja toinen on vastaanotetut tiedot käsittelevä CGI-ohjelma tai vastaava. Yleensä lomakkeet toimivat niin, että käyttäjä täyttää lomakkeen kirjoittamalla tekstikenttiin, valitsemalla valikoista ja niin edelleen ja painaa lopuksi lähetyspainiketta, jolloin täytetyt tiedot lähetetään vastaanottajalle Kontrollit Lomakkeiden toiminta perustuu kontrolleihin, joiden kautta käyttäjät voivat syöttää tietoja lomakkeille. HTML 4 sisältää seuraavat kontrollit: Painikkeet (buttons) Peruspainikkeita on kolmea tyyppiä: Lähetyspainikkeet: Kun lähetyspainiketta painetaan, lomakkeen tiedot lähetetään määrätylle käsittelijälle. Resetointipainikkeet: Resetointipainikkeen valinta tyhjentää lomakkeen eli alustaa sen. Painikkeet: näillä painikkeilla ei ole mitään määrättyä toimintaa, mutta niihin voidaan liittää toiminnallisuutta skriptien avulla. Kun painike valitaan, ajetaan panikkeeseen sidottu skripti (script). Skripteistä kerrotaan tarkemmin luvussa 11. Peruspainikkeiden lisäksi on mahdollista tehdä painikkeita käyttäen BUTTONelementtiä, joiden ominaisuudet ovat peruspainikkeita paljon laajemmat, sisältäen mahdollisuuden lisätä painikkeisiin kuvia ja muuta toiminnallisuutta.

2 155 Valintaruutu (checkbox) Valintaruudut ovat rastitettavia laatikoita, joilla käyttäjä tekee valintoja. Käyttäjä voi valita useita vaihtoehtoja kerrallaan, kuten esimerkiksi tilauslistojen tapauksessa. Valintanapit (radio buttons) Valintanapit vastaavat toiminnaltaan valintaruutuja sillä erotuksella, että vain yksi vaihtoehto on mahdollista valita. Menut (menus) Menut ovat valikoita, joista käyttäjä voi valita yhden tai useamman vaihtoehdon. Tekstikenttä (text input) Tekstikentät ovat kenttiä, joihin käyttäjä voi syöttää tekstiä. Nämä ovatkin lomakkeiden käytetyimpiä kontrollityyppejä. INPUT-elementillä tehdään yksirivisiä kenttiä ja jos halutaan useampirivisiä kenttiä käytetään TEXTAREA-elementtiä. Tiedoston valinta (file select) Tämän tyyppisellä kontrollilla käyttäjä voi liittää lomakkeeseen tiedoston, joka lähetetään lomakkeen mukana vastaanottavalle prosessille. Piilokontrollit (hidden controls) Piilokontrollit ovat esimerkiksi kenttiä, jotka eivät näy dokumentissa muuten kuin lähdekoodia tarkastelemalla. Piilokontrolleja voidaan käyttää esimerkiksi silloin, kun toisen lomakkeen sisältämien tietojen perusteella muodostetaan uusia lomakkeita.

3 156 Objektikontrollit (object controls) Tämän tyyppiset kontrollit ovat objekteja, esimerkiksi kuvia, joiden arvot, kuten koko, lähetetään lomakkeen muiden tietojen mukana FORM Lomake määritellään komennolla <FORM>. Sekä alku- että lopputagit ovat pakolliset ja koko lomakkeen muu sisältö tekstikenttineen valintapainikkeineen tulee niiden väliin. Elementillä on seuraavat attribuutit: action= Lomakkeen tiedot käsittelevän skriptin URL-osoite. method= Määrittää kuinka lomakkeessa olevat tiedot lähetetään eteenpäin. Mahdolliset arvot ovat get ja post. Mikäli tätä attribuuttia ei määritellä oletuksena käytetään arvoa post. enctype= Tämä attribuutti määrää tyypin, jossa tiedot lähetetään. Oletusarvo on application/x-www-form-urlencoded, mutta jos käytetään INPUT-elementin tyyppiä type= file, (eli halutaan lähettää lomakkeen mukana jokin tiedosto) kannattaa käyttää arvoa enctype= multipart/form-data. accept-charset= Tämä attribuutti määrää syöttötietojen merkistön. Oletuksena käytetään arvoa UNKNOWN. accept= Sekä muualla määrätyt attribuutit: Tämän attribuutti kertoo ne tietotyypit, joita lomakkeen tiedot käsittelevä palvelin osaa käsitellä oikein. Hyväksyttävät tyypit kirjoitetaan pilkulla toisistaan erottaen. id, class lang style title target onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup,

4 157 onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Seuraavassa yksinkertaisen lomakkeen runko. Kaksi tavanomaisinta attribuuttia FORM-elementissä ovat action ja method. action sisältää osoitteen lomakkeen tietoja käsittelevään skriptiin. Tässä esimerkkitapauksessa käsittely_skripti sijaitsee palvelimella hakemistossa cgi-bin. Tätä skriptiä kutsutaan, kun lähetyspainike valitaan. <FORM action=" method="post"> lomakkeen elementit Esimerkin lomakkeessa tiedot lähetetään käyttäen post-metodia. Toinen mahdollinen metodi eli menetelmä on get, mutta se on ongelmallinen eikä sen käyttöä suositella HTML 4:ssä. get toimii niin, että lähetettäessä lomakkeen tiedot lisätään pakattuna osaksi URL-osoitetta. Jos edellä olevassa lomakkeessa on määritelty esimerkiksi kentät koiran_nimi, koiran_rotu ja koiran_vari, tulee lopulliseksi kutsuksi seuraavanlainen rimpsu: koiran_nimi=lassi&koiran_rotu=pystykorva&koiranvari=punainen Yllä oleva on siis URL-kutsu, ja HTTP-protokolla kehottaa käyttämään alle 255 merkkiä pitkiä URL-osoitteita. Jos lomake sisältää paljon tietoa, tulee tuo raja nopeasti vastaan ja voi aiheuttaa erilaisia ongelmia aina palvelimen kaatumiseen saakka. Post-metodi toimii puolestaan palvelimen kannalta ystävällisemmin. Kun tiedot lähetetään, ensin palvelimelle menee palvelupyyntö, jonka jälkeen palvelin jää odottamaan seuraavana lähetettäviä syöttötietoja. Post-metodin käyttö on siis suositeltavaa. Tietojen lähettäminen jonkin skriptin käsiteltäväksi ei ole ainoa vaihtoehto, vaan lomakkeen sisältö voidaan lähettää jonnekin myös sähköpostina. Tällöin actionattribuutin arvoksi asetetaan haluttu sähköpostiosoite: <FORM method="post"> lomakkeen elementit

5 INPUT Yleisin lomakkeiden rakentelussa käytetty elementti on INPUT. Sen avulla voidaan luoda lähes kaikki edellä esitetyt kontrollit tekstikentistä painikkeisiin muuttamalla INPUT-elementin type-attribuuttia. Elementillä on seuraavat attribuutit: type= Elementin tyypin määritys. Määrää siis kontrollin ulkoasun ja voi saada seuraavat arvot: password checkbox radio submit reset Salasanakenttä. Kirjoitetut merkit merkitään *:llä. Valintaruutu. Valintanappi. Lähetyspainike. Alustuspainike. Tyhjentää kentät tai antaa niille määrätyt oletusarvot file hidden image button text Käyttäjälle annetaan mahdollisuus lisätä lomakkeen mukaan tiedosto, joka lähetetään vastaanottajalle lähetyksen yhteydessä. Piilokenttä. Interaktiivinen kuva. Kun esim. hiirellä napautetaan kuvaa jostain kohtaa, tuon pisteen koordinaatit lähetetään vastaanottajalle arvoparina kuvan_nimi.x, kuvan_nimi.y ja käynnistyy sama tapahtuma kuin jos painettaisiin lomakkeen lähetyspainiketta. Kuva voi toimia myös lähetyspainikkeena. Painike, jolla ei ole oletustoimintoa. Tekstikenttä. Mikäli type-attributtia ei ole määrätty, käytetään oletuksena tekstikenttää. name= Kontrollin nimi. Kun lomake lähetetään tiedot lähetetään, vastaanottaja saa ne parina name/käyttäjän_antama_arvo. Nimeksi kannattaa valita mahdollisimman kuvaava sana, jotta tulosten jälkikäsittely olisi helpompaa.

6 159 value= Elementin sisällön oletusarvo. Tekstikenttien tapauksessa oletusteksti näkyy kentässä kun selain lataa lomakkeen näyttöön. value-attribuutilla voidaan lisätä myös painikkeisiin haluttu teksti. size= Kertoo selaimelle, kuinka leveä näkyvä elementti on. Jos kyseessä on tekstikenttä, leveyden yksikkönä käytetään kenttään mahtuvien merkkien lukumäärää, oletuksena 20. Merkkejä voidaan syöttää kenttään useampiakin kuin size-arvon verran, mutta tällöin joudutaan kelaamaan tekstiä nuolinäppäimillä, jotta nähtäisiin, mitä on kirjoitettu. Jos kyseessä on jokin muu tyyppinen kontrolli, esimerkiksi painike, tulee leveys ilmoittaa pikseleinä. maxlength= Syötettävän tiedon maksimipituus. Tällä attribuutilla lomakkeen tekijä voi määrätä kuinka monta merkkiä tekstikenttään on mahdollista syöttää. Jos attribuutti jätetään pois, oletusarvona on rajoittamaton. checked= Jos elementin tyyppi on valintaruutu tai painike, voidaan tällä attribuutilla asettaa jotkin vaihtoehdot valituiksi. src= Kuvan osoite. Jos elementin tyyppinä on image täytyy sille määrätä myös URL-osoite, josta kuva ladataan. disabled= Mikäli tämä on/off-attribuutti on elementin määrittelyssä, on elementin toiminta kytketty tällöin pois päältä. readonly= Tämän on/off-attribuutin läsnäolo elementin määrittelyssä aiheuttaa sen, ettei kontrollin tilaa voida muuttaa Ja lisäksi muualla määriteltyjä attribuutteja: id, class lang title style alt align tabindex accesskey usemap

7 160 onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Tekstikentät Seuraavassa yksinkertainen lomake joka sisältää muutamia tekstikenttiä ja lähetys- ja alustuspainikkeet. Elementit on nimetty käyttäen id-attribuuttia ja kahden ensimmäisen tekstikentän pituus on määrätty size-attribuuttia käyttäen. Ensimmäisen tekstikentän eteen on lisätty teksti Koirasi rotu: käyttäen normaalia tekstiä, kun taas kahdessa jälkimmäisessä on käytetty tekstikenttään sidottua otsake-elementtiä (<LABEL>). Otsake on yhdistetty tekstikenttäelementtiin attribuutilla for, jonka arvo on siis sama kuin tekstikentän id-arvo. Alimmaisen tekstikentän oletussisällöksi on käyttäen valueattribuuttia. Viimeisinä elementteinä on lisätty lähetys- ja alustuspainikkeet. Näiden painikkeiden tekstit ovat oletusarvoisesti Submit ja Reset, painikkeisiin on lisätty suomenkieliset vastineensa käyttäen value-attribuuttia. <TITLE> Yksinkertainen lomake </TITLE> Seuraavan lomakkeen täyttämällä saat tietää sopivatko koirasi ja grillisi yhteen. Vastauksen saat sähköpostissa. <FORM action=" method="post"> <P> Koirasi rotu:<input type="text" name="doginrotu" size="20"> <BR> <LABEL for="grillinnimii"> Grillisi nimi : </LABEL> <INPUT type="text" name="grillinnimi" id= grillinnimii size="10"> <BR> <LABEL for=" i"> isi : </LABEL> <INPUT type="text" name=" " id= i value="@hotmail.com"> <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä"> </P> Selaimessa edellä kirjoitettu näyttää tältä:

8 161 Lomake kolmella tekstikentällä ja kahdella painikkeella Salasanakentät Antamalla INPUT-elementin type-attribuutin arvoksi password, saadaan aikaan kenttä, johon kirjoitettaessa syötetyt merkit näkyvät *-merkkeinä. Esimerkki: <TITLE> Salasanakenttä </TITLE> Anna käyttäjätunnus ja salasana ja napauta sitten OK: <FORM action=" method="post"> <P> <LABEL for="ktunnus"> Käyttäjätunnus : </LABEL> <INPUT type="text" name= tunnus id="ktunnus" size="15"> <BR> <LABEL for="s_sana"> Salasana : </LABEL> <INPUT type="password" name= sana id="s_sana"> <BR> <INPUT type="submit" value="ok"> <INPUT type="reset" value="tyhjennä"> </P> Ja sama selaimessa:

9 162 Salasanakenttä Valintaruudut Valintaruudut muodostetaan antamalla INPUT-elementin type-attribuutille arvo checkbox. Valintaruuduista lomakkeen täyttäjällä on mahdollista valita useita vaihtoehtoja kerrallaan. Näin on mahdollista toteuttaa myös useiden vaihtoehtojen valinta samaa aihealuetta koskevissa tapauksissa, kuten esimerkiksi Tilaan tämän tietokoneen seuraavin optioin. Tämä tapahtuu antamalla usealle valintaruutuelementille sama nimi (name) mutta eri value-arvo. Saman tyylisen monivalintavalikon voi toteuttaa myös jäljempänä esiteltävällä SELECT-elementillä. Seuraavassa esimerkki valintaruuduista: <FORM action=" method="post"> <P> <INPUT type="checkbox" id="onko" CHECKED> <LABEL for="onko"> Omistan lemmikin </LABEL> <BLOCKQUOTE> <INPUT type="checkbox" id="elain" name= ela value="kissa"> <LABEL for="elain"> Kissa </LABEL> <BR> <INPUT type="checkbox" id="elain" name= ela value="koira"> <LABEL for="elain"> Koira </LABEL> </BLOCKQUOTE> Lemmikilläni on seuraavat ominaisuudet: <BR> <INPUT type="checkbox" name="ominaisuudet" value="raajoja4"> Raajoja 4 <BR> <INPUT type="checkbox" name="ominaisuudet" value="hantia2"> Häntiä 2 <BR>

10 163 <INPUT type="checkbox" name="ominaisuudet" value="mykka"> Mykkä <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä"> </P> Ja sama selaimen tulkitsemana: Valintaruutulomake Valintanapit Valintanapit ovat toiminnaltaan kuten valintaruudutkin sillä erotuksella, että niistä käyttäjän on tarkoitus valita vain yksi vaihtoehto kerrallaan samaa aihealuetta koskien. Valintaruutujen yhteydessä value-attribuuttia tarvitaan vain

11 164 monivalintatilanteessa, mutta valintanappien tapauksessa value-arvo on pakollinen. Seuraavassa esimerkissä mielentilaa koskeva valintanappilomake: <FORM action=" method="post"> <INPUT type="radio" name="mtila" value="rauhallinen"> <LABEL for="mtila"> Rauhallinen </LABEL> <BR> <INPUT type="radio" name="mtila" value="kirea"> <LABEL for="mtila"> Kireä </LABEL> <BR> <INPUT type="radio" name="mtila" value="area"> <LABEL for="mtila"> Äreä </LABEL> <BR> <INPUT type="radio" name="mtila" value="maarittelematon"> <LABEL for="mtila"> Määrittelemätön </LABEL> <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä"> Ja selaimessa: Valintanappeja sisältävä lomake.

12 Tiedosto Lomakkeiden mukana on ollut mahdollista lähettää palvelimelle tiedostoja HTML:n versiosta 3.2 lähtien. Tiedostonsiirtomahdollisuuden lisääminen lomakkeisiin aiheuttaa pieniä muutoksia edellä olleisiin esimerkkeihin. Ensinnäkin lomake-elementin määrittelyyn on lisättävä attribuutti enctype ja annettava sille arvo multipart/form-data. Eli näin: <FORM action=" method="post" enctype= multipart/form-data > lomakkeen elementit Tämän lisäksi lomakkeelle on lisättävä INPUT-elementti, jonka type-attribuutin arvona on file. Ja esimerkki: <FORM action=" method="post" enctype= multipart/form-data > <INPUT name= tiedosto type= file > <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä"> Esimerkki selaimella katseltuna: Tiedostonlähetyslomake.

13 166 Selain lisää automaattisesti painikkeen Browse (Selaa) INPUT-elementin yhteyteen. Kun tuota napita painetaan avautuu perinteinen käyttöjärjestelmän mukainen tiedostojenselausikkuna, josta haluttu tiedosto voidaan etsiä ja valita. Windows-ympäristössä avautuu seuraavanlainen ikkuna: Tiedostonvalintaikkuna Piilokentät Piilokenttiin voidaan lisätä tietoa joka ei näy selaimessa mitenkään, mutta joka kuitenkin lähetetään lomakkeen mukana palvelimelle. Piilokenttä voidaan luoda seuraavasti: <INPUT type= hidden name= piilokenttä value= somedata >

14 SELECT, OPTGROUP, OPTION Edellä esitellyn INPUT-elementin lisäksi lomakkeisiin voidaan lisätä muutamia erillisiä valikkoelementtejä. Näitä ovat valikot (SELECT, OPTGROUP, OPTION). Näistä SELECT- elementti luo varsinaisen valikon. Valikon vaihtoehdot määrätään puolestaan OPTION-elementeillä. Jokaisessa SELECT-elementissä tule olla vähintään yksi vaihtoehto. SELECT-elementillä on seuraavat attribuutit: name= Valikon nimi. size= Tämä attribuutti määrää, montako vaihtoehtoa on kerrallaan näkyvissä. Selaimesta riippuen valikko voidaan esittää joko laatikkona, josta vaihtoehto valitaan, tai sitten pudotusvalikkona. multiple= Jos elementin määrittelyyn on lisätty attribuutti multiple, on valikosta mahdollista valita useita vaihtoehtoja. Mikäli attribuuttia ei ole lisätty, voidaan vain yksi vaihtoehto valita. Lisäksi on seuraavat muualla määritellyt attribuutit: id, class lang title style disabled tabindex onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Valikon vaihtoehdot muodostavalla OPTION-elementillä on seuraavat attribuutit: selected= Jos tämä attribuutti sisältyy elementin määrittelyyn, on kyseinen vaihtoehto valmiiksi valittuna. value= Määrää elementin oletusarvon. Jos tätä attribuuttia ei ole määrätty, oletusarvo määräytyy OPTION-elementin sisällön mukaan.

15 168 label= Tämän attribuutin avulla lomakkeen tekijä voi luoda vaihtoehdolle nimikkeen. Lisäksi vielä muualla määritellyt attribuutit: id, class lang title disabled style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Valikko määritellään niin, että komentojen <SELECT> </SELECT> väliin sijoitetaan OPTION-elementit: <SELECT name="nimi "> <OPTION> Vaihtoehto_1 </OPTION> <OPTION> Vaihtoehto_2 </OPTION> <OPTION> Vaihtoehto_n </OPTION> </SELECT> OPTION-elementit voidaan kirjoittaa myös lyhennetysti jättämällä lopputagi pois: <SELECT name="nimi "> <OPTION>Vaihtoehto_1 <OPTION>Vaihtoehto_2 <OPTION>Vaihtoehto_n </SELECT> Esimerkki valikosta: <FORM action=" method="post"> <SELECT multiple name="sopiva" size="5"> <OPTION>Lyijy <OPTION>Seinä <OPTION selected value="kotelo_1_a">kotelo_1 </OPTION> <OPTION selected value="kotelo_1_b">kotelo_2 </OPTION> <OPTION>Maaperä <OPTION>Leikkaus <OPTION>Tahkota </SELECT> <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä">

16 169 Edellä esitetyssä valikossa on mahdollista valita useampi vaihtoehto pitäen esimerkiksi CTRL-painiketta painettuna valintoja tehdessä. Vaihtoehtoja on kerrallaan näkyvissä viisi ja kaksi on valmiiksi valittuna kun lomake ladataan näyttöön. Tiedot lähetetään eteenpäin niin, että valikon nimen yhteyteen liitetään valitut vaihtoehdot. Kun kolmannelle ja neljännelle vaihtoehdolle on määrätty value-arvo erikseen, käytetään tätä arvoa myös silloin kun tiedot lähetään. Alla olevan kuvan tapauksessa lähetettäisiin valikon nimi sopiva ja vaihtoehdot Kotelo_1_a ja Kotelo_1_b. Selaimessa yllä oleva HTML-koodi näyttää tältä: SELECT-elementti. Käyttämällä elementtiä OPTGROUP voidaan iso joukko vaihtoehtoja ryhmitellä loogisiksi kokonaisuuksiksi. Elementillä on attribuutit: label= Nimike, jota käytetään valikossa. Muualla määritellyt: id, class lang title style disabled

17 170 onfocus, onblur, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Esimerkkinä valikko, jossa on vaihtoehtoina seuraavat: Auto, Audi, Anoreksia, Bulimia, BMW, Biilen, Citroen, Catarri(lorvi) ja Caara. Nämä voitaisiin jakaa aakkosellisiin ryhmiin näin: Aata Auto Audi Anoreksia Beetä Bulimia BMW Biilen Ceetä Citroen Catarri(lorvi) Caara Tämä sama rakenne voidaan toteuttaa myös lomakkeen valikossa HTML 4 määrityksen mukaan näin: <FORM action=" method="post"> <SELECT name="sopiva > <OPTGROUP label="aata"> <OPTION>Auto <OPTION>Audi <OPTION>Anoreksia </OPTGROUP> <OPTGROUP label="beetä"> <OPTION>Bulimia <OPTION>BMW <OPTION>Biilen </OPTGROUP> <OPTGROUP label="ceetä"> <OPTION>Citroen <OPTION>Catarri(lorvi) <OPTION>Caara </OPTGROUP>

18 171 </SELECT> <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä"> Graafinen selain voisi esittää yllä olevan esimerkiksi valikkona, jossa olisi vaihtoehdot Aata, Beetä ja Ceetä, ja jos valitaan esim. Ceetä, avautuisi valikko, jossa olisi vaihtoehdot Citroen, Catarri(lorvi) ja Caara: Valikon alkioiden ryhmittely OPRGROUP-elementillä TEXTAREA Tavalliset tekstikentät INPUT-elementillä luotuina ovat sikäli rajoittuneita ettei niihin mahdu kuin rivillinen tekstiä kerrallaan. Mikäli halutaan kirjoitettavan paljon tietoa yhteen kenttään, kannatta käyttää tekstialueita (TEXTAREA). Tekstialueet ovat ruutuja joihin voidaan kirjoittaa useita rivejä tekstiä. TEXTAREAelementillä on kolme attribuuttia: name= Elementin nimi, jota käytetään lähetyksessä.

19 172 rows= Näkyvissä olevien rivien määrä ts. tekstialueen korkeus. Kenttään voidaan syöttää useampiakin rivejä kuin mitä korkeus osoittaa ja tällöin kentän reunassa oleva vierityspalkki tulee aktiiviseksi. cols= Näkyvissä olevien merkkien määrä leveyssuunnassa ts. tekstialueen leveys. Lisäksi joukko muualla määriteltyjä attribuutteja: id, class lang title style disabled readonly tabindex onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,onkeyup Seuraavassa esimerkissä määritellään tekstialue, <TITLE> TEXTAREA-elementti </TITLE> Kirjoittelepa ajatuksiasi alla olevaa tilaan. <BR> Napauta lopuksi <STRONG>Lähetä</STRONG>. <FORM action=" method="post"> <TEXTAREA name="palaute" rows="10" cols="50"> </TEXTAREA> <BR> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä"> Ja selain näyttää edellä kirjoitetun näin:

20 173 TEXTAREA-elementti. Tekstialueen ulkoasu saattaa vaihdella selaimesta riippuen. Uusimmat selaimet osaavat jakaa tekstin useammalle riville automaattisesti rivin loppuessa eikä käyttäjän tarvitse painaa Enter:iä jokaisen rivin päätteeksi BUTTON BUTTON-elementillä luodut painikkeet ovat aivan samanlaisia kuin INPUTelementilläkin tehdyt, sillä erotuksella, että painikkeisiin voidaan lisätä sisältöä, kuten esimerkiksi kuvia, jolloin ei tarvitse tyytyä pelkkiin standardipainikkeisiin. Elementillä on seuraavat attribuutit: name= Painikkeen nimi. value= Painikkeen oletusarvo. type= Painikkeen tyyppi, joka voi olla: submit: Lähetyspainike.

21 174 reset: Tyhjennys/alustuspainike button: Painike, olla ei ole oletustoimintoa. Ja muualla määriteltyjen attribuuttien lista: id, class lang title style disabled accesskey tabindex onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup BUTTON-painikkeen rakenne on seuraavanlainen: <BUTTON attribuutti1= attribuutti2= > elementin sisältö </BUTTON> Seuraavassa esimerkissä lisätään lähetyspainikkeeseen kuvatiedosto. Tämä tapahtuu asettamalla BUTTON-elementin sisällöksi IMG-elementti: <TITLE> Kuvapainike </TITLE> <FORM action= method= > Nimesi: <INPUT type="text" name="nimi"> <BR> <BR> <BUTTON name="laheta" value="lähetä" type="submit"> <IMG src="nappi2.bmp"> </BUTTON> Kuvalla, joskin hieman suurella, varustettu painike selaimen tulkitsemana: BUTTON-elementti kuvan kera.

22 LABEL Lomakkeiden luonnissa lomake-elementin viereen tuleva nimike voidaan määrätä kahdella tavalla: kirjoittamalla se tavalliseen tyyliin HTML-koodiin haluttuun paikkaan tai käyttämällä LABEL-elementtiä. Elementillä on vain yksi oma attribuutti: for= Määrää mihin lomake-elementtiin nimike kuuluu. Elementtiin, johon nimike on tarkoitus liittää, on lisättävä id-attribuutti, jonka arvo tulee sitten lisätä for-attribuutin sisällöksi. Lisäksi elementillä on seuraavat muualla määritellyt attribuutit: id, class lang title style accesskey onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup LABEL-elementin rakenne on seuraavanlainen: <LABEL for= jokin_id > Nimike </LABEL> Seuraavassa esimerkissä annetaan kahdelle, taulukkoon sijoitetulle, INPUTelementille omat nimikkeensä. Elementtien sijoittamisella taulukkoon saadaan eripituisetkin elementit tasattua helposti keskenään: <FORM action= method= > <TABLE> <TR> <TD> <LABEL for= koiranrotu > Koirasi rotu: </LABEL> <TD> <INPUT type= text name= rotu id= koiranrotu > <TR> <TD> <LABEL for= koiranvari > Koirasi värittömyys: </LABEL> <TD> <INPUT type= text name= vari id= koiranvari > </TABLE> Selaimen näkemys:

23 176 LABEL-elementti FIELDSET ja LEGEND Edellä olleissa esimerkeissä lomake-elementit ovat olleet tavallaan vain ladottuina peräjälkeen ilman sen kummempaa ryhmittelyä. FIELDSET-elementillä voidaan helposti ryhmitellä samaa asiaa koskevat elementit niin, että selainkin ottaa tämän huomioon. Ryhmittely tapahtuu niin, että samaan ryhmään halutut lomake-elementit sijoitetaan saman FIELDSET-elementin sisään. Ryhmitykselle voidaan antaa otsikko LEGEND-elementillä. Selvennetään esimerkillä: <FIELDSET> <LEGEND> Otsikko </LEGEND> <INPUT > <INPUT > </FIELDSET> Ryhmän otsikon paikan voi määritettä käyttämällä LEGEND-elementissä attribuuttia align. Tämä attribuutti voi saada seuraavat arvot: top bottom left right Otsikko on ryhmän ylälaidassa. Oletusarvo. Otsikko on ryhmän pohjalla. Otsikko on ryhmän vasemmassa laidassa. Otsikko on ryhmän oikeassa laidassa. Tämän attribuutin käyttö ei ole HTML 4:ssä suositeltavaa vaan muotoiluun kehotetaan käyttämään Tyylisivuja.

24 177 Lisäksi yleisiä attribuutteja: id, class lang title style accesskey onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Seuraavassa esimerkissä INPUT-elementit on jaettu kahteen ryhmään. Huomaa myös elementeille annettu tabindex-attribuutti. Tämän attribuutin avulla dokumentin laatija voi määrätä, missä järjestyksessä aktiivisuus kohdistetaan kuhunkin elementtiin, jos elementtien välillä liikutaan Tab-painiketta käyttäen. Attribuutin määritys tapahtuu näin: <INPUT name=.. tabindex= 2 > Elementtien välillä siirrytään kasvavan tabindex:n määräämässä järjestyksessä, alkaen pienimmästä suurimpaan. Esimerkin tapauksessa on lisätty epäloogisuutta kohdistamalla aktiivisuus ensin keskimmäiseen vaihtoehtoon ( Kissa ): <FORM action=" method="post"> <FIELDSET> <LEGEND> Onko sinulla jokin seuraavista? </LEGEND> <INPUT type="checkbox" name="heppa" value="hevonen" tabindex="3"> Hevonen <BR> <INPUT type="checkbox" name="kisu" value="kissa" tabindex="1"> Kissa <BR> <INPUT type="checkbox" name="koira" value="koira" tabindex="2"> Koira </FIELDSET> <FIELDSET> <LEGEND align="right"> Eläimesi ominaisuudet? </LEGEND> <INPUT type="checkbox" name="ominaisuudet" value="raajoja4" tabindex="4"> Raajoja 4 <BR> <INPUT type="checkbox" name="ominaisuudet" value="hantia2" tabindex="5"> Häntiä 2 <BR> <INPUT type="checkbox" name="ominaisuudet" value="mykka" tabindex="6"> Mykkä <BR> </FIELDSET> <INPUT type="submit" value="lähetä"> <INPUT type="reset" value="tyhjennä">

25 178 Ja sama Internet Explorerilla tulkittuna. Huomaa, kuinka selain laatikoi ryhmät erottuvuuden parantamiseksi: Elementtien ryhmittely FIELDSET-elementillä Aktiivisuuden kohdistaminen Jotta käyttäjät voisivat syöttää kenttiin tekstiä ja tehdä valikoista valintoja, täytyy aktiivisuus kohdistaa jollakin menetelmällä haluttuun kohtaan lomakkeessa. Jos tekstikenttään siis halutaan kirjoittaa tekstiä, täytyy kenttä ensin aktivoida. Aktiivisuuden kohdetta voidaan muuttaa hiirellä napauttamalla, Tab-painiketta painamalla tai elementille määrätyn pikanäppäimen kautta. Tab-painiketta käytettäessä aktiivisuus siirtyy elementistä toiseen joko peräkkäin tai sitten dokumentin laatijan määräämässä järjestyksessä. Tämä järjestys määrätään antamalla dokumentissa oleville elementeille tabindex-attribuutti. Attribuutin arvona oleva luku määrää sitten järjestyksen: pienemmästä suurempaan. <INPUT type=" " name="1" value=" " tabindex="3">

26 179 <INPUT type=" " name="2" value=" " tabindex="1"> <INPUT type=" " name="3" value=" " tabindex="2"> Yllä olevat elementit käydään läpi siis järjestyksessä: keskimmäinen ensin, alimmainen sitten ja viimeisenä ylimpänä oleva. Edellisen sivun esimerkissä on myös käytetty tabindex-attribuuttia. Tätä ominaisuutta voidaan käyttää seuraavien elementtien yhteydessä: A, BUTTON, SELECT, INPUT, TEXTAREA, AREA ja OBJECT. Dokumentin laatija voi määrätä elementeille myös näppäimistöoikoteitä. Tämä tapahtuu lisäämällä elementin määrittelyyn accesskey-attribuutti, jonka arvoksi sijoitetaan haluttu näppäin. Arvoksi sopii vain jokin kirjainmerkki. Ainoa hämmennystä aiheuttava seikka voi olla, että pikanäppäimiä käytettäessä on Windowsissa painettava yhtaikaa Alt-painiketta. Tämä ominaisuus on käyttöjärjestelmäriippuvainen, eli eri ympäristöissä dokumenttiin sidottuja pikanäppäimiä käytetään samoin kuin muitakin järjestelmän näppäinoikoteitä. Seuraavassa esimerkissä on tavallinen käyttäjätunnuskysely, mutta kenttiin päästään syöttämään tietoja myös näppäinoikotien kautta. Tunnuskenttään päästään painamalla Alt+t ja salasanakenttään Alt+s. <FORM action=" method="post"> <P> <LABEL for="tunnus" accesskey="t"> Tunnus </LABEL> <INPUT type="text" name="ktunnus" id="tunnus"> <BR> <LABEL for="sana" accesskey="s"> Salasana </LABEL> <INPUT type="password" name="ssana" id="sana"> <BR> <INPUT type="submit" value="ok"> <INPUT type="reset" value="peruuta"> </P> Näppäinoikotie voidaan antaa seuraaville elementeille: A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA.