WWW-lomakkeet - Demo 6

• Mallivideot
• Sähköpostilomake
• Lomakkeen muotoilu
• Lisätehtävät
  • Kyselylomakkeen tiedot
  • Tehtävät

Näissä demoissa opetellaan WWW-lomakkeisiin liittyviä asioita.

Sähköpostilomake

Tehdään sähköpostin lähettämiseen tarkoitettu lomake. Esimerkkejä lomake-elementtien tekemiseen löydät luennolta 7. Lomakkeen rakenteesta halutaan oikeassa laidassa olevan kuvan kaltainen (kuvaa klikkaamalla näet sen suurempana). Ulkoasu määrätään vasta lomakkeen luonnin jälkeen, joten aluksi ei kannata välittää ulkoasusta.

1. Luo W:\www\-hakemistoon alihakemisto demo6. Tallenna lomake.css demo6-hakemistoon.
2. Aloita uusi XHTML-dokumentti. Laita nimeksi index.html ja tallennushakemistoksi äsken luomasi demo6-hakemisto.
3. Lisää linkki CSS-tyylitiedostoon lomake.css.
4. Muokkaa sivun title- ja h1-elementit sopiviksi.
5. Lisää XHTML-sivulle lomake (form). Älä toistaiseksi laita mitään action-attribuuttiin.
6. Lisätään lomakkeelle tekstikenttä. Lisää ensin label-elementti. Kirjoita otsikkotekstiksi Aihe. Napauta enteriä otsikkotekstin jälkeen ja lisää tekstikenttä (input-elementti). Laita lopuksi label-elementti ja input-elementti saman p-elementin sisään.
7. Lisää input-elementille id-ominaisuuteen oma, yksilöllinen arvo.
8. Yhdistä label-elementti ja lomakekenttä toisiinsa for-ominaisuudella.
9. Tallenna dokumentti. Avaa lomake selaimessa ja testaa, että label- ja input-elementit ovat yhdistettyinä napauttamalla lomakekentän otsikkoa. Nyt kursorin pitäisi mennä siihen lomakekenttään, johon yhdistäminen on tehty.
10. Lisää input-elementille name-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuin id-attribuutti!).
11. Kokeile sivua selaimella. Laita tekstikentille vielä kiinteä esityspituus size-ominaisuudella:

    <p><label for="aihe">Aihe:</label>
    <input type="text" id="aihe" name="aihe" size="40" /></p>

12. Tee uusi kappale (p). Lisää kappaleen sisään label-elementti, johon teksti Prioriteetti.
13. Lisää kappaleen sisään label-elementin jälkeen valintalista (select).
14. Kirjoita option-elementteihin vaihtoehdot Korkea, Normaali ja Alhainen.

    <option>Normaali</option>

15. Valitse vaihtoehdoista Normaali valituksi oletuksena (selected="selected").
16. Yhdistä label- ja select-elementti toisiinsa for- ja id-ominaisuuksilla. Anna select-elementille name-ominaisuuteen jokin järkevä arvo.
17. Tee uusi kappale (p). Lisää edelliseen tapaan kappaleen sisälle uusi label, jonka sisällöksi kirjoitat Vastaanottaja ja valintalista (select).
18. Lisää valintalistan sisään valintaryhmä (optgroup). Anna valintaryhmälle otsikoksi (label) opettajat.
19. Lisää valintaryhmään kolme valintaa (option):
    • Antti Ekonoja
    • Jukka Mäntylä
    • Tommi Lahtonen
20. Lisää toinen valintaryhmä, jolle annat otsikoksi (label) tuntiopet ja lisää valinnat (option):
    • Mikko Aarnio
    • Jaakko Kaski
21. Kokeile lomakkeen toimintaa Firefoxissa.
22. Lisää jokaisen edellä lisätyn valinnan (option) value-ominaisuuden arvoksi kyseisen henkilön sähköpostiosoite:
    • Antti: antti.j.ekonoja@jyu.fi
    • Jukka: jmantyla@iki.fi
    • Tommi: tommi.j.lahtonen@jyu.fi
    • Mikko: mipeaarn@jyu.fi
    • Jaakko: jkaski@jyu.fi

    <option value="antti.j.ekonoja@jyu.fi">Antti Ekonoja</option>

23. Muuta vielä valintalistalle mahdollisuus valita useampi vastaanottaja. Laita siis valintalistan multiple-ominaisuuden arvoksi multiple. Laita myös valintalistan name-ominaisuuden arvoksi vastaanottaja.

    <select name="vastaanottaja" id="vastaanottaja" multiple="multiple">

