Lomakkeet ja vuorovaikutteisuus

Esitys aiheesta: "Lomakkeet ja vuorovaikutteisuus"— Esityksen transkriptio:

1 Lomakkeet ja vuorovaikutteisuus
Yksi olennainen ero paperilomakkeen ja HTML-lomakkeen välillä on, että HTML-lomakkeella lähetetyt tiedot menevät aina tietokoneohjelman käsiteltäväksi. Toinen olennainen ero on, että HTML-lomake täytetään ja lähetetään selaimella. HTML:ssä lomake (form) antaa selaimelle ohjeen muodostaa käyttöliittymä, jonka kautta käyttäjä voi kirjoittaa tekstiä tai antaa muuta dataa. Lomakkeen rakenne määrää, minkä tyyppisiä kenttiä käyttöliittymä sisältää. Lomakkeet ja vuorovaikutteisuus tMyn

2 Lomakkeeseen liittyy myös action-määrite, joka kertoo selaimelle, mihin osoitteeseen sen tulee lähettää käyttäjältä saatu data jonkinlaista käsittelyä varten. Tämä osoite (URL) viittaa palvelimessa toimivaan ohjelmaan tai scriptiin, jota voidaan kutsua palvelinskriptiksi (server side script). ”Skripti” on tässä yhteydessä usein käytetty sana, ja se tarkoittaa samaa kuin ohjelma, mutta skripteiksi tavataan sanoa pienehköjä ohjelmia tai ns. tulkitsevalla tekniikalla toteutettuja ohjelmia. Lomakkeet ja vuorovaikutteisuus tMyn

3 Palvelinskripti voidaan ohjelmoida tekemään hyvin monenlaisia asioita.
Yksi mahdollinen vaihtoehto on, että se vain lähettää saamansa tiedot sähköpostitse johonkin osoitteeseen. Samaa palvelinskriptiä voidaan käyttää usean eri lomakkeen kautta. Tehdään pieni hakulomake (siis pelkkä käyttöliittymä): Lomakkeet ja vuorovaikutteisuus tMyn

4 Lomakkeet ja vuorovaikutteisuus
tMyn

5 Lomakkeet ja vuorovaikutteisuus
tMyn

6 Lomakkeen yleisrakenne on siis:
<form action=”palvelinskripti” method=”metodi”> lomakkeen kenttiä, ym. </form> Palvelinskripti ilmaistaan osoitteella (URL) ja metodina on joko get tai post. Yksinkertaistaen sanottuna get on tarkoitettu käytettäväksi silloin, kun skripti tekee pelkkää tiedonhakua eikä muuta eikä muutoin vaikuta mihinkään, ei edes lähetä sähköpostia. Lomakkeet ja vuorovaikutteisuus tMyn

7 Yleisimmät kenttien tyypit voidaan ryhmitellä seuraavasti:
Lomakkeen sisällä voi olla kokonaisia kappaleita ja jopa taulukoita ja muita lohkorakenteita. Hyvä periaate on, että ennen kutakin syöttökenttää on selitys, joka kertoo kentän merkityksen, ja että yleensä selitys ja kenttä ovat samalla rivillä, jolla ei ole mitään muuta. Lomakkeen sisällä voi olla myös pitempiä selityksiä, kuten yleisiä täyttöohjeita. Varsinaisten syöttökenttien luomiseen on kolme erilaista elementtiä: input, textarea ja select. Yleisimmät kenttien tyypit voidaan ryhmitellä seuraavasti: Lomakkeet ja vuorovaikutteisuus tMyn

8 <input type=”submit” name=”kasky” value=”Lähetä”>
Lähetyskenttä eli input type=”submit” –kenttä. Se luo painikkeen tai vastaavan, jota käyttäen lomakkeen voi lähettää. Vähintään yksi sellainen on syytä olla jokaisessa lomakkeessa, koska vain se takaa, että käyttäjä voi lähettää lomakkeen! <input type=”submit” name=”kasky” value=”Lähetä”> value-määrite ilmoittaa painikkeeseen tulevan tekstin. Jos name-määrite on käytössä, niin sillä voidaan viitata elementtiin palvelinskriptissä. Tavallaan tämän kentän muunnelma, mutta siitä monella tapaa poikkeava on kuvapainike, input type=”image”. Lomakkeet ja vuorovaikutteisuus tMyn

