Lomake

Peruslomakkeen layout-mahdollisuuksia on kolme:

• kentän label on kentän yläpuolella
• kentän label on kentän vasemmalla puolella
• kentän label on kentän vasemmalla puolella ja kentät ovat peräkkäin

Perusrekisterissä käytetään ensisijaisesti tyyliä, jossa kentän nimi ja kenttä ovat vierekkäin (formille luokka label-left-e). Muokkauslomakkeet ladataan modaaliin ikkunaan. Lomakekenttiä voidaan tarvittaessa palstoittaa kahdelle palstalle, mikäli näkymän tilankäytön kannalta se on järkevää. Yleisesti ottaen kuitenkin käytetään yksipalstaista lomaketta.

Lomake-elementin perusrakenne

<!-- label inputin vasemmalla puolella -->
<div class="field-e label-left-e">
   <label for="textExample1">Label</label>
   <input id="textExample1" placeholder="Enter text" type="text">
</div>

<!-- tyyli käyttöön koko lomakkeessa -->
<form class="label-left-e">
   <div class="field-e">
      <label for="textExample1">Label</label>
      <input id="textExample1" placeholder="Enter text" type="text">  
  </div>
</form>

<!-- label inputin yläpuolella, oletus --> 
<div class="field-e">
   <label for="textExample1">Label</label>
   <input type="text" placeholder="Enter text" id="textExample1">
</div>


<!-- label inputin vasemmalla puolella, elementit tulevat peräkkäin -->
<!-- form-inline-e luokka voi olla myös esimerkiksi form-elementillä päteäkseen kaikkiin lomakkeen elementteihin -->
<div class="form-inline-e">
   <div class="field-e">
      <label for="textExample1">Label</label>
      <input id="textExample1" placeholder="Enter text" type="text">
   </div>
   <div class="field-e">
      <label for="textExample2">Label</label>
      <input id="textExample2" placeholder="Enter text" type="text">
   </div>
</div>

Lomakkeen painikkeet

Toimintonapit sijoitetaan lomakkeen alapuolelle ja ensisijainen painike (submit) korostetaan luokalla btn-primary. Painikkeiden ympärillä olevalle diville annetaan luokka form-buttons-e, joka tekee painikealueelle oman tyylinsä ja erottaa sen muusta lomakkeesta.

<div class="form-buttons-e">
   <button class="btn btn-primary" type="submit">Submit</button>
   <button class="btn btn-default" type="clear">Clear</button>
</div>