WWW-lomakkeet - Demo 5

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.

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 (ei mitään tekemistä sähköpostin kanssa) 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>
```
Tee kuusi yksirivistä tekstikenttää (input-elementin text-tyyppi), joiden avulla kysytään käyttäjän osoitetietoja.
Kiinnitä erityisesti huomiota lomake-elementtien nimeämiseen (name-ominaisuus), koska lomakkeen lähettämisen yhteydessä nimi tulee näkyviin!
- Nimi,
- Katuosoite,
- Postitoimipaikka,
- Postinumero (Maksimipituus rajoitettava viiteen (5) merkkiin),
- Puhelinnumero ja
- Sähköpostiosoite
Lisää kenttien otsikoiksi label-elementti ja yhdistä label-elementti ja lomakekenttä toisiinsa for- ja id-ominaisuuksilla!
Tallenna ja validoi lomakesivu ennen tehtävien jatkamista.
Toteuta vastaajan sukupuolen kysyminen valintanapin (input-elementin 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!
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? Mitä on pielessä esimerkkivaihtoehdoissa?
Tallenna ja validoi lomakesivu ennen tehtävien jatkamista.
Toteuta vastaajan sivilisäädyn kysyminen valintaruudun (input-elementin 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?
Laita jokin alkio edellisestä valintaruudusta oletusarvoksi (checked="checked").
Toteuta vastaajan kielitaidon kysyminen valintaruudun (checkbox) avulla. Seuraavassa on esitetty esimerkkivaihtoehdot:
- Suomi
- Ruotsi
- Englanti
- Saksa
- Venäjä
- Ranska
- Muu kieli, mikä?
Toteuta vastaajan koulutuksen kysyminen valintalistan (select-elementti) avulla. Seuraavassa esimerkkivaihtoehdot:
- Peruskoulu tai kansakoulu
- Lukio
- Ammattikoulu
- Korkeakoulu tai yliopisto
Tee seuraavaksi lomakkeelle lähetyspainike (input-elementin 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.
Toteuta vastaajan televisionkatseluajan kysyminen useampivalintaisen (multiple="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)
Mikä lomake-elementti soveltuisi mielestäsi paremmin katseluajan kysymiseen?
Laita jokin edellisen valintalistan alkio oletusarvoksi (selected="selected").
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
  - Maailman ympäri
  - Frasier
  - Avara luonto
- TV2
  - Keski-Suomen uutiset
  - Makupalat
  - Pikku Kakkonen
- MTV3
  - Kauniit ja rohkeat
  - Teho-osasto
  - Salatut elämät
Tee loppuun vielä useampirivinen vapaatekstikenttä (textarea-elementti), johon käyttäjä voi kirjoittaa mielipiteensä kyselystä.
Kokeile lomakkeen toimintaa ja varmista, että kaikki lomakkeen kenttiin täytetyt arvot tulevat näkyville oikein palautesivulle.
Ryhmittele kysymykset fieldset-elementin avulla aihealueen mukaan ja tee ryhmälle otsikot legend-elementillä. Esimerkiksi henkilötiedot kannattaa laittaa omaksi ryhmäkseen.
Seuraavaksi muokataan lomakkeen tiedot käsittelevän CGI-ohjelman toimintaa. Ohjelman toimintaa voidaan muokata seuraavassa listassa esiteltyjen piilokenttien (input-elementin hidden-tyypin) 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ä. Seuraavassa lyhyt esimerkki:
```
<input type="hidden" name="lomake_email" value="nobody@it.jyu.fi" />
```
- Määrittele palautelomakesivun title-elementiksi haluamasi teksti (lomake_title).
- Määrittele palautelomakesivun h1-elementiksi haluamasi teksti (lomake_h1).
- Määrittele palautelomakesivun 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. Toiminnan näet täyttämällä lomakkeen tiedot omilla sähköpostiosoitetiedoillasi ja nimelläsi.
Tarkista lomaketiedostosi syntaksi validaattorilla.
Tarkista lomaketiedostosi esteettömyys Bobbylla.

Lisätehtävät

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

http://appro.mit.jyu.fi/tietoverkot/demot/demo5/