WWW-lomakkeet
Mallivideot
- mail.wmv (Amaya) 4.4M
- lomake_muotoilu.wmv 925K
- kahvila.wmv (XetorjEdit) 9.6M
Sähköpostilomake
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.
- Luo V:\www\-hakemistoon alihakemisto demo5. Tallenna lomake.css demo5-hakemistoon.
- Aloita uusi dokumentti Amayassa valinnalla File | New XHTML Document. Valitse nimeksi index.html, tallennushakemistoksi demo5 ja dokumenttityypiksi XHTML Strict.
- Lisää linkki CSS-tyylitiedostoon lomake.css valinnalla Style | Link....
- Muokkaa sivun title- ja h1-elementit sopiviksi.
- Lisää lomake valinnalla XHTML | Form | Insert a form. Älä toistaiseksi laita mitään action-attribuuttiin. Laita rakennenäkymä päälle (Views | Show structure).
- Lisätään lomakkeelle tekstikenttä. Lisää ensin
label
-elementti valinnalla XHTML | Form | label. Kirjoita otsikkotekstiksi Aihe. Napauta enteriä otsikkotekstin jälkeen ja lisää tekstikenttä valinnalla XHTML | Form | Text (input
-elementti). - Lisää input-elementille id-ominaisuuteen oma, yksilöllinen arvo. Helpoiten tämä onnistuu työkalupalkin Attributes-valinnan alta.
- Yhdistä label-elementti ja lomakekenttä toisiinsa for-ominaisuudella.
- 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.
- Lisää input-elementille name-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuin id-attribuutti!).
- Kokeile sivua selaimella. Laita tekstikentille vielä kiinteä esityspituus size-ominaisuudella:
<label for="aihe">Vastaanottaja:</label> <input type="text" id="aihe" name="aihe" size="40" />
- Tee uusi kappale (
p
) enteriä painamalla. Lisää label-elementti, johon teksti Prioriteetti. - Lisää valintalista valinnalla XHTML | Form | Menu.
-
Kirjoita
option
-elementteihin vaihtoehdot Korkea, Normaali ja Alhainen. Uudenoption
-elementin saa enterin painalluksella.<option>Normaali</option>
-
Valitse vaihtoehdoista Normaali valituksi Attributes-työkalupalkista valinnalla
selected
. - Yhdistä
label
- jaselect
-elementti toisiinsafor
- jaid
-ominaisuuksilla. Annaselect
-elementillename
-ominaisuuteen jonkin järkevä arvo. - Tee uusi kappale. Lisää edelliseen tapaan uusi label jonka sisällöksi kirjoitat Vastaanottaja ja valintalista.
- Lisää valintalistan sisään valintaryhmä (optgroup) XHTML|Form|Submenu(optgroup). Anna valintaryhmälle nimeksi Luennoijat
- Lisää valintaryhmään kaksi valintaa:
- Tommi Lahtonen
- Jukka Mäntylä
- Lisää toinen valintaryhmä jolle annat otsikoksi Tuntiopet
ja lisäät valinnat:
- Mikko Aarnio
- Riitta Holappa
- Kokeile lomakkeen toimintaa Firefoxissa
- Lisää jokaiseen edellä lisätyn valinnan (option) value-ominaisuuden arvoksi kyseisen henkilön sähköpostiosoite:
- Tommi: tommi.j.lahtonen@jyu.fi
- Jukka: jmantyla@mit.jyu.fi
- Mikko: mipeaarn@cc.jyu.fi
- Riitta: reholapp@cc.jyu.fi
<option value="tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</option>
- Muuta vielä valintalistalle mahdollisuus valita useampi vastaanottaja. Vaihda
valintalistan multiple-ominaisuuden arvoksi multiple.
Vaihda myös valintalistan name-ominaisuuden arvoksi vastaanottajat
<select name="vastaanottaja" id="vastaanottaja">
- Kokeile Firefoxilla lomakkeen toimintaa. CTRL- ja SHIFT-näppäimien avulla voit valita useamman vastaanottajan
-
Tehdään valintanappi-lista
formaatin valinnalle.
Lisää uusi
label
-elementti, jonka sisälle lisäät suoraanradio
-painikkeen (XHTML|Form|Radio), ja vasta tämän jälkeen otsikkotekstiksi Teksti.<label><input type="radio" value="" /> Teksti</label>
-
Nyt label- ja input-elementti liittyvät
suoraan toisiinsa ilman for-ominaisuutta. Lisää vielä kaksi
label
- jainput
-paria. Laita otsikoiksi HTML ja XML. - Lisää kaikille valintanapeille sama arvo
name
-attribuuttiin. -
Anna kullekin valintanapille oma arvo
value
-attribuuttiin, joka näkyy lomakkeen käsittelijälle tietoja lähetettäessä. - Valitse oletusvalinnaksi Teksti napauttamalla
rakennenäkymästä oikealla kyseistä
input
-elementtiä (lisää määreenchecked="checked"
). Ryhmän otsikko Formaatti lisätään myöhemmin.<label><input type="radio" checked="checked" value="" /> Teksti</label>
- Lisää uusi label ja sen sisälle valintaruutu XHTML|Form|Checkbox, jonka otsikoksi kirjoitat Lähetä myös tekstiviesti.
- Aseta valintaruudun name-ominaisuuden arvoksi tekstiviesti ja value-ominaisuuden arvoksi Kyllä.
- Lisää vielä toinenkin valintaruutu otsikon kera. Kirjoita otsikoksi Lähetä myös tavallinen kirje. Keksi tälle valintaruudulle järkevät arvot value- ja name-ominaisuuksiin
- Tee uusi kappale.
Lisää ensin
label
-elementti tekstillä Viesti. - Täydennä lomake varsinaisella tekstialueella XHTML|Form|textarea.
Laita tekstialueelle näkymään 20 riviä (
rows
), joista kunkin pituudeksi on 50 merkkiä (cols
). Nimeä tekstialue antamallaname
-ominaisuuteen jokin sopiva arvo. - Lisää loppuun Lähetä viesti-painike valinnalla XHTML | Form | Submit. Vaihda painikkeen
teksti muuttamalla
value
-ominaisuutta. - 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. - Vaihda koodinäkymään (Views | Show source).
Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä.
Kirjoita ryhmän alkuun
<fieldset>
ja loppuun</fieldset>
. Ryhmittelyt tulevatform
-elementin sisälle. -
Ryhmän otsikko lisätään fieldset-elementin sisälle
<legend> ... </legend>
-elementillä. Laita osien otsikoiksi Otsikkotiedot ja Viestiosa. - Lisää viestiosan (fieldset) sisälle toinen fieldset-ryhmä, jonka sisälle rajaat formaatti-valintanapit. Anna alueen nimeksi Formaatti legend-elementillä.
- Vaihda takaisin rakennenäkymään (Views | Show structure). Valitse
form
-elementti napauttamalla form-sanaa hiiren vasemmalla näppäimellä. Muokkaaform
-elementin ominaisuuksia Attributes-työkalupalkin kautta - Tallenna ja testaa lomaketta selaimella. Kokeile lähettää lomake painamalla Lähetä viesti -painiketta niin näet millaisia tietoja lomake lähettää lomakkeenkäsittelijälle.
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:
- Valitse Web Developer Toolbarista CSS | Edit CSS.
- Lisää
fieldset
-elementille taustasta poikkeava väri. Värin voit valita myös kuvasta tai paletista Colorzilla-työkalun avulla. - Muuta kaikkiin lomake-elementteihin (input, option, textarea) tasalevyinen kirjasin eli esim. Courier New ja yleisvaihtoehto monospace.
- Määrää erilainen taustaväri toisen
fieldset
-lohkon sisällä olevallefieldset
-lohkolle. - Tasataan lomake-elementit samalle tasolle vaakasuunnassa. Muuta ensin CSS:ssä
label
-elementin rivittyminen tekstin tasosta (engl. inline) lohkoksi (engl. block). - Määrää
label
-elementin leveydeksi 30%. - Liu'uta
label
-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvät label-elementtien oikealle puolelle. - Estetään vielä toisen
label
-elementtien rivittyminen samalle riville toisenlabel
-elementin kanssa. Tämä onnistuuclear
-ominaisuudella. - Lisää myös
textarea
-elementilleclear
-ominaisuus, jolloin saat rivittymään sen otsikon alapuolelle. - Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.
Lisätehtävät
Kyselylomake
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ä)
- Oletuksena etunimi.sukunimi@yritys.invalid
- Ikä (valintalista), jossa vaihtoehdot
- <15 vuotta
- 15-20 vuotta
- 20-25 vuotta (oletus)
- 25-30 vuotta
- >30 vuotta
- Sähköpostiosoite (tekstikenttä)
- Palaute
- Suosikkijuoma (valintaruutu), jossa vaihtoehtoina:
- kahvi (oletus)
- espresso
- cappuccino
- makuteet
- limonadi
- Musiikki (usean vaihtoehdon valintalista), jossa vaihtoehdot ryhmiteltynä (optgroup) seuraavasti:
- Jazz
- Perinteinen Jazz
- Vokaalipainotteinen jazz
- Groove Jazz
- Blues
- Rhythm & Blues (oletus)
- Kitarablues (oletus)
- Pop
- MTV-dance
- Trance-tekno
- Rauhallinen elektroninen
- Jazz
- Suosikkijuoma (valintaruutu), jossa vaihtoehtoina:
Tehtävät
- 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.
- Toteuta kuvan mukainen lomake osaksi kahvilan sivustoa. Napauta mallikuvaa niin saat näkyviin isomman esimerkkikuvan.
- Määrittele XHTML-dokumenttiin sopivat lomake-elementit. Huomioi vaatimusmäärittelyssä annetut asiat. Ulkoasusta ei kannata vielä välittää, se toteutetaan myöhemmin.
- Tarkista, että erikoismerkit tulevat oikealla tavalla koodatuiksi, esim. < = <, > = > ja & = &. Amaya huolehtii tästä ellet käytä kooditilaa.