WWW-lomakkeet
Mallivideot
- email.wmv 6.5M
- trend.wmv 4.9M
- cssforms.wmv 2.1M
Sähköpostilomake
Tehdään sähköpostin lähettämiseen tarkoitettu lomake. Tämän tyyppisiä lomakkeita käytetään usein myös Webmail-palveluissa. Esimerkkejä lomake-elementtien tekemiseen löydät luennolta 4. Lomakkeesta haluttaisiin oikeassa laidassa olevan kuvan kaltainen. Lomakkeen luontivaiheessa ei kannata välittää lomakkeen ulkoasusta.
- Tallenna malli.css W:\www\ -hakemistoon nimellä form.css (napauta linkkiä oikealla, valitse Save target as ja vaihda nimeä)
- Aloita uusi dokumentti HTML-kit:in valikosta File | New document. Muuta otsikkotietoihin css-tiedostoviitteeksi form.css (link-elementin href-ominaisuus). Muokkaa title- ja h1-elementit sopiviksi. Tallenna tiedosto nimellä mail.html W:\www\-hakemistoon.
- Lisää seuraavat rivit body-elementin sisälle:
<form action="laheta.cgi" method="post" enctype="multipart/form-data"> </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.
- enctype-ominaisuus kertoo muodon miten lomakkeen tiedot lähetetään. multipart/form-data-arvolla lomakkeen tieto lähetetään useassa osassa. Ominaisuutta tarvitaan lomakkeilla, joiden avulla voidaan siirtää tiedostoja. Tavallisella lomakkeella ominaisuutta ei tarvitse asettaa.
- Lisää lomakkeelle kolme tekstikenttää, joiden otsikoina (label-elementti) on vastaanottaja, kopio ja aihe. Yhdistä label-elementti ja lomakekenttä toisiinsa for- ja id-ominaisuuksilla!. Lisää jokaiselle input-elementille name-ominaisuus. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle (voi olla eri kuin id-attribuutti!).
- Lisää myös jatkossa kaikkiin lomake-elementteihin otsikko (label), tunniste (id) ja nimi (name).
- 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="to">Vastaanottaja:</label> <p><input type="text" id="to" name="to" size="40" /></p>
- 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.
- Lisää liitetiedostoille tiedostovalinta (esimerkki). Lisää submit-tyyppinen painike, jonka name-attribuuttiin arvoksi liite ja value-ominaisuuteen Lisää liite. Value-arvo tulee myös näkyviin itse painikkeeseen, mutta sen perusteella voi lomakkeen käsittelijä selvittää mitä nappia on painettu. Laita input-elementit omaan tekstikappaleeseen. Mitä puutteita nykyisessä lomakkeessa on liitetiedostojen suhteen? Voidaanko näitä toteuttaa tavallisella lomaketekniikalla? (kts. XForms)
- Lisää tiedostokentän sisältävän kappaleen alkuun piilokenttä. Sijoita name-attribuutin arvoksi liite_max_koko ja value-attribuuttiin arvo 1048576. Piilokentillä voidaan välittää tietoja lomakkeen käsittelijälle.
- Tee valintanappi, jolla valitaan lähetettävän tiedon muoto eli formaatti. Laita vaihtoehdoiksi Teksti, HTML ja XML. Valitse oletusvalinnaksi teksti. Muista, että valintalista kaikilla kohdilla on oltava sama name-attribuutin arvo.
- Täydennä lomake varsinaisella tekstialueella. Laita tekstialueelle näkymään 20 riviä, joista kunkin pituudeksi on 70 merkkiä.
- Lisää loppuun Lähetä viesti-painike.
- Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Laita osien otsikoiksi Otsikkotiedot, Liitetiedostot ja Viestiosa. Lisää viestiosan (fieldset) sisällä oleva Formaatti-valinta vielä toiseen kertaan fieldset-elementillä ja anna alueen nimeksi Formaatti legend-elementillä.
- Tallenna ja validoi sivusi. Korjaa mahdolliset virheet.
Kyselylomake
Kuvitteellinen kahvilayritys haluaisi tehdä nettisivuilleen pienimuotoisen kyselylomakkeen, jolla he voisivat kartoittaa asiakkaiden maku- ja kokemusmaailmaa. Tee uusi dokumentti ja toteuta kuvan näköinen lomake kahvilan sivuston osaksi. Napauta mallikuvaa niin saat näkyviin isomman esimerkkikuvan. Määrittele aluksi XHTML-dokumenttiin sopivat lomake-elementit ja muokkaa vasta sen jälkeen lomakkeen ulkoasua. Lomakkeeseen tulevat seuraavat kohdat:
- Taustatiedot
- Sähköpostiosoite (tekstikenttä)
- Ikä (valintalista), jossa vaihtoehdot <15, 15-20, 20-25, 25-30, >30.
- Palaute
- Suosikkijuoma (valintaruutu), jossa vaihtoehtoina kahvi, espresso, cappuccino, makuteet ja limonadi.
- Musiikki (valintalista), jossa vaihtoehtoina Perinteinen Jazz, Vokaalipainotteinen jazz, Groove Jazz, Rhythm & Blues, Kitarablues, MTV-dance, Trance-tekno ja Rauhallinen elektroninen
- Lähetä palaute! -painike.
Toteuta ajan puitteissa ainakin toiminnallisuuden kannalta välttämättömät osat. Huomioi seuraavia asioita:
- Laita oletusarvot value-, selected- tai checked-ominaisuuksilla kaikille lomake-elementeille.
- Kaikille select- ja input-tyyppisille lomake-elementeille otsikko label-elementillä.
- Määrittele kaikille lomake-elementeille tabulointijärjestys tabindex-ominaisuudella.
- Määrittele tekstikentälle koko (text-tyypin input-elementin size-attribuutti).
- Muista erikoismerkkien koodaus, esim. <, > ja &
- Jälkimmäisessä valintalistassa pitää näkyä useita vaihtoehtoja kerralla ja on annettava mahdollisuus valita useita vaihtoehtoja (select-elementin size- ja multiple-ominaisuudet).
- Määritä kullekin label-elementille oma pikanäppäin accesskey-attribuutilla.
- Muista validoida XHTML-dokumentti.
- Apuja lomakkeisiin liittyen löydät luennolta 4.
Lisätehtäviä: Ulkoasujen muotoilut
Muotoillaan CSS:llä lomakesivujen ulkoasua.
Sähköpostilomake
- Muotoillaan vielä hieman lomaketta. Lisää tyylitiedostoon form.css seuraavat
rivit:
form .tasa { width: 15%; float: left; clear: both; }- form .tasa viittaa form-elementin sisällä olevaan elementtiin (jälkeläinen), jonka luokka (class) on tasa.
- float-ominaisuudella otsikot saadaan liutettua vasempaan laitaan, jolloin tavalliset kappaleet tulevat otsikon perään.
- clear-ominaisuudella voidaan estää kahden otsikon asettuminen vierekkäin, jolloin seuraava otsikko rivittyy edellisen alapuolelle.
<label class="tasa" for="to">Vastaanottaja:</label> <p><input type="text" id="to" name="to" size="40" /></p>
Testaa tasausta selaimella. - Tee tyyli, joka liu'uttaa Lähetä viesti -painikkeen oikeen laitaan. Lisää liite-painike halutaan pitää kuitenkin lähellä tiedostovalintapainiketta. Tarvitset apuna css-valitsimia. Kaikki CSS-valitsimet eivät välttämättä toimi Internet Explorerissa!
- Lisää fieldset-elementeille valkoisesta eroavat taustaväri (väriksi esim. #dddd99 ). Kokeile saada erilainen väritys Formaatti-osioille (väriksi esim. #eeeebb ).
- Tallenna ja validoi CSS-tyylitiedosto.
Kyselylomake
- Tallenna edellisellä lomakkeella käytetty CSS-tiedosto toisella nimellä ja käytä sitä tämän dokumentin muotoilemiseen (muuta link-elementin href-attribuuttia).
- Lisää 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ä.
- Apuja CSS:ään löydät luennolta 2
Käyttäjien kommentit