Lomakesäännöt

Jokainen lomakkeen kohta on ympäröity elementillä <div class="FormItem">. Pakollisilla lomakkeen kohdilla on myös luokkanimi 'required'. Lisäksi riippuen elementin funktiosta, sillä on lisäluokkanimi, joka annetaan seuraavien sääntöjen pohjalta:

• Lomakeosiolla voi olla header-osio <div class="FormItem HeaderItem">.
  • Otsikkoelementin sisällä on otsikkoelementti <h2>, sekä tekstikappale <p>, joka toimii täytettävän lomakekokonaisuuden yleisenä ohjeena.
  • Lomakkeiden ohjetekstit ovat kaikki muokattavissa verkkokaupan sanakirjassa.
• Jos yksi osio sisältää useita ryhmiteltäviä lomakekenttiä, osiolle annetaan lisäluokkanimi 'GroupItem'.
  • Tämän ryhmän aloittaa ryhmäkokonaisuutta kuvaava selite <label class="GroupLabel">, jonka jälkeen jokainen kokonaisuuden osa on oman <div>-elementtinsä sisällä. Näiden lohkojen sisällä on aina selite, jonka jälkeen tulee joko <input>- tai <select>-elementti.
• Jos kyseessä ovat valintaruudut tai -painikkeet (<input type="checkbox/radio">), osiolle annetaan lisäluokkanimi 'CheckWrap'. Tällainen elementti voi olla joko <div> tai <fieldset>.
  • Tämän ryhmän sisällä on ensimmäisenä tekstikappale <p class="label">.
  • Aloittavan tekstikappaleen jälkeen aloitetaan valintaruudut ja -napit sisälleen sulkeva elementti <div class="Checks">.
    • Jokainen valintaruutu tulostetaan selite-elementin sisään (<label>) ja valintaruudun jälkeen tulostetaan valinnan nimi.
    • Selite-elementin sulkemisen jälkeen voidaan mahdollisesti tulostaa vielä tekstikappale <p class="FormHelp">, jossa on valinnan ohje tai aputeksti.
• Lomakkeen tietojen lähetyksen sisältävä elementti on <div class="FormItem FormSubmit">.
  • Tämän elementin sisällä on aina painike (<button>) ja jos kyseessä on pääasiallinen lomakkeen lähetyspainike, sillä on lisäksi luokkanimi 'SubmitButton'.
  • Painikkeen jälkeen tulee vielä mahdollisesti niinsanottu vaihtoehtoinen toiminto, joka on tekstikappale, jonka sisällä on vaihtoehtoisen toiminnan sisältävä linkki. Esimerkiksi monivaiheisella kassalla tämä on paluu edelliseen vaiheeseen. Tekstikappaleella on luokkanimi 'FormAltAction', sekä kassoilla vielä lisäluokkanimi 'CheckoutPrevStage'.

Alla on esimerkiksi asiakastietojen muokkauslomakkeen merkkaus kokonaisuudessaan:

<form action="/account/edit/" method="post" id="EditContactInfoForm">
  <fieldset id="EditContactInfo">
    <input type="hidden" name="on_success" value="/account/">

    <div class="FormItem HeaderItem">
      <h2>Muuta omia tietojasi</h2>
    </div>

    <div class="FormItem required ">
      <label for="email">Sähköposti</label>
      <input id="email" type="email" name="customer[email]" autocomplete="email" value="tino@pulse247.info" size="27">
      <div id="OrderNewsletter" class="Checks InlineCheck">
        <label for="email_subscription">
        <input type="checkbox" name="customer[email_subscription]" id="email_subscription" value="1"> Kyllä, haluan tilata ilmaisen uutiskirjeen.</label>
      </div>
    </div>

    <div class="FormItem GroupItem required ">
      <label for="firstname" class="GroupLabel">Nimi</label>
      <div class="">
        <label for="firstname">Etunimi</label>
        <input id="firstname" name="customer[firstname]" autocomplete="given-name" value="Tino" type="text" size="18">
      </div>
      <div class="">
        <label for="lastname">Sukunimi</label>
        <input id="lastname" name="customer[lastname]" autocomplete="family-name" value="Kraft" type="text" size="18">
      </div>
    </div>
  
  <div class="FormItem GroupItem required ">
    <label for="street_address" class="GroupLabel">Osoite</label>
    <div class="">
      <label for="street_address">Postiosoite</label>
      <input id="street_address" name="customer[street_address]" autocomplete="street-address" value="LSKDNL" class="long" type="text" size="27">
    </div>
    <div class="">
      <label for="postal_code" class="required">Postinumero</label>
      <input id="postal_code" name="customer[postal_code]" autocomplete="postal-code" value="33100" class="short" type="text" size="8">
    </div>
    <div class="">
      <label for="post_office" class="required">Postitoimipaikka</label>
      <input id="post_office" name="customer[post_office]" autocomplete="address-level2" value="Tampere" type="text" size="18">
    </div>
  </div>

  <div class="FormItem required">
    <label for="country">Maa</label>
    <select name="customer[country]" id="country">
      <option value="af">Afganistan</option>
      <option value="ax">Ahvenanmaa</option>
      ...
      </select>
  </div>

  <div class="FormItem">
    <label for="phone">Puhelin</label>
    <input id="phone" type="text" name="customer[phone]" autocomplete="tel" value="0405353543" size="27">
    <div class="Checks InlineCheck">
      <label for="sms_subscription">
      <input type="checkbox" name="customer[sms_subscription]" id="sms_subscription" value="1"> Minulle saa lähettää tekstiviestejä						</label>
    </div>
  </div>

  <div class="FormItem GroupItem">
    <label for="company" class="GroupLabel">Yritys</label>
    <div class="">
      <label for="company">Yritys</label>
      <input id="company" name="customer[company]" autocomplete="off" value="" class="long" type="text" size="27">
    </div>
    <div class="">
      <label for="vat_code">Y-tunnus</label>
      <input id="vat_code" name="customer[vat_code]" autocomplete="off" value="" class="short" type="text" size="8">
    </div>
  </div>


  <div class="FormItem FormSubmit">
    <button type="submit" class="SubmitButton"><span>Tallenna</span></button>
    <p class="FormAltAction Cancel">tai <a href="/account/">
    <span>peruuta ja palaa takaisin</span>
    </a></p>
  </div>
  </fieldset>
</form>