Lomakkeet ja niiden toiminta

Web-julkaisuihin liittyy usein palautesivu, jossa palautetta saa antaa seuraavankaltaisen palautelomakkeen kautta:

Lomakkeessa on käytännössä viisi elementtiä: Aluksi kaksi tekstikenttää (nimi ja sähköposti), joiden jälkeen vapaan tekstin tekstialue ja lopuksi kaksi nappulaa, joista toinen lähettää lomakkeen tiedot ja toinen tyhjentää lomakkeen. Lomakkeen koodi näyttää katsottaessa tältä:

Lomake siis aloitetaan <form>-tagilla, johon lisätään metodi, jolla lomake käsitellään. Tässä metodi on POST, jossa lomake lähetettään nappia painamalla. Toinen vaihtoehto olisi GET, jossa lomakkeen tiedot voidaan välittää suoraan URL:ssa vaikkapa tähän tyyliin:

http://www.example.com?nimi=Jussi&email=jusa@example.com

Tässä välitetään nimi-kentän sisältö "Jussi" sekä email-kentän sisältö "jusa@example.com". Palautelomakkeita rakennettaessa POST on mielekkäämpi käyttää, koska se sallii pidempien datasisältöjen välittämisen.

Lomakenttiä

Lomakekenttiä on erilaisia, muun muassa seuraavia:

Tekstikenttä:

Nimi: <input type="text" name="nimi" maxlength="50">

Nimi:

Salasanakenttä:

Salasana: <input type="password" name="passu" maxlength="50">

Salasana:

Huomaa! Vaikka salasana ei ruudulla näykään, se välitetään ihan selväkielisessä muodossa, eli mitään suojaa tästä ei saa.

Joskus voidaan tarvita myös piilotettuja kenttiä, eli silloin kentän tyyppi on hidden. Tällainen kenttä ei näy lomakkeella, mutta sen kanssa voidaan viedä lomakkeesta läpi mahdollisesti käsittelyssä tarvittavaa infoa.

Radio-nappula

Kuvassa edellä esitetyn valinnan koodi:

Huomaa, että nimi ryhmittelee nappulat kuulumaan samaan valintaan. Checked-valinta taas merkitsee jonkun oletusarvoiseksi valinnaksi. Tämä ei ole pakollinen.

Check-box, valintaruudut:

1 2 3

Sama idea kuin radio-nappuloissa, mutta voi valita useita arvoja. Jälleen nappulan nimi ryhmittelee.

Valintalista:

Valitse lisätäyte:

Salami Kinkku Herkkusieni Valkosipuli

Jos select-osaan lisää attribuutin "multiple", voi valita useampia vaihtoehtoja listasta.

Tekstialue:

<textarea name="kommentti" rows="3" cols="70">Kirjoita jotain... </textarea>

Kirjoita jotain....

Huomaa että kirjoitettavaan kenttään voi kirjoittaa oletusarvon.

Lomakedatan käsittely

HTML-kieli antaan mahdollisuuden rakentaa erilaisia lomakkeita, mutta se ei tarjoa vastausta sille, miten lomake tulee käsitellä taikka mihin data tulee välittää. Sitä varten tarvitaan jokin lomakekäsittelijä, eli jokin skripti, joka tekee lomakkeelle halutut toimenpiteet. Tämä onnistuu sopivalla skriptikielellä. Yksi tällainen kieli on PHP, josta esimerkki erillisellä sivulla. Myöskin muut skriptikielet sopivat tähän tarkoitukseen, esimerkiksi Pythonillakin voi käsitellä lomakedataa.

Turvallisuus on lisäksi erittäin tärkeä osa lomakkeiden käsittelyä. Aina on varmistuttava siitä, että lomake välittää vain sellaista dataa, jota sen on tarkoituskin välittää, eli mitään ylimääräistä lomakkeesen ei pidä päästä syöttämään. Tällaista ylimääräistä ovat muun muassa seuraavat asiat:

• html-tagit. Jos palautteessa ei tarvita html-koodia, sitä ei saa hyväksyä. Esimerkiksi <script>-tagi muodostuu helposti vaaralliseksi, koska tuo sallii Javascriptin ajamisen. Tätä kutsutaan nimellä Cross Site Scripting (XSS).
• tietokantaliittymissä on estettävä kyselyihin yritettävät SQL-temput, joilla pyritään saamaan tietokannasta enemmän tietoa irti kuin olisi tarkoitus taikka yritetään tuhota taikka sotkea tietokannan tauluja. Tätä kutsutaan nimellä injektio (Injection).

Se, miten helppoa näiden torjunta on, riippuu paljolti käytetystä kielestä. Useat kielet sisältävät nykyisin omia turvallisuutta lisääviä ominaisuuksia. Itse ei tarvitse pyörää keksiä tässä tilanteessa uudestaan.

HTML5 tarjoaa myös erilaisia tarkistusmahdollisuuksia lomakkeelle syötettävälle datalle. Sillä voi estää tyhjien kenttien lähettämisen (required-attribuutti), tarkistaa sähköpostikentän syntaksin (erillinen email-kenttätyyppi) sekä tarkistaa että lomakkeen kenttään on syötetty oikeanmuotoista dataa (pattern-attribuutti). Näistä ja muista HTML5:n ominaisuuksista lisää esimerkiksi tästä linkistä.

Huomioitavaa sekä lisää infoa asiasta

Edellä ei ollut läheskään kaikki lomakekenttätyypit, niitä on useita muitakin. Varsinkin HTML5 on tuonut lisää kenttätyyppejä sekä erilaisia attribuutteja, joita voi käyttää hyväkseen.

Hieman linkkejä lopuksi:

http://www.w3schools.com/html/html_forms.asp, w3schoolsin ohjeita lomakkeiden tekemiseen.

http://www.cs.tut.fi/~jkorpela/webjulk/2.4.html, Jukka Korpelaa tännekin...

https://www.owasp.org/index.php/Main_Page, Open Web Applications Security Project (OWASP). Tähän on syytä tutustua viimeistään silloin, kun web-julkaiseminen muuttuu vakavammaksi kuin pelkkä harrastus. Älä kuvittele tekeväsi työksesi web-julkaisuja, jos et tiedä, mitä tällä sivustolla on.