Time Input (Kellonaikakenttä)
Kellonaikakenttä on komponentti, johon käyttäjä täyttää kellonajan. Se muistuttaa tekstikenttäkomponenttia, mutta sisältää tiettyjä kellonajan syöttöön tarkoitettuja erityispiirteitä.
Saavutettavuus ja käytettävyys
- Kellonaikakentän kanssa tulee aina käyttää otsaketta (label).
- Käyttäjälle tulee esittää ohje kellonajan muodosta (t.mm). Ohjeen tulee olla aina näkyvissä joko ohjetekstissä tai otsakkeessa. Suositeltu paikka kellonajan muoto-ohjeelle on komponentin ohjeteksti.
- Muoto-ohjetta ei tule ilmoittaa ainoastaan kellonaikakentän placeholder-attribuutissa, koska tieto katoaa näkyvistä käyttäjän kirjoittaessa kenttään.
- Komponentin kiinteä leveys toimii vihjeenä syötteen pituudesta ja erottaa sen visuaalisesti muista tekstikentistä.
- Kellonaikakenttä täydentää tai korjaa käyttäjän syötettä vastaamaan suomalaista kellonaikaformaattia tietyissä tilanteissa. Nämä tilanteet on esitelty jäljempänä tällä sivulla.
Mistä komponentti koostuu
Kellonaikakenttä koostuu otsakkeesta (labelText) ja varsinaiseta syötekentästä. Komponentille voidaan lisäksi antaa ohjeteksti (hintText), joka näkyy otsakkeen ja syöttökentän välissä. Kellonajan muoto-ohje on suositeltava antaa ohjetekstinä.
Lähtökohtaisesti kaikki Suomi.fi -lomakekentät ovat pakollisia, ja valinnaiset kentät merkitään valinnaisuustekstillä (optionalText). Valinnaisuusteksti näytetään suluissa otsakkeen lopussa. Kellonaikakentälle voidaan lisäksi antaa tila (status) ja tilateksti (statusText), jotka ilmaisevat hyväksyttyä tai virheellistä tilaa.
Koko ja käyttö
Kellonaikakentällä on kiinteä 60 pikselin leveys, joka toimii vihjeenä syötteen pituudesta ja erottaa komponentin visuaalisesti muista lomakekentistä.
Kellonaikakenttää käytetään tyypillisesti yhdessä päivämääräkentän kanssa. Tämä yhdistelmä sisältää tärkeitä huomioitavia käytettävyys- ja saavutettavuusasioita, jotka on esitelty omassa suunnittelumallissaan.
Automaattinen syötteen täydentäminen/korjaaminen
Jotta kellonajan syöttäminen olisi mahdollisimman vaivatonta, sisältää komponentti logiikkaa käyttäjän syötteen automaattiselle täydentämiselle tai korjaamiselle tietyissä tapauksissa. Syötteen automaattinen täydentäminen/korjaaminen tapahtuu selaimen kohdistuksen siirtyessä pois kentästä (onBlur event).
- Mikäli syöte on 1-2 merkkiä pitkä ja muodostaa validin kellonajan tuntiosan (0-24), täydennetään kellonaika loppuun. Esim:
- 14 → 14.00
- 8 → 8.00
- 08 → 8.00
- Mikäli syöte on 4 merkkiä pitkä ja muodostaa validin kellonajan ilman välimerkkiä, täydennetään välimerkki paikalleen. Esim:
- 1745 → 17.45
- 0800 → 8.00
- Etunolla poistetaan muutoin validista kellonajasta. Esim:
- 02.00 → 2.00
- Erotinmerkkinä toimiva kaksoispiste korjataan pisteeksi muutoin validissa kellonajassa. Piste on oikea kellonajan erotinmerkki suomen kielessä. Esim:
- 15:30 → 15.30