Demo 5 - WWW-lomakkeet

English version

Seuraavissa tehtävissä toteutetaan WWW-lomake, jonka avulla on kartoitetaan TV-ohjelmien katsomistottumuksia. Seuraavissa tehtävissä kokeillaan erilaisia lomakkeen ominaisuuksia, joten mieti jokaisen lomakekentän yhteydessä olisiko asia voitu toteuttaa paremmin. Ajatuksia, ideoita ja vinkkejä voit hakea kurssin luennolta 8.

1. Kopioi seuraavassa oleva HTML-sivun koodi lomakesivusi pohjaksi. Seuraavissa tehtävissä määriteltävät lomake-elementit tulevat form-elemetin sisään. Huomaa, että lomakerungossa on seuraavat määritykset valmiina:
   • Lomakkeen tiedot käsittelevä ohjelma on määritelty action-attribuutissa. Harjoitustyössä käytetään samaa ohjelmaa!
   • Lomakkeen tiedot lähetetään post-metodin avulla.

   <?xml version="1.0" encoding="ISO-8859-1"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
   <head>
   <title>Esimerkkilomake</title>
   </head>
   <body>
   <h1></h1>
   <form action="http://appro.mit.jyu.fi/cgi-bin/laheta/laheta.cgi" 
     method="post">
   
   </form>
   </body>
   </html>
   

2. Tee kuusi yksirivistä tekstikenttää(input-elementti text-tyyppi), joiden avulla kysytään käyttäjän

   Kiinnitä erityisesti huomiota lomake-elementtien nimeämiseen (name-ominaisuus), koska lomakkeen lähettämisen yhteydessä nimi tulee näkyviin!

   • Nimi,
   • Katuosoite,
   • Postitoimipaikka,
   • Postinumero (Maksimi pituus rajoitettava 5 merkkiin),
   • Puhelinnumero ja
   • Sähköpostiosoite

   Muista käyttää kenttien otsikkona label-elementtiä ja yhdistä label-elementti ja lomakekenttä toisiinsa! (for- ja id-ominaisuus)

3. Tallenna ja validoi lomakesivu ennen tehtävien jatkamista.
4. Toteuta vastaajan sukupuolen kysyminen valintanapin (radio-tyyppi) avulla. Seuraavassa on esitetty esimerkkivaihtoehdot:
   • En kerro
   • Mies
   • Nainen

   Varmista valintanapin toiminta selainikkunassa. Jos saat valinnan useampaan nappiin yhtä aikaa, niin tarkista name-attribuutin arvot!

5. Toteuta vastaajan ikäjakauman kysyminen valintanapin (radio) avulla. Seuraavassa on esitetty esimerkkivaihtoehdot:
   • < 20 vuotta
   • 20 - 30 vuotta
   • 30 - 40 vuotta
   • 40 - 50 vuotta
   • 50 - 60 vuotta
   • > 60 vuotta

   Onko ikäjakauman kysymiseen olemassa muita vaihtoehtoja? Millaisia ne ovat ja miten ne toimivat käyttäjän kannalta?

6. Toteuta vastaajan sivilisäädyn kysyminen valintaruudun (checkbox-tyyppi) avulla. Seuraavassa on esitetty esimerkkivaihtoehdot:
   • Naimaton
   • Naimisissa
   • Leski
   • Asumuserossa

   Onko siviilisäädyn kysymiseen olemassa muita vaihtoehtoja? Millaisia ongelmia valintaruudun käyttäminen aiheuttaa?

7. Laita jokin alkio edellisestä valintaruudusta oletusarvoksi (checked).
8. Toteuta vastaajan kielitaidon kysyminen valintaruudun (checkbox) avulla. Seuraavassa on esitetty esimerkkivaihtoehdot:
   • Suomi
   • Ruotsi
   • Englanti
   • Saksa
   • Venäjä
   • Ranska
   • Muu kieli, mikä?
9. Toteuta vastaajan koulutuksen kysyminen valintalistan (select-elementti) avulla. Seuraavassa esimerkkivaihtoehdot:
   • Peruskoulu tai kansakoulu
   • Lukio
   • Ammattikoulu
   • Korkeakoulu tai yliopisto