9 Jos kuvallista lähetyskenttää käytetään, siihen on syytä kirjoittaa alt-, name- ja value-määreet, vaikka mikään niistä ei vaikutakaan normaaliin näkyvään esitysasuun. Jos vaikkapa kuvassa hae.gif on teksti ”Hae”, niin sopiva merkkaus voisi olla: <input type=”image” alt=”Hae” name=”Hae” value=”Hae” src=”hae.gif”> Toisto johtuu siitä, että silloin kun selain ei näytä kyseistä kuvaa, osa selaimista esittää sen tilalla alt-määritteen arvon, osa name-määritteen ja osa value-määritteen arvon. Lomakkeet ja vuorovaikutteisuus tMyn

10 Piilokenttä sisältää aina vain type-, name- ja value-määreet.
Piilokenttä (input type=”hidden”), joka välittää palvelinskriptille valmiiksi täytettyä dataa, joka ei ole käyttäjän normaalein keinoin muutettavissa eikä edes nähtävissä. Piilokenttä sisältää aina vain type-, name- ja value-määreet. Piilokenttää käytetään yleensä silloin, kun lomakkeen on luonut palvelinskripti vastaukseksi toisen lomakkeen lähettämiseen. Piilokenttä mahdollistaa tietojen kuljettamisen palvelinskriptiltä toiselle tai – tavallisemmin – skriptin kutsukerrasta toiseen. Alkuperäinen lomake voi olla esim. tilauslomake. Lomakkeet ja vuorovaikutteisuus tMyn

11 Skripti käsittelee sen, laskee tilauksen hinnan ja lähettää selaimelle uuden sivun, jolla on uusi lomake. Minimissään uusi lomake ei sisällä mitään muuta kuin lähetyskentän, jossa on vaikkapa teksti ”OK”, ja joukko piilokenttiä, joissa tiedot tilauksesta kulkevat mukana. Tämän lomakkeen lähettämällä käyttäjä vahvistaa, että haluaa todella tehdä tilauksen. Piilokentän tiedot eivät ole missään muussa mielessä piilossa kuin siinä, että ne eivät näy sivun normaalissa esityksessä: Lomakkeet ja vuorovaikutteisuus tMyn

12 Lomakkeet ja vuorovaikutteisuus
tMyn

13 Lomakkeet ja vuorovaikutteisuus
tMyn

14 Kuten esimerkistä nähdään, hidden-tyyppinen kenttä ei tullut näkyviin.
Kun lomake lähetetään palvelinskriptille (jos sellainen on toteutettu), lähetetään kuitenkin myös tieto siitä, että käyttäjän haluama kieli on suomi (name-value –pari hidden-kentästä). Lomakkeet ja vuorovaikutteisuus tMyn

15 <input type=”text” name=”jokinNimi” size=”42”>
Rivinsyöttökenttä (input type=”text”): yhteen tällaiseen kenttään käyttäjä voi kirjoittaa yhden rivin tekstiä. <input type=”text” name=”jokinNimi” size=”42”> Kentän arvoksi tulee se merkkijono, jonka käyttäjä kenttään kirjoittaa. Elementissä voi olla myös value-määrite, joka tällöin ilmoittaa kentän alkuarvon eli oletusarvon, joka tulee kenttään näkyviin. Käyttäjä voi halutessaan kirjoittaa omaa tekstiään joko alkuarvon täydennykseksi tai sen tilalle. Lomakkeet ja vuorovaikutteisuus tMyn

