Hyvä ihminen! Tämä ei ole blogin etusivu. Täällä on tagiin "lomake" kytketyt jutut.
Olen mieltynyt hehkuttamaan verkkolomakkeiden label-elementin käyttämistä lomakkeissa. Tämän jännittävääkin jännittävämmän elementin avulla voi sitä oikeaoppisesti käytettäessä suurentaa lomakkeessa esimerkiksi tekstikentän tai pudotusvalikon aktivoimista varten sen klikkauspinta-alaa. Olen puhunut blogissa labelista aikaisemminkin. Ensimmäisen kerran vuoden 2005 marraskuussa.
Oikeaoppisesti tämä elementti voidaan niitata yhteen halutun lomakkeesta löytyvän tavaran kanssa laittamalla ensin label-tagiin for="id-tunnisteen-nimi" ja sitten yhdistettävään yksi- tai moniriviseen tekstikenttään tai vaikka pudotusvalikkoon vastaava id-tunniste, joka on esimerkissä id="id-tunnisteen-nimi". Esimerkiksi tekstikenttään yhdistettäessä merkkaus näyttäisi tältä:
<label for="id-tunnisteen-nimi">Käyttäjätunnus</label>
<input type="text" id="id-tunnisteen-nimi" />
Näin yksinkertaista. Tämän tempun teho ilmenee käytännössä siten, että nämä kaksi elementtiä on ikään kuin sidottu toisiinsa ajatustasolla. Päällisin puolin ne usein toimivat siten, että nyt tekstikentän aktivoimista varten osoitettu alue on kasvanut kattamaan myös label-laatikon pinta-alan. Klikkaamalla hiiren osoittimella sanan “Käyttäjätunnus” päällä, tuo tekstikenttä aktivoituu.
Yleensä label-kenttien kohdalla käyttäjälle ei kuitenkaan vihjata mahdollisuudesta hyödyntää kyseistä tekstialuetta jonkin lomake-elementin aktivoimiseksi. Siispä ohjeistetaan. Tehdään siis CSS-merkkauksen sekaan yhden rivin pituinen mahtikäsky:
label { cursor: pointer; }
Tässä on toimii-jos-toimii -periaatteella rakennettu viritys, jonka avulla saadaan muotoiltua input="file"-tyyppiä edustavan (X)HTML-lomakkeen tiedostonsiirtoelementin ulkonäköä puhtaasti CSS-merkkauksen avulla. Suuria ja ylväitä sanoja. Käytännössä tämän lomake-elementin säätäminen halutunnäköiseksi onnistuu ihan vain hapuilemalla. Tässä annetut esimerkit eivät varmaankaan toimi kaikissa tapauksissa tai kaikissa nettiselaimissa.
Lomake-elementin muotoilemista varten joudutaan laittamaan esimerkiksi span-tagi muotoiltavaksi valitun file input -kentän ympärille. Näin:
<span><input type="file" /></span>
Tämä sen takia, ettei tuota input-kenttää oikein muuten saa ruttuun. span-kääryleen sisälle laitetaan myöhemmin esimerkiksi kuvatiedosto, missä lukee “Valitse tiedosto…” tai vaikkapa jonkinlainen symboli, josta ilmenee kyseessä olevan tiedostonsiirtokenttä.
Seuraavaksi olisi kaiveltava muistista image replacement -kikkojen periaatteita. Tässähän on käytännössä sama idea kuin tavallisen tekstin piilottaminen ja sen korvaaminen kuvatiedostolla, paitsi sillä erotuksella että nyt piilotetaan ainakin osittain tuo file input ja laitetaan sen tilalle (taustalle) hyllymään oma kuvatiedosto. Tässä tempussa käytetään hyväksi myös CSS:n avulla luotavaa läpinäkyvyyttä. Joudumme laittamaan itse tiedostonsiirtokentän näkymättömiin, mutta kuitenkin siten että sitä voidaan klikata. Kun tiedostonsiirtokenttä on piilossa ja klikkauskelpoinen, asetetaan span-elementin taustakuvaksi haluttu kuvatiedosto. Sillä lailla. Virityksessä joudutaan kuitenkin tekemään kohtalaisen paljon hienosäätöä, että itse klikattava tiedostonsiirtokentän nappula saadaan span-kääreen kohdalle.
Tätä systeemiä rakennellessani mietin tovin jos toisenkin miten file inputin klikattava nappula saadaan pingotettua haluttuun kokoon… CSS:n avulla nappulaa ei saa suoraan suuremmaksi esim. lisäämällä elementin korkeutta. Ainoa toimiva ratkaisu on nähdäkseni kasvattaa file inputin fontin kokoa. Käytännössä siis näin:
form span input { font-size: 40px !important; }
Otetaan vielä askel kerrallaan ja katsotaan miten voisi kaikkein vaivattomimmin saavuttaa jonkinlaisen lopputuloksen.
file input -kenttä.Vau. Kolme vaihetta. Haastavin näistä lienee tuo kolmas. Se kun vaatii silmämääräistä säätämistä aikaisemmin mainitun input="file -tyyppiä olevan elementin kanssa. Kannattaa jättää alussa CSS-merkkausta säädettäessä tiedostonsiirtoelementti läpinäkyvyydeltään esim. 50 % tasolle, sillä siten nähdään missä se file inputin nappula oikein lymyilee ja onko se sopivan kokoinen. Nappula on oikeassa paikassa kun se peittää lomake-elementin ympärille käärityn span-tagin. Oikea paikka voi näyttää tältä. Tuosta linkistä avautuu kuvakaappaus, jossa tiedostonsiirtopömpeli on laitettu peittämään sitä ympäröivä span ihan ja täysin kokonaan. Kun nappula on saatu paikoilleen, voidaan vetää läpinäkyvyyssäätimet kaakkoon, eli piilotetaan file input CSS-tiedostoon merkatun läpinäkyvyyden avulla.
Niin. Jos se on niin se on. Tällaisessa tilanteessa voisimme vaikkapa lisätä nettisivulla näkyvän lomakkeen merkkaukseen, että:
<span class="disabled"><nput type="file" disabled="disabled" /></span>
Tällöin CSS-tiedostoon voisi säätää esimerkiksi tällaista liirumlaarumia:
form span.disabled {
opacity: .5;
filter: alpha(opacity=50);
Nyt tiedostonsiirtokentän taustakuvaksi asetettu kuvatiedosto näkyy vain puoliksi läpinäkyvänä. Tietysti koko kuvatiedoston voi vaihtaa esittämään disabled="disabled" -tilassa olevaa nappulaa tai muuta symbolia. Tai koko elementin voi piilottaa.
Onpas siitä taas kulunut pitkä aika kun viimeksi kirjoittelin tänne. On ollut kiireitä, niitä on edelleen. Kunhan sitä kullankallista luppoaikaa alkaa ilmaantumaan, voisin kirjoitella esimerkiksi näistä jutuista:
Tiedostonsiirtolomakkeen ulkoasun muokkaaminen CSS:n avulla. Tästä on olemassa jo toimiva demo, jonka innoittajana toimi Niceonen blogissa mainittu Shaun Inmanin esittelemä keino säätää file inputin ulkoasua JavaScriptia ja CSS-merkkausta käyttäen. Meitsin kikka kakkonen ei tarvitse lainkaan JS-koodia, joten who’s the man?
Aamulla herätessäni yöunilta heräsi sellainen vänkä idea. Siinä Textpatternin avulla voidaan luoda kullekin blogimerkinnälle uniikki ulkoasu. Joo-o.
Particletree julkaisi hiljattain äärimmäisen kiehtovan artikkelin verkkolomakkeiden nappuloiden muotoilusta.
<input type="submit" value="Lähetä" />
<button type="submit">Lähetä</button>
Kummatkin napit toimivat ja käyttäytyvät samalla tavalla. Molemmat on myös W3C:n mukaan ihan OK. Asian ydin ja jutun juuri tuossa Particletreen kirjoituksessa on se, että jälkimmäistä button-elementtiä voidaan muokata huomattavasti helpommin, kuin yleisempää input-nappia, esimerkiksi CSS:n avulla. Kyseisen nappulan sisälle voi myös liittää kuvatiedostoa (img) tai muuta tavaraa.
Testataanpa vielä miltä button oikein näyttää. Tältähän se:
Nappula luotiin tällä yksinkertaisella merkkauksella:
<button>Nappula</button>
Tuskin te suuresti yllätytte, vaikka nyt teille kerronkin että eri selaimet esittävät eri tavoin jopa yksinkertaisen ja muotoilemattoman lomakkeen.
Tagit: lomake
