WWW-lomakkeet

Näissä tehtävissä 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. 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.

Viestin lähettämislomake

  1. Luo W:\www\-hakemistoon alihakemisto ohjaus6. Tallenna lomake.css ohjaus6-hakemistoon.
  2. Aloita uusi HTML-dokumentti. Laita nimeksi index.html ja tallennushakemistoksi äsken luomasi ohjaus6-hakemisto.
  3. Lisää linkki CSS-tyylitiedostoon lomake.css.
  4. Muokkaa sivun title- ja h1-elementit sopiviksi.
  5. Lisää HTML-sivulle lomake (form). Älä toistaiseksi laita mitään action-attribuuttiin.
  6. Lisätään lomakkeelle tekstikenttä. Lisää ensin label-elementti. Kirjoita otsikkotekstiksi Aihe. Lisää otsikkotekstin jälkeen 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 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 HTML-dokumentissa.
  37. Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Katso mallia tehtävien 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. Estä vielä toisen label-elementin rivittyminen samalle riville toisen label-elementin kanssa. Se 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.

Lomaketiedot sähköpostiin laheta.cgi-ohjelmalla

Laitetaan lomakkeen tiedot menemään sähköpostiin:

  1. Käy Korppi-järjestelmässä kurssin sivuilla hakemassa tunnus ja salasana kohdasta Ajankohtaista.
  2. Avaa uuteen välilehteen osoite (tarvitset äsken hakemiasi tunnuksia, jotta sivu aukeaa)

    http://appro.mit.jyu.fi/itkp1011/harkka/laheta/

  3. Siirry kohtaan Osoitteen lisääminen. Kirjoita siihen oma yliopiston sähköpostiosoitteesi ja napauta painiketta Lähetä.
  4. Muokkaa lomakkeesi action-ominaisuuden arvoa ja laita siihen:
    <form action="http://appro.mit.jyu.fi/cgi-bin/www/laheta.cgi" method="post">
    ...
    </form>
  5. Sijoita johonkin väliin lomaketta fieldset-elementin sisälle piilokenttä, joka kertoo, mihin sähköpostiosoitteeseen tiedot pitää lähettää. Huomaa, että name-ominaisuuden arvon on oltava lomake_email ja value-ominaisuuden arvon sähköpostiosoite juuri siinä muodossa kuin mitä äskettäin kirjoitit lomakkeelle.
    <input type="hidden" name="lomake_email" value="omaosoite@student.jyu.fi" />
  6. Kokeile täyttää lomake ja lähettää se napauttamalla Lähetä viesti -painiketta. Nyt sähköpostiisi pitäisi tulla WWW-lomakkeelta tiedot.

Sähköpostiosoitteen valinnan voisi tehdä myös muillakin elementeillä, joiden name-ominaisuus on lomake_email, kuten esim. lomakkeen vastaanottaja -kohdan select-elementillä.

Haku omalle sivulle

Googlen avulla on helppoa lisätä haku omalle sivulle. Google ei kovin avoimesti mainosta, että haun voi kohdistaa vain tiettyyn osoitteeseen.

  1. Aloitetaan lisäämällä Nanonanon sivuston etusivulle (W:\www\index.html) normaali hakulomake aivan sivun alalaitaan ennen address-lohkoa:
    <div class="haku">
    <form action="http://www.google.com/search" method="get">
    <div>
    <label for="hakusanat">Hakusanat </label>
    <input type="text" size="20" id="hakusanat" name="q" value="" />
    <input type="submit" value="Hae" />
    </div>
    </form>
    </div>
    • Lomakkeen action="http://www.google.com/search" viittaa Googlen hakuohjelmaan.
    • Tekstikentän name="q" viittaa hakusanoihin, jotka välitetään hakuohjelmalle.
    • Kokeile miten haku toimii.
  2. Lisätään lomakkeen sisemmän div-elementin sisälle vielä muutama lisämääritys:
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="hidden" name="oe" value="UTF-8" />
    <input type="hidden" name="hl" value="fi" />
    <input type="hidden" name="lr" value="lang_fi" />
    
    • Näillä määrityksillä tekstin koodaus saadaan sopimaan suomalaiseen merkistöön ja haun sekä Googlen käyttöliittymän kieleksi määrätään suomi.
    • Kokeile miten hakusivu muuttuu.
  3. Hakutuloksiin tulee vielä paljon muitakin sivuja kuin Nanonanon sivut. Rajoitetaan hakua lisäämällä seuraava parametri:
    <input type="hidden" name="as_q" value="site:users.jyu.fi/~omatunnuksesi/www/" />
    • as_q-niminen muuttuja lisää muiden hakusanojen lisäksi uuden hakutermin site:users.jyu.fi/~omatunnuksesi/www/.
    • site-määreellä voidaan rajoittaa hakua vain tiettyyn WWW-sivuun tai sivustoon. Sivun osoite on tultava heti kaksoispisteen jälkeen.
    • Kokeile hakulomakkeen toimintaa. Luultavasti Google ei löydä mitään, koska on erittäin epätodennäköistä, että Google olisi käynyt indeksoimassa demotehtäväsivujasi. Tämä johtuu siitä, että sivuillesi ei ole mistään linkkejä, ja vaikka olisikin, niin hakuroboteilla kestää aikansa ennenkuin ne ehtivät vierailemaan sivuillasi.
    • Voit kokeilla lomakkeen toimintaa vaihtamalla haun kohteeksi esim. site:appro.mit.jyu.fi/itkp1011/.
  4. Validoi lopuksi XHTML- ja CSS-koodit ja korjaa mahdolliset virheet.

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/ohjaus/ohjaus6/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-10-11 10:47:22
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta