Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä.

Transkriptio

1 Lomakkeet Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeen tyylit kannattaa määritellä omaan, eriliseen, tyylitiedostoon. Näin tyylejä on mahdollista käyttää useamman lomakkeen kanssa. W3C määritykset lomakkeelle: Lomakkeet määritellään form elementillä/tagilla. Tämä tulee koko lomakkeelle. Formin määrittelyt tapahtuvat action ja method attribuuteilla. Attribuutit Method ja Action Method, lähetystapa Määritellään miten tai millä lomakkeelle syötetyt tiedot käsitellään - post arvo on suositeltavampi - get-lähettää viestin palvelimelle, joka sitten käsittelee määritellyllä tavalla lomakkeen tiedot. Get-määritys ei ole suositeltava. Action, lomakkeen lähetysosoite Esimerkki: Html Kit ohjelmalla. Valitse Forms -välilehti > Form action method post <form action="" method="post"> Action: määritellään, miten lomakkeen tietojen lähettäminen tapahtuu. Sen arvoksi voidaan määritellä palvelimella sijaitseva cgi -ohjelma, joka käsittelee lomakkeen tiedot ja lähettää ne eteenpäin. Toinen tapa on määritellä action arvoksi sähköpostiosoite, johon lomakkeen tiedot lähetetään suoraan. Input -elementti INPUT TYPE="text" - tekstikenttä, jolla on lisäksi attribuutit: - name: nimi, jotta tiedetään minkä lomakekentän tietoa lähetetään - value: oletusteksti, joka lukee kentässä, kun sivulle tullaan - maxlength: kirjainten maksimimäärä kentässä - size: kentän näkyvän osan koko, ei rajoita kirjainten määrää Esimerkiksi: <input type="text" name="näkyy spostissa tämän kentän aiheena esimerkiksi Nimi" value="" maxlength="15" size="18" /> 1

2 input type="checkbox", valintaruutu Valintaruutua käytettään kun valittavana on yksi tai useampi valinta. - value: valintaruudun arvo, joka lähtee lomakkeen lähetyksen yhteydessä - name: nimi, johon viitataan lähetyksessä eli tämän nimen arvo on value -kohdan teksti - checked: esivalinta rastille. Kts esimerkki alla. <input type="checkbox" name=" Suosikkilaulajani" value="vesku Loiri" CHECKED />Vesku Loiri. Nimi 1, valinta on valmiina, koska on CHECKED<br> <input type="checkbox" name="suosikkilaulajani" value="matti ja Teppo" />Matti ja Teppo<br> <input type="checkbox" name=" Suosikkilaulajani" value="marion" />Marion INPUT TYPE="radio" - radio-painike jossa ryhmään kuuluvista voi valita vain yhden kerralla, tai useamman. - value: valintaruudun arvo, joka lähtee lomakkeen lähetyksen yhteydessä - name: nimi, johon viitataan lähetyksessä eli tämän nimen arvo on value-kohdan teksti - checked: esivalinta rastille. Kts esimerkki alla. Esimerkki, lemmikkielläimeni: <input type="radio" name="lemmikkieläimeni" value="kissa" />Käärme<br> <input type="radio" name=" Lemmikkieläimeni " value="kissa" />Kissa<br> <input type="radio" name=" Lemmikkieläimeni " value="kana" />Kana Textarea -tekstilaatikko - cols: näkyvien sarakkeiden määrä - rows: näkyvien rivien määrä - name: kuten edellä Esimerkki: <textarea rows="2" name="viestisi" cols="20">palautteeni on:</textarea> Select ja Option elementit Select -elementti * Valintalista voi olla yksi- tai monivalintainen. * Valintalista määritellään select-elementillä ja päätettään select-elementtiin. * Listan koko määritellään riveinä size-määritteellä. * Määritteellä multiple ei ole arvoa. Se mahdollistaa useamman listakohdan valinnan ctrltai vaihtonäppäimellä. Option-elementti * Listarivit määritellään option-elementillä select elementin sisään. * Listakohan esivalita suoritetaan selected-määritteellä. 2

3 Esimerkki valintalistasta <select name="kuukausi"> <option value="1" selected>-- Valitse tästä --</option> <option value="1" selected>tammikuu</option> <option value="2">helmikuu</option> <option value="3">maaliskuu</option> </select> Esimerkki monivalintaisesta listasta: <select name="lemmikkieläimesi" size="5" multiple> <option value="1">karhu</option> <option value="2">kameli</option> <option value="3">kirkonrotta</option> <option value="4">kameleontti</option> <option value="5">kukko</option> </select> Lähettäminen Lomakkeella voidaan lähettää viesti omaan sähköpostiin ja/tai www-sivulle määrättyyn paikkaan. Ellet ole varma lomakkeen lähettämiseen liittyvissä asioissa ja vaatimuksissa, kannattaa jättää cgi:n / php:n tekeminen ammattilaisen käsiin, koska aina saattaa tulla tietoturvariskejä. Turavallisempi vaihtoehto on toteuttaa web-lomake palveluntarjoajan cgi-skriptillä. Selvitä siis ensin tarjoaako oma palveluntarjoajasi käyttöösi sopivan palvelinskriptin (jota usein kutsutaan erään käytetyn teknisen piirteen takia CGI-skriptiksi). web-lomakkeen tekeminen ja lähettäminen voidaan tehdä: 1. php:llä 2. palvelinkohtaisesti cgi-skriptillä, esimerkiksi: <form action=" method="post"> <input type="hidden" name="recipient" value="nimi@yritys.fi" = vastaanottajan sposti> <input type="hidden" name="subject" value="www-palaute" = otsikko spostissa> <input type="hidden" name="redirect" value=" = kun viesti on lähtenyt, vaihtuu sivuksi kiitos.htm sivu> Cgi -skriptit ovat yleensä palvelinkohtaisia, joten niitä on kysyttävä aina erkikseen sivun palvelimen ylläpitäjältä. Yllä oleva esimerkki toimi(nee) vain tietyn palvelintarjoajan palvelimella. Suositeltavampaa on tehdä lomakkeen lähettämiseen liittyvät toiminnot php:llä. Painikkeet Submit-painike: <input type="submit" name="submit" value="lähetä lomake" /> 3

4 painike, jolla lomakkeen tiedot lähetetään. VALUE-attribuutti antaa painikkeelle siinä näkyvän tekstin. <input type="submit" value="lähetä"> Reset painike <input type="reset" name="reset" value="tyhjennä lomake" /> - painike, jolla lomakkeen tiedot tyhjennetään. VALUE-attribuutti antaa painikkeelle sen näkyvän tekstin Button Button on ohjelmoitava painike, johon liitettään skriptikielinen toiminnallisuus. Siihen voidaan liittää tyylejä. <input type="button" name="button" value="lähetä" /> 4

5 Harjoitus Lukekaa ensin tämä: Aloita sitten tekemään lomaketta, eli uusi.htm sivu ja siitä eyeenpäin. Lomake tulee form tagin sisään. Tehdään seuraavanlainen lomake: Nimi Mies / Nainen (checkbox) Postiosoite Postinumero Postitoimipaikka Puhelinnumero Sähköpostiositteesei Suosikkieläimesi seuraavista: Sisilisko Punkki Käärme Rotta Televisio on auki perheessämme päivittäin: Alle 1h 1-2 h 2-3 h 3-4 h Yli 4 h Muuta kommentoitavaa Lähetä Tyhjennä 5