WWW-lomakkeet

Mallivideot

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. Lomakkeen rakenteesta halutaan oikeassa laidassa olevan kuvan kaltainen. Ulkoasu määrätään vasta lomakkeen luonnin jälkeen, joten aluksi ei kannata välittää ulkoasusta.

Viestin lähettämislomake

Lomakkeen muotoilu

Lomakkeen muotoilu

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

  1. Valitse Web Developer Toolbarista 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 esim. 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 label-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvät label-elementtien oikealle puolelle.
  8. Estetään vielä toisen label-elementtien rivittyminen samalle riville toisen label-elementin kanssa. Tämä onnistuu clear-ominaisuudella.
  9. Lisää myös textarea-elementille clear-ominaisuus, jolloin saat rivittymään sen otsikon alapuolelle.
  10. Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.

Lisätehtävät

Kyselylomake

Kyselylomake -mallivideo

Viestin lähettämislomake

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

Tehtävät

  1. Luo demo5-hakemistoon uusi hakemisto kahvila. Luo uusi XHTML Strict -dokumentti tähän hakemistoon index.html-nimellä. 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. Tarkista, että erikoismerkit tulevat oikealla tavalla koodatuiksi, esim. &lt; = <, &gt; = > ja &amp; = &. Amaya huolehtii tästä ellet käytä kooditilaa.
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo5/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)<URL: http://hazor.iki.fi/>
2005-11-24 13:50:14