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
Code Block |
---|
language | html/xml |
---|
title | Perusrekisterissä käytettävä lomaketyyli |
---|
|
<!-- 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> |
Code Block |
---|
language | html/xml |
---|
title | Muut tavat |
---|
collapse | true |
---|
|
<!-- 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.
Code Block |
---|
language | html/xml |
---|
title | Lomakkeen painikkeet |
---|
|
<div class="form-buttons-e">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-default" type="clear">Clear</button>
</div> |