WWW-lomakkeet

• Mallivideot
• Sähköpostilomake
• Kyselylomake
  • Lomakkeen tiedot
  • Muut vaatimukset
  • Tehtävät

Sähköpostilomake

Maililomake -mallivideo

Tehdään sähköpostin lähettämiseen tarkoitettu lomake. Tämän tyyppistä lomaketta käytetään esimerkiksi Webmail-palvelussa. Esimerkkejä lomake-elementtien tekemiseen löydät luennolta 5. Lomakkeesta halutaan oikeassa laidassa olevan kuvan kaltainen. Lomakkeen luontivaiheessa ei kannata välittää lomakkeen ulkoasusta. Ulkoasu toteutetaan myöhemmissä demoissa.

1. Luo V:\www\-hakemistoon hakemisto demo3. Tallenna demo2.css demo3-hakemistoon nimellä form.css (napauta linkkiä oikealla, valitse Save target as ja vaihda nimeä). Luo vielä demo3-hakemistoon alihakemisto email.
2. Aloita uusi dokumentti Xetorissa valinnalla File | New.
3. Kopioi XHTML 1.0 Strict -dokumenttityypin mukainen mallipohja dokumentin pohjaksi.
4. Muuta otsikkotietoihin css-tiedostoviitteeksi ../form.css (link-elementin href-ominaisuus). Muokkaa title- ja h1-elementit sopiviksi.
5. Tallenna tiedosto nimellä index.html email-hakemistoon.
6. Lisää seuraavat rivit body-elementin sisälle:

   <form action="kasittelija.cgi" method="post" >
   </form>
   

   • Lomake-elementit tulevat form-elementin sisään.
   • action-attribuutti kertoo miten tai millä ohjelmalla lomakkeen lähetetyt tiedot käsitellään.
   • post-metodi (ei mitään tekemistä sähköpostin kanssa) kertoo tavan, jolla lomakkeen tiedot lähetetään.
7. Lisää form-elementin sisään väliaikaisesti yleinen div-lohko, jonka sisälle muut lomake-elementit tulevat.
8. Lisää lomakkeelle kolme tekstikenttää (input-elementti).
9. Lisää input-elementeille id-ominaisuuteen kullekin oma, yksilöllinen arvo.
10. Lisää tekstikentille otsikot label-elementtillä. Laita otsikkotekstiksi Vastaanottaja, Kopio ja Aihe. Yhdistä label-elementti ja lomakekenttä toisiinsa for- ja id-ominaisuuksilla.
11. 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.
12. Lisää jokaiselle input-elementeille name-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuin id-attribuutti!).
13. Kokeile sivua selaimella. Kentät saattavat tulla putkeen, jolloin niitä kannattaa ryhmitellä kappaleiksi merkitsemällä kukin input-elementti p-elementin sisälle. Laita tekstikentille myös kiinteä esityspituus size-ominaisuudella.

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

14. Lisää valintalista viestin tärkeyden eli prioriteetin valinnalle. Laita valintalista p-elementin sisälle kuten edellä. Lisää valintavaihtoehdoiksi Korkea, Normaali ja Alhainen. Valitse vaihtoehdoista Normaali valituksi oletuksena.
15. Tee valintanappi, jolla valitaan lähetettävän tiedon muoto eli formaatti. Laita vaihtoehdoiksi Teksti, HTML ja XML. Valitse oletusvalinnaksi teksti. Muista, että valintanappien kaikilla kohdilla on oltava sama name-attribuutin arvo.
16. Täydennä lomake varsinaisella tekstialueella. Laita tekstialueelle näkymään 20 riviä, joista kunkin pituudeksi on 70 merkkiä.
17. Lisää loppuun Lähetä viesti-painike.
18. Poista lomakkeen alusta <div> ja lopusta </div>. Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Laita osien otsikoiksi Otsikkotiedot ja Viestiosa. Lisää viestiosan (fieldset) sisällä oleva Formaatti-valinta vielä toiseen kertaan fieldset-elementillä ja anna alueen nimeksi Formaatti legend-elementillä.
19. Tallenna. Tarkista, ettei Xetorin alalaidan virheikkunassa ole virheilmoituksia. Korjaa mahdolliset virheet.

Kyselylomake

Kyselylomake -mallivideo

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

Lomakkeen tiedot

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

Muut vaatimukset

• Kentillä on oltava seuraavat oletusarvot (value-, selected- tai checked-ominaisuudet):
  • etunimi.sukunimi@yritys.invalid
  • 15-20 vuotta
  • limonadi
  • perinteinen jazz
• Kaikille kentille on määriteltävä otsikko, jota napauttamalla pääsee kenttään (label-elementti).
• Tekstialueen on oltava riittävän iso (size-ominaisuus).
• Kaikki musiikkivaihtoehdot on näyttävä kerralla (size-ominaisuus).
• Käyttäjälle on annettava mahdollisuus valita useita musiikkilajeja (multiple-ominaisuus).

Tehtävät

1. Luo demo3-hakemistoon uusi hakemisto kahvila. Luo uusi dokumentti, kopioi siihen XHTML-pohja ja tallenna se kahvila-hakemistoon nimellä index.html. Laita link-elementti viittaamaan form.css:ään.
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 vielä välittää, se toteutetaan myöhemmin.
4. Muista valintavaihtoehtoja lisättäessä erikoismerkkien koodaus, esim. <, > ja &. Erikoismerkit löydät Xetorissa oikean laidan Entities-valikosta.