24. Kokeile Firefoxilla lomakkeen toimintaa. CTRL- ja SHIFT-näppäimien avulla voit valita useamman vastaanottajan.
25. Tehdään valintanappi-lista formaatin valinnalle. Lisää uusi p-elementti, jonka sisään laita label-elementti, jonka sisälle lisäät suoraan radio-painikkeen, ja vasta tämän jälkeen otsikkotekstiksi Teksti.

    <p><label><input type="radio" value="" />Teksti</label></p>

26. Nyt label- ja input-elementti liittyvät suoraan toisiinsa ilman for-ominaisuutta. Lisää vielä kaksi label- ja input-paria (molemmat oman p-elementin sisään). Laita otsikoiksi HTML ja XML.
27. Lisää kaikille valintanapeille sama arvo name-attribuuttiin.
28. Anna kullekin valintanapille oma arvo value-attribuuttiin, joka näkyy lomakkeen käsittelijälle tietoja lähetettäessä.
29. Valitse oletusvalinnaksi Teksti lisäämällä kyseiselle input-elementille määre checked="checked". Ryhmän otsikko Formaatti lisätään myöhemmin.

    <p><label><input type="radio" name="formaatti" checked="checked" value="teksti" />Teksti</label></p>

30. Lisää uusi label, jonka otsikoksi kirjoitat Lähetä myös tekstiviesti. Lisää label:in sisälle valintaruutu (checkbox).
31. Aseta valintaruudun name-ominaisuuden arvoksi tekstiviesti ja value-ominaisuuden arvoksi Kyllä.
32. Lisää vielä toinenkin valintaruutu otsikon (label) kera. Kirjoita otsikoksi Lähetä myös tavallinen kirje. Keksi tälle valintaruudulle järkevät arvot value- ja name-ominaisuuksiin.
33. Tee uusi kappale (p-elementti). Lisää kappaleen sisään ensin label-elementti tekstillä Viesti.
34. Täydennä lomake varsinaisella tekstialueella (textarea, lisää se myös saman p-elementin sisään, missä label-elementtikin on). Laita tekstialueelle näkymään 20 riviä (rows), joista kunkin pituudeksi 50 merkkiä (cols). Nimeä tekstialue antamalla name-ominaisuuteen jokin sopiva arvo. Yhdistä tekstialue otsikkoon id- ja for-attribuuttien avulla.
35. Lisää loppuun vielä yksi p-elementti ja sen sisälle Lähetä viesti -painike (submit). Anna painikkeen teksti kirjoittamalla sopiva arvo value-ominaisuuteen.
36. Lisää kullekin lomake-elementille (input, select, textarea) vielä tabindex-ominaisuuteen numeroarvo, joka kertoo monesko elementti on sarkainjärjestyksessä. Ominaisuutta tarvitaan erityisesti silloin, jos elementtien käyntijärjestys ei ole sama kuin esiintymisjärjestys XHTML-dokumentissa.
37. Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Katso mallia demon alussa olevasta mallikuvasta (Otsikkotiedot ja Viestiosa siis omiksi ryhmikseen). Kirjoita ryhmän alkuun <fieldset> ja loppuun </fieldset>. Ryhmittelyt tulevat form-elementin sisälle.
38. Ryhmän otsikko lisätään fieldset-elementin sisälle <legend> ... </legend> -elementillä. Laita osien otsikoiksi Otsikkotiedot ja Viestiosa.
39. Lisää viestiosan (fieldset) sisälle toinen fieldset-ryhmä, jonka sisälle rajaat formaatti-valintanapit. Anna alueen nimeksi Formaatti legend-elementillä.
40. Lisää viestiosan (fieldset) sisälle myös toinen fieldset-ryhmä, jonka sisälle rajaat Lähetä myös tekstiviesti ja Lähetä myös tavallinen kirje -valintaruudut. Anna alueen nimeksi Lisäasetukset legend-elementillä.
41. Muokkaa seuraavaksi form-elementin ominaisuuksia:
    • action-attribuutti kertoo miten tai millä ohjelmalla lomakkeen lähetetyt tiedot käsitellään. Laita tähän http://appro.mit.jyu.fi/cgi-bin/view.cgi.
    • method-attribuutti kertoo tavan, jolla lomakkeen tiedot lähetetään. Laita arvoksi post.
42. Tallenna ja testaa lomaketta selaimella. Kokeile lähettää lomake painamalla Lähetä viesti -painiketta, niin näet millaisia tietoja lomake lähettää lomakkeen käsittelijälle.
43. Validoi HTML-tiedostosi ja korjaa mahdolliset virheet.