16 Määrite size ilmoittaa syöttökentän leveyden merkkeinä.
Kyseinen määrite ei rajoita sitä, montako merkkiä käyttäjä voi kirjoittaa; se vaikuttaa vain siihen, montako merkkiä mahtuu näkyviin. Lomakkeet ja vuorovaikutteisuus tMyn

17 Olan yli katseltuna tulkinta on kuitenkin siis hankalaa!
Rivinsyöttökentän kentän muunnelma on ns. salasanakenttä (input type=”password”), jossa käyttäjä ei näe kirjoittamaansa tekstiä, ei ainakaan selväkielisenä. Sinänsä tieto lähtee aivan samanlaisessa muodossa kuin jos olisi käytetty rivinsyöttökenttää. Olan yli katseltuna tulkinta on kuitenkin siis hankalaa! Lomakkeet ja vuorovaikutteisuus tMyn

18 Kenttä on yleensä muotoa <input type=”file” name=”nimi”>
Tiedostokenttä (input type=”file”), jossa käyttäjä voi valita omasta koneestaan tiedoston, jonka sisältö lähtee muiden tietojen mukana. Kenttä on yleensä muotoa <input type=”file” name=”nimi”> Siitä muodostuva lomakedatan osa sisältää kentän nimenä annetun nimen ja arvona käyttäjän antaman tiedoston koko sisällön. Jos lomakkeessa on tällainen kenttä, tulee form-elementissä olla määrite enctype=”multipart/form-data”, jotta käsittely olisi mahdollista. Lomakkeet ja vuorovaikutteisuus tMyn

19 Jotkin selaimet eivät tue tätä kenttätyyppiä lainkaan.
Useimmat tukevat mutta melko hankalakäyttöisellä tavalla. Lomakkeet ja vuorovaikutteisuus tMyn

20 Tekstialue-elementti ei ole tyhjä vaan vaatii lopputagin.
Tekstialue (textarea), jollaiseen käyttäjä voi kirjoittaa useita rivejä tekstiä. Tekstialue-elementti ei ole tyhjä vaan vaatii lopputagin. Alku- ja lopputagin välissä voi olla tekstiä, joka määrää tällöin kentän alkuarvon, oletusarvon. Elementissä tulee olla name-määritteen lisäksi rows-määrite ja cols-määrite, jotka määräävät näkyvän syöttöalueen vaakarivien (rows) ja sarakkeiden (columns) määrän, siis käytännössä suorakaiteen muotoisen syöttöalueen ulottuvuudet. Nämä eivät rajoita syötettävän tiedon määrää. Lomakkeet ja vuorovaikutteisuus tMyn

21 Esimerkkinä tekstialueen määrittelystä:
<textarea name=”teksti" rows="20" cols="80"> Tämä on eka rivi. Nämä ilmestyvät oletusarvoiksi. </textarea> Lomakkeet ja vuorovaikutteisuus tMyn

22 Lomakkeet ja vuorovaikutteisuus
tMyn

23 Lomakkeet ja vuorovaikutteisuus
tMyn

24 Valikkokenttä: select
Tämä elementti luo pudotusvalikon, josta käyttäjä voi valita yhden niistä vaihtoehdoista, jotka option-elementtien sisällä ilmoitetaan. Jos select-elementissä on määrite multiple, niin silloin voidaan valita useita tyrkyllä olevista vaihtoehdoista. Esimerkkikoodissa (edessä) size=4 tarkoittaa, että neljä vaihtoehtoa on näkyvillä. Alkutilanteessa kaksi riviä on merkattu valituksi määritteellä selected, joita vastaavat sisäiset arvot (jotka välittyvät palvelinskriptille) ovat puolestaan komp_1_a ja komp_1_d. Lomakkeet ja vuorovaikutteisuus tMyn

25 Palvelinpuolen skriptille siis lähetetään name/value parit:
komponenttienValinta=komp_1_a komponenttienValinta=komp_1_d Jos valittuja (tai edes toista niistä) ei säilytetä merkattuina, niin sitten palvelinpuolen skriptille ei välity mitään. Jos halutaan valita yksitellen jotkin vaihtoehdot, niin silloin pidetään Ctrl-näppäintä alhaalla. Lomakkeet ja vuorovaikutteisuus tMyn