10. Tee seuraavaksi lomakkeelle lähetyspainike (submit-tyyppi) ja kokeile lomakkeen toimintaa. Jos lomake on tehty oikein, niin lähettämisen jälkeen pitäisi tulla näkyville palaute, jossa kiitetään tilauksen tekemisestä sekä luetellaan kaikki lähetettyjen kenttien nimi:arvo-parit.
11. Toteuta vastaajan televisionkatseluajan kysyminen useampivalintaisen (multiple) valintalistan (select) avulla. Seuraavassa on esitetty esimerkkivaihtoehdot:
    • Aamuyöllä (1-6)
    • Aamulla (6-10)
    • Aamupäivällä (10-12)
    • Iltapäivällä (12-17)
    • Illalla (17-21)
    • Yöllä (21-01
12. Laita jokin edellisen valintalistan alkio oletusarvoksi (selected).
13. Toteuta vastaajan suosikkiohjelman kysyminen yksivalintaisen valintalistan (select) avulla. Käytä eri kanavien ohjelmien erottamiseen option-listan ryhmittelyä eli optgroup-elementtiä. Kokeile eri selaimilla miten optgroup toimii. Seuraavassa on esitetty esimerkkivaihtoehdot:
    • TV1
      • Kyllä Jeeves hoitaa
      • Frasier
      • Avara luonto
    • TV2
      • Keski-Suomen uutiset
      • Teletapit
      • Pikku Kakkonen
    • MTV3
      • Kauniit ja rohkeat
      • Teho-osasto
      • Napakymppi
14. Tee loppuun vielä useampirivinen vapaatekstikenttä (textarea-elementti), johon käyttäjä voi kirjoittaa mielipiteensä kyselystä.
15. Kokeile lomakkeen toimintaa ja varmista, että kaikki lomakkeen kenttiin täytetyt arvot tulevat näkyville oikeinpalautesivulle.
16. Ryhmittele kysymykset fieldset-elementin avulla aihealueen mukaan ja tee ryhmälle otsikot legend-elementillä. Esimerkiksi henkilötiedot omaksi ryhmäkseen.
17. Seuraavaksi muokataan lomakkeen tiedot käsittelevän CGI-ohjelman toimintaa. Ohjelman toimintaa voidaan muokata seuraavassa listassa esiteltyjen piilokenttien (hidden) avulla. Kokeile lomakkeen toimintaa jokaisen muutoksen jälkeen. Tarkemmat ohjeet löytyvät cgi-ohjeesta.
    • Määrittele sähköpostiosoitteeksi, johon lomake lähetetään, oma sähköpostiosoitteesi (name="lomake_email" value="oma_sahköposti@palvelin.fi"). Määrityksen jälkeen saat lomakkeen tiedot myös sähköpostitse, joten tarkista sähköpostisi tehtävien välissä.
    • Määrittele palautelomakkeen title-elementiksi haluamasi teksti (lomake_title).
    • Määrittele palautelomakkeen h1-elementiksi haluamasi teksti (lomake_h1).
    • Määrittele palautelomakkeen ensimmäisen p-elementin arvoksi haluamasi teksti (lomake_p_alku).
    • Tarkista edellisten määritysten toiminta huolellisesti ja katso palautesivun lähdekoodi.
    • Määrittele palautelomakkeen käyttämäksi css-tiedostoksi edellisissä demoissa tekemäsi ja www-palvelimelle siirtämäsi css-tiedosto (lomake_stylesheet).
    • Kokeile palautesivun vaihtamista kokonaan toiseksi sivuksi, mutta poista määritys välittömästi kokeilun jälkeen. (lomake_URL).
    • Muuta toisessa tehtävässä tekemäsi email-kentän name-attribuutin arvoksi lomake_lahettaja ja nimi-kentän name-attribuutin arvoksi lahettajan_nimi.

      Tarkoituksena on, että kun käyttäjä täyttää kyseiset kentät, niin hänen tietonsa näkyvät sähköpostin lähettäjäkentässä (From) ja lomakkeen tiedot lähetetään myös hänelle.

18. Tarkista lomaketiedostosi syntaksi validaattorilla.
19. Tarkista lomaketiedostosi esteettömyys Bobbylla.

Lisätehtävät

1. Määrittele lomakekentille tabindex-ominaisuudella poikkeava tabulointijärjestys. Kokeile tabulointijärjestyksen toimintaa eri selaimilla!
2. Määrittele kenttien otsikoille accesskey-ominaisuuden avulla pikanäppäimet. Kokeile pikanäppäinten toimintaa eri selaimilla.
3. Muotoile lomakkeen ulkoasu tyylien avulla haluamallasi tavalla. Kokeile määritysten toimintaa eri selaimissa!