Lomakkeen muotoilu

Lomake-elementtien ulkoasun muokkaaminen toimii yleensä ottaen aika huonosti, sillä selaimiin on määrätty usein melko kiinteästi, miltä lomakkeet näyttävät. Hieman asemointia kuitenkin pystyy tekemään:

1. Valitse Web Developer -työkalupalkista CSS | Edit CSS.
2. Lisää fieldset-elementille taustasta poikkeava väri. Värin voit valita myös kuvasta tai paletista ColorZilla-työkalun avulla.
3. Muuta kaikkiin lomake-elementteihin (input, option, textarea) tasalevyinen kirjasin eli esimerkiksi Courier New ja yleisvaihtoehto monospace.
4. Määrää erilainen taustaväri toisen fieldset-lohkon sisällä olevalle fieldset-lohkolle.
5. Tasataan lomake-elementit samalle tasolle vaakasuunnassa. Muuta ensin CSS:ssä label-elementin rivittyminen tekstin tasosta (engl. inline) lohkoksi (engl. block).
6. Määrää label-elementin leveydeksi 30%.
7. Liu'uta (float) label-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvät label-elementtien oikealle puolelle.
8. Estetään vielä toisen label-elementin rivittyminen samalle riville toisen label-elementin kanssa. Tämä onnistuu clear-ominaisuudella.
9. Lisää myös textarea-elementille clear-ominaisuus, jolloin saat sen rivittymään otsikon alapuolelle. Tee textarea-elementistä vielä lohkotason elementti, niin se rivittyy label-elementin alapuolelle isoillakin näytöillä.
10. Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.
11. Testaa lopuksi selaimella, että lomakkeesi näyttää suunnilleen mallikuvan lomaketta vastaavalta.
12. Validoi CSS-tiedostosi ja korjaa mahdolliset virheet.

Lisätehtävät

Kuvitteellinen kahvilayritys haluaisi tehdä nettisivuilleen pienimuotoisen kyselylomakkeen, jolla he voisivat kartoittaa asiakkaiden maku- ja kokemusmaailmaa. Kävijöiltä halutaan kerätä tietoja seuraavasti:

Kyselylomakkeen tiedot

• Taustatiedot
  • Sähköpostiosoite (tekstikenttä)
    • Oletuksena etunimi.sukunimi@yritys.invalid
  • Ikä (valintalista), jossa vaihtoehdot
    • < 15 vuotta
    • 15 - 20 vuotta
    • 20 - 25 vuotta (oletus)
    • 25 - 30 vuotta
    • > 30 vuotta
• Palaute
  • Suosikkijuoma (valintaruutu), jossa vaihtoehtoina:
    • kahvi
    • espresso
    • cappuccino
    • makuteet
    • limonadi (oletus)
  • Musiikki (usean vaihtoehdon valintalista), jossa vaihtoehdot ryhmiteltynä (optgroup) seuraavasti:
    • Jazz
      • Perinteinen jazz (oletus)
      • Vokaalipainotteinen jazz
      • Groove jazz
    • Blues
      • Rhythm & Blues
      • Kitarablues
    • Pop
      • MTV-dance
      • Trance-tekno
      • Rauhallinen elektroninen

Tehtävät

1. Luo demo6-hakemistoon uusi hakemisto kahvila. Luo uusi XHTML-dokumentti tähän hakemistoon index.html-nimellä. Laita link-elementti viittaamaan form.css:ään ja luo tätä varten uusi tyhjä tiedosto.
2. Toteuta kuvan mukainen lomake osaksi kahvilan sivustoa. Napauta mallikuvaa, niin saat näkyviin isomman esimerkkikuvan.
3. Määrittele XHTML-dokumenttiin sopivat lomake-elementit. Huomioi vaatimusmäärittelyssä annetut asiat. Ulkoasusta ei kannata välittää vielä lomake-elementtejä tehdessä. Ulkoasua voit miettiä mallikuvan mukaiseksi demon lopuksi, jos jää ylimääräistä aikaa.
4. Tarkista, että erikoismerkit tulevat oikealla tavalla koodatuiksi, esim. &lt; = <, &gt; = > ja &amp; = &.
5. Kopioi edellisen lomakkeen muotoiluista sopivat määreet tämän lomakkeen CSS-tyylitiedostoon form.css.
6. Lisää CSS:n avulla sopivat värimääritykset lomakkeen eri osiin (esim. #ffeeff ja #fffcff). Tallenna taustakuvio samaan hakemistoon lomakkeen kanssa ja määrittele lomakkeelle toistuva taustakuviointi viittaamalla siihen CSS:ssä.