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 saattaa lisäksi tulla tekstikappale, jossa on linkki vaihtoehtoiseen toimintoon. Tekstikappaleella on luokkanimi 'FormAltAction'.

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>