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>
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 3 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Web. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/07/10/natimpia-nappuloita-lomakkeisiin.
Emil Virkki kirjoitti 307 päivää sitten:
Mites selaintuki? Kai se toimii sikavanhoilla selaimilla ja ruudunlukijoilla? Vaikuttaa kyllä hyvältä :)
Petteri kirjoitti 306 päivää sitten:
button on yhtä vanha keksintö, kuin itse verkkolomake, eli yhteensopivuusongelmia ei pitäisi tulla ollenkaan. Pientä eroavaisuutta voi tulla CSS:n takia, mutta hälläväliä… Kunhan kaikki toimii, niin hyvä niin.
Luin ton artikkelin ennen kuin tein uudet sivut.
Petri kirjoitti 305 päivää sitten:
Niin, uskon Petterin olevan oikeassa. Tuskin sen käyttäminen ongelmia synnyttää, ellei sitten nappulaa uhallaan rikota vaikka ylenpalttisen CSS-kikkailun kautta. :-) Se on tosiaan vanhahko elementti, mutta ei ole jostain syystä kovin yleisesti käytössä. Täytyy myöntää, että itsekin sain tiedon siitä vasta luettuani tuon Particletreen artikkelin.
Tarkennuksena vielä, että button voi olla vain jonkin näistä tyypeistä:
Jos halutaan laittaa submit-namiska, niin sitten naputellaan type=“submit”.