WWW-lomakkeet - Demo 6
Mallivideot
- sahkopostilomake.wmv 24.3M
- lomakkeen_muotoilu.wmv 4.3M
- kyselylomake.wmv 23.2M
Ongelmia videon katselussa?
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.
- Luo W:\www\-hakemistoon alihakemisto demo6. Tallenna lomake.css demo6-hakemistoon.
- Aloita uusi XHTML-dokumentti. Laita nimeksi index.html ja tallennushakemistoksi äsken luomasi demo6-hakemisto.
- Lisää linkki CSS-tyylitiedostoon lomake.css.
- Muokkaa sivun
title
- jah1
-elementit sopiviksi. - Lisää XHTML-sivulle lomake (
form
). Älä toistaiseksi laita mitäänaction
-attribuuttiin. - Lisätään lomakkeelle tekstikenttä. Lisää ensin
label
-elementti. Kirjoita otsikkotekstiksi Aihe. Napauta enteriä otsikkotekstin jälkeen ja lisää tekstikenttä (input
-elementti). Laita lopuksilabel
-elementti jainput
-elementti samanp
-elementin sisään. - Lisää
input
-elementilleid
-ominaisuuteen oma, yksilöllinen arvo. - Yhdistä
label
-elementti ja lomakekenttä toisiinsafor
-ominaisuudella. - Tallenna dokumentti. Avaa lomake selaimessa ja testaa, että
label
- jainput
-elementit ovat yhdistettyinä napauttamalla lomakekentän otsikkoa. Nyt kursorin pitäisi mennä siihen lomakekenttään, johon yhdistäminen on tehty. - Lisää
input
-elementillename
-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuinid
-attribuutti!). - 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>
- Tee uusi kappale (
p
). Lisää kappaleen sisäänlabel
-elementti, johon teksti Prioriteetti. - Lisää kappaleen sisään
label
-elementin jälkeen valintalista (select
). - Kirjoita
option
-elementteihin vaihtoehdot Korkea, Normaali ja Alhainen.<option>Normaali</option>
- Valitse vaihtoehdoista Normaali valituksi oletuksena (
selected="selected"
). - Yhdistä
label
- jaselect
-elementti toisiinsafor
- jaid
-ominaisuuksilla. Annaselect
-elementillename
-ominaisuuteen jokin järkevä arvo. - Tee uusi kappale (
p
). Lisää edelliseen tapaan kappaleen sisälle uusilabel
, jonka sisällöksi kirjoitat Vastaanottaja ja valintalista (select
). - Lisää valintalistan sisään valintaryhmä (
optgroup
). Anna valintaryhmälle otsikoksi (label
) opettajat. - Lisää valintaryhmään kolme valintaa (
option
):- Antti Ekonoja
- Jukka Mäntylä
- Tommi Lahtonen
- Lisää toinen valintaryhmä, jolle annat otsikoksi (
label
) tuntiopet ja lisää valinnat (option
):- Mikko Aarnio
- Jaakko Kaski
- Kokeile lomakkeen toimintaa Firefoxissa.
- 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>
- Muuta vielä valintalistalle mahdollisuus valita useampi vastaanottaja. Laita siis
valintalistan
multiple
-ominaisuuden arvoksimultiple
. Laita myös valintalistanname
-ominaisuuden arvoksi vastaanottaja.<select name="vastaanottaja" id="vastaanottaja" multiple="multiple">
- Kokeile Firefoxilla lomakkeen toimintaa. CTRL- ja SHIFT-näppäimien avulla voit valita useamman vastaanottajan.
- Tehdään valintanappi-lista
formaatin valinnalle. Lisää uusi
p
-elementti, jonka sisään laitalabel
-elementti, jonka sisälle lisäät suoraanradio
-painikkeen, ja vasta tämän jälkeen otsikkotekstiksi Teksti.<p><label><input type="radio" value="" />Teksti</label></p>
- Nyt label- ja input-elementti liittyvät
suoraan toisiinsa ilman
for
-ominaisuutta. Lisää vielä kaksilabel
- jainput
-paria (molemmat omanp
-elementin sisään). 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 lisäämällä kyseiselle
input
-elementille määrechecked="checked"
. Ryhmän otsikko Formaatti lisätään myöhemmin.<p><label><input type="radio" name="formaatti" checked="checked" value="teksti" />Teksti</label></p>
- Lisää uusi
label
, jonka otsikoksi kirjoitat Lähetä myös tekstiviesti. Lisäälabel
:in sisälle valintaruutu (checkbox
). - Aseta valintaruudun
name
-ominaisuuden arvoksi tekstiviesti javalue
-ominaisuuden arvoksi Kyllä. - Lisää vielä toinenkin valintaruutu otsikon (
label
) kera. Kirjoita otsikoksi Lähetä myös tavallinen kirje. Keksi tälle valintaruudulle järkevät arvotvalue
- janame
-ominaisuuksiin. - Tee uusi kappale (
p
-elementti). Lisää kappaleen sisään ensinlabel
-elementti tekstillä Viesti. - Täydennä lomake varsinaisella tekstialueella
(
textarea
, lisää se myös samanp
-elementin sisään, missälabel
-elementtikin on). Laita tekstialueelle näkymään 20 riviä (rows
), joista kunkin pituudeksi 50 merkkiä (cols
). Nimeä tekstialue antamallaname
-ominaisuuteen jokin sopiva arvo. Yhdistä tekstialue otsikkoonid
- jafor
-attribuuttien avulla. - Lisää loppuun vielä yksi
p
-elementti ja sen sisälle Lähetä viesti -painike (submit
). Anna painikkeen teksti kirjoittamalla sopiva arvovalue
-ominaisuuteen. - 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. - Ryhmittele lomakkeen osat
fieldset
- jalegend
-elementeillä. Katso mallia demon alussa olevasta mallikuvasta (Otsikkotiedot ja Viestiosa siis omiksi ryhmikseen). 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 toinenfieldset
-ryhmä, jonka sisälle rajaat formaatti-valintanapit. Anna alueen nimeksi Formaattilegend
-elementillä. - Lisää viestiosan (
fieldset
) sisälle myös toinenfieldset
-ryhmä, jonka sisälle rajaat Lähetä myös tekstiviesti ja Lähetä myös tavallinen kirje -valintaruudut. Anna alueen nimeksi Lisäasetuksetlegend
-elementillä. - Muokkaa seuraavaksi
form
-elementin ominaisuuksia: - 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.
- 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:
- Valitse Web Developer -työkalupalkista 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 esimerkiksi 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 (
float
)label
-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvätlabel
-elementtien oikealle puolelle. - Estetään vielä toisen
label
-elementin rivittyminen samalle riville toisenlabel
-elementin kanssa. Tämä onnistuuclear
-ominaisuudella. - Lisää myös
textarea
-elementilleclear
-ominaisuus, jolloin saat sen rivittymään otsikon alapuolelle. Teetextarea
-elementistä vielä lohkotason elementti, niin se rivittyylabel
-elementin alapuolelle isoillakin näytöillä. - Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.
- Testaa lopuksi selaimella, että lomakkeesi näyttää suunnilleen mallikuvan lomaketta vastaavalta.
- 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
- Sähköpostiosoite (tekstikenttä)
- 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
- Jazz
- Suosikkijuoma (valintaruutu), jossa vaihtoehtoina:
Tehtävät
- 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. - 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 välittää vielä lomake-elementtejä tehdessä. Ulkoasua voit miettiä mallikuvan mukaiseksi demon lopuksi, jos jää ylimääräistä aikaa.
- Tarkista, että erikoismerkit tulevat oikealla tavalla koodatuiksi, esim.
< = <, > = > ja & = &
. - Kopioi edellisen lomakkeen muotoiluista sopivat määreet tämän lomakkeen CSS-tyylitiedostoon form.css.
- 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ä.
Käyttäjien kommentit