Placeholderien lisääminen html-lomakkeelle

KehittäjilleKoodausohjeet › Placeholderien lisääminen html-lomakkeelle

Taustaa

Verkkokaupan html-lomakkeissa (esim. tilauslomakkeessa) on vapaaehtoisia ja pakollisia kenttiä, joilla on erilaiset ulkoasutyylit. Demokauppamme ulkoasussa vapaaehtoisten kenttien nimi näytetään harmaalla tekstillä ja pakollisten mustalla. Kaikki verkkokaupan asiakkaat eivät kuitenkaan ymmärrä, että harmaa väri tarkoittaa vapaaehtoista.

Ratkaisuna on placeholderin lisääminen vapaaehtoisille tai pakollisille kentille. Placeholder tarkoittaa html-lomakkeen kentässä näkyvää täyttöohjetta, kuten esimerkkiksi "vapaaehtoinen" tai "pakollinen", jolloin kentän pakollisuus ei jää kenellekään epäselväksi.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

  • verkkoselain (esim. Chrome)

Esimerkki 1

Tässä esimerkissä tilauslomakkeen Yritys- ja Y-tunnus-kenttiin lisätään placeholder.

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "Javascript/HTML5".
  • Syötä nimeksi mitä tahansa.
  • Valitse Sivu-kohdasta "Ostoskori".
  • Valitse Sijainti-kohdasta "Verkkokaupan ostoskorisivulla Vastaanottajan tiedot -otsikkoa ennen".
  • Lisää Koodi-kohtaan:
    <img height="0" width="0" onload="document.getElementById('custto_company1').placeholder='Vapaaehtoinen';document.getElementById('custto_company2').placeholder='Vapaaehtoinen';document.getElementById('custto_business_id').placeholder='Vapaaehtoinen'" src="data:image/gif;base64,R0lGODlhAQABAJEAAP///wAAAAAAAAAAACH5BAkAAAAALAAAAAABAAEAAAgEAAEEBAA7" alt="" />
    
  • Klikkaa Tallenna-painiketta.

Esimerkki 2

Tässä esimerkissä tilauslomakkeen Lisätieto-kenttään lisätään placeholder.

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "Javascript/HTML5".
  • Syötä nimeksi mitä tahansa.
  • Valitse Sivu-kohdasta "Ostoskori".
  • Valitse Sijainti-kohdasta "Verkkokaupan ostoskorisivulla Vastaanottajan tiedot -otsikkoa ennen".
  • Lisää Koodi-kohtaan (korvaa "Dasdfas fdsfdsfds fds dasd" omalla tekstillä):
    <img height="0" width="0" onload="document.getElementById('special_requests').placeholder='Dasdfas fdsfdsfds fds dasd'" src="data:image/gif;base64,R0lGODlhAQABAJEAAP///wAAAAAAAAAAACH5BAkAAAAALAAAAAABAAEAAAgEAAEEBAA7" alt="" />
    
  • Klikkaa Tallenna-painiketta.

Vastuunrajoitus

Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.

Näin rakennat yrityksellesi verkkokaupan

1. Tilaa webhotelli

Tilaa esimerkiksi Cloudcity Plus ↗. Vaihtoehtoisesti voit tilata netistä minkä tahansa EU:n alueella toimivan webhotellipalvelun, joka on yhteensopiva ohjelmiston kanssa.

2. Tilaa asennus

Tilaa maksuton asennustyö. Vaihtoehtoisesti voit ladata ja asentaa ohjelmiston itse. Maksuton tekninen tukemme neuvoo tarvittaessa kummassakin tapauksessa.

3. Perusta verkkokauppa

Kirjaudu selaimella verkkokaupan hallintaliittymään ja perusta verkkokauppa. Tarjoamme maksuttoman Maxi-lisenssin verkkokaupan perustamisen ajaksi.

4. Tilaa lisenssi

Tilaa Mini- tai Maxi-lisenssi vasta, kun olet perustanut verkkokaupan. Vaihtoehtoisesti voit olla perustamatta verkkokauppaa tai käyttää ohjelmistoa maksuttomassa lepotilassa.

Scroll to Top