HTML-lomake gridiin tyylillä. Täysi mahdottomuusko?

Kun Internetin tulevista trendeistä käydään keskustelua, monesti nousee esiin yksi vakio: rivirekisteri, eli baseline grid. Tätä onkin jo kiitettävästi opittu käyttämään tekstielemettien kanssa, mutta entäpä nettilomakkeet? Lomakkeet ovat usein web-designerin painajainen. Lomakkeiden ongelmana on ensinnäkin se, että ne ovat tiukasti sidottu joko suoraan käyttöjärjestelmään tai selaimeen, jolloin lähtökohdat ja lopputulokset ovat monesti hyvinkin vaihtelevia. Tämä…

Kun Internetin tulevista trendeistä käydään keskustelua, monesti nousee esiin yksi vakio: rivirekisteri, eli baseline grid. Tätä onkin jo kiitettävästi opittu käyttämään tekstielemettien kanssa, mutta entäpä nettilomakkeet?

Lomakkeet ovat usein web-designerin painajainen. Lomakkeiden ongelmana on ensinnäkin se, että ne ovat tiukasti sidottu joko suoraan käyttöjärjestelmään tai selaimeen, jolloin lähtökohdat ja lopputulokset ovat monesti hyvinkin vaihtelevia. Tämä johtuu yksinkeraisesti vain siitä, että CSS2.1 luonnoksessa ei ole määritelty, kuinka lomake-elementtejä täytyisi pystyä muotoilemaan ja tässä tapauksessa lopputulos voi olla mitä vain.

Usein onkin parempi, ettei lomakkeita yritettäisi muotoilla kovin radikaalisti, koska se aiheuttaa helposti vain paljon uusia ongelmia. Lisäksi käyttäjät ovat jo hyvin tottuneet oman selaimensa lomakkeiden oletusulkoasuun, niin miksi sitä pitäisi lähteä muuttamaan? Jos lomake ei muistuta enää lomaketta, niin käyttäjä hämmentyy ja turhautuu hyvin nopeasti sen täyttämiseen. Tämä muodostuu helposti vakavaksi ongelmaksi esimerkiksi verkkokaupan kassoilla, jos käyttäjä päättäkin jättää tilaamisen kesken.

Siksi olenkin jo tovin kehitellyt mahdollisimman yksinkertaista lomakepohjaa, joka antaisi hyvät lähtökohdat luoda lomakkeita nopeasti ja tehokkaasti, samalla jättäen suunnittelijalle mahdollisimman paljon liikkumavaraa. Ajatuksena oli myös, että lomakkeet säilyttäisivät hyvän vertikaalisen rytmin ja jos vain mahdollista; pysyisivät rivirekisterissä. Mutta juuri edellä mainituista seikoista johtuen lomakkeiden rivirekisterissä pysyminen täydellisesti kaikissa selaimissa on utopiaa.

Esimerkit ja itse tiedostot

Nyt kun olen sopivasti pehmittänyt teidän päänne, niin mennään itse asiaan. Valmistelin kahden palstan demon, jossa on kolme eri lomakevariaatiota. Kaikki variaatiot käyttävät tarkalleen samaa merkkausta, joka on MyCashflow’n kassatapahtuman ensimmäisestä vaiheesta.

Demon pitäisi pysyä rivirekisterissä Windows-selaimilla, mutta Linux- ja Mac-selaimilla select-elementti aiheuttaa toistaiseksi pienen heiton. Lisäksi textarea-elementin koon määritys cols ja rows attribuuteilla.

Ja tässä vielä linkki itse demoon, sekä kaikki esimerkkitiedostot pakattuna.

Jälkisanat ja kiitokset niille joille kunnia kuuluu

Näiden lomakkeiden ensimmäiset askeleet on otettu jo joskus vuoden 2007 alussa, kun törmäsin ensimmäistä kertaa Uni-Form nimiseen lomakkeistopohjaan, jota pidin hieman liian vaikeaselkoisena ja monimutkaisena omaan käyttööni. Nykyisellään voitte lähinnä enää huomata joitain yhtäläisyyksia merkkauksessa.

Jossain välissä vuotta 2007 apuun tuli nerokas Eric Meyerin tyylien nollaus, joka jättää lomakkeet täysin koskemattomiksi. Näiden lomakkeiden mukana tuleva base.css -tiedosto pitää sisällään Ericin nollauksen, PiE:n clearfixin, sekä perusmuotoilut tavallisille tekstielementille. Tekstimuotoilut lainaavat puolestaan joitain osia ja ajatuksia Blueprintin css-kirjastolta.

Ensisijaisesti tämä kirjasto on tarkoitettu MyCashflow-verkkokaupan suunnittelun apuvälineeksi, mutta jos koet tämän paketin hyödylliseksi omissa projekteissasi, niin ei sen käyttöä kielletäkään.

  • Ari Lindholm

    Jostain syystä itse olen mieltynyt Nick Rigbyn ratkaisuun http://www.alistapart.com/articles/prettyaccessibleforms tämä vain jotenkin toimii…

  • Onhan tuo Nickin ratkaisu ihan pätevä paketti. Itse vain en ole mieltynyt tuohon järjestettyyn listaan lomakkeen runkona, enkä myöskään pätkään pakollista javascriptiä, mikäli haluaa tuon toimimaan kaikissa selaimissa samalla tavalla. Onhan tuo tietty huomattavasti kevyempi ratkaisu ja sitä varmasti kannattaa käyttää kevyempään tarpeeseen.