26 Lomakkeet ja vuorovaikutteisuus
tMyn

27 Lomakkeet ja vuorovaikutteisuus
tMyn

28 Valintanappi: input type=”radio”
Valikon tekemiseen valintanapeilla käytetään useita loogisesti yhteenkuuluvia elementtejä. Ne vastaavat tavallaan select-elementin sisältämiä option-elementtejä, mutta yhteenkuuluvuus perustuu name-määritteisiin eikä siihen, minkä elementin sisällä input-elementit ovat. Loogisen yhteenkuuluvuuden korostamiseksi on suotavaa kirjoittaa valintanapit fieldset-elementin sisään. Toiminnan kannalta se ei ole välttämätöntä. Vaihtoehdoista siis valitaan ainoastaan yksi. Lomakkeet ja vuorovaikutteisuus tMyn

29 Yksi näistä loogisesti yhteen kuuluvista elementeistä (radio button) voidaan valita jo oletusarvoisesti. Tämä tapahtuu checked-määreellä. Lomakkeet ja vuorovaikutteisuus tMyn

30 Lomakkeet ja vuorovaikutteisuus
tMyn

31 Lomakkeet ja vuorovaikutteisuus
tMyn

32 Edellä todettiin, että loogisen yhteenkuuluvuuden korostamiseksi on suotavaa kirjoittaa valintanapit fieldset-elementin sisään. Kun käytetään fieldset-elementtiä, on sen sisälle kirjoitettava (tai ei toki ole pakko kirjoittaa..) ensimmäiseksi legend-elementti, jossa on teksti, joka toimii otsikkona tai selitteenä koko fieldset-elementille eli yhteenkuuluvien kenttien joukolle. Lomakkeet ja vuorovaikutteisuus tMyn

33 Lomakkeet ja vuorovaikutteisuus
tMyn

34 Lomakkeet ja vuorovaikutteisuus
tMyn

35 tabindex: This attribute specifies the position of the current element in the tabbing order for the current document. The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard. The tabbing order may include elements nested within other elements. Lomakkeet ja vuorovaikutteisuus tMyn

36 Jos halutaan, että valinta voitaisiin tehdä myös painamalla radionapin vieressä olevaa tekstiä, niin silloin on lisättävä label for –määrite. Tällä label for –määritteellä on oltava sama arvo kuin mitä on id-määritteellä. id: This attribute assigns a name to an element. This name must be unique in a document. Lomakkeet ja vuorovaikutteisuus tMyn

37 Lomakkeet ja vuorovaikutteisuus
tMyn

38 Lomakkeet ja vuorovaikutteisuus
tMyn

39 Hupsista, nyt tuli nuo valintanapit vasta tekstin jälkeen.
Vaihdetaan järjestys takaisin ”oikeaan” järjestykseen: Lomakkeet ja vuorovaikutteisuus tMyn

40 Lomakkeet ja vuorovaikutteisuus
tMyn

41 Lomakkeet ja vuorovaikutteisuus
tMyn

42 Asetusnappi: input type=”checkbox”
Tämän elementin esitysmuoto on tyypillisesti pieni ruutu, jota napsauttamalla käyttäjä voi päättää ottaa mukaan jonkin vaihtoehdon (nyt siis ei valita yhtä vaihtoehtoa monesta vaan 0…n vaihtoehtoa). Esim jos <input type=”checkbox” name=”lisuke” value=”1”> Niin lomakedataan tulee mukaan lisuke=1, jos asetusnappi on valittuna, kun lomake lähetetään. Lomakkeet ja vuorovaikutteisuus tMyn

43 Lomakkeet ja vuorovaikutteisuus
tMyn

44 Lomakkeet ja vuorovaikutteisuus
tMyn