Lomake
JavaScriptiä hyödyntävä responsiivinen lomake, ollos hyvä!
Responsiivinen lomake
Tavallisesti teen lomakkeet suoraan julkaisujärjestelmällä, joten tässä oli paljon opeteltavaa. Haastavinta oli saada lomake responsiiviseksi niin, että taulukon otsikon (th-elementit) näkyvät järkevästi myös pienemmillä näytöillä. Päädyin käyttämään pseudoelementtiä :before, jolla vaihdoin haluamani tekstit oikeille paikoille.
Myös plus- ja miinus-napit aiheuttivat päänvaivaa mobiilinäkymässä. JavaScriptin osalta pähkäilin pitkään sen kanssa, että miten saan enterin toimimaan siten, ettei se samalla lähetä lomaketta. Tähän löytyi lopulta ratkaisu luentomateriaaleista.
Ominaisuuksista muutama sana
Määrittelin osan kentistä pakollisiksi (required), ja summakentät laitoin disabled-tilaan, jotta käyttäjä ei voi muokata hintoja mieleisekseen. Autofocus on ensimmäisen tuotteen määräkentässä, jolloin käyttäjä voi heti aloittaa tilauksen teon.
Sähköpostikenttä on tyypiltään "email", joten annetun osoitteen on oltava muotoa jotain@jotain, jotta se täyttää vaatimukset.
Huomion arvoista on, että lomakkeissa kannattaisi käyttää labeleita etenkin screen readereita varten, mutta siihen ei aikani nyt riittänyt. Tämä on kuitenkin varmaan ihan hyvä näin. :)