Lomake-elementit
Sivustolla käyttäjältä pyydettävän tiedon keräämiseen käytettävät kentät ovat interaktiivisia elementtejä, jotka toimivat form-elementin sisällä. Niiden ulkoasua ja toimintaa ohjaavat myös taustalle esiasennetun Bootstrap-kirjaston ominaisuudet.
Perustyyli
Tekstipohjaiset sisältökentät, kuten <input>, <select> sekä <textarea> määritellään käyttämään .form-control-luokkaa. Näin käyttöön saadaan perustyylit, kuten esimerkiksi typografia, sisennykset, reunaviivat sekä mm. kohdistus (focus).
.form-control {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
Tekstikenttä (input)
Tekstikenttää käytetään yksirivisen tekstin syöttämiseen. Luokkana käytetääm .form-control-luokkaa, ks. edellä.
Ohjeteksti voidaan asettaa placeholder-attribuutilla.
Tarvittaessa tekstikentän tyyppi voidaan muuttaa esimerkiksi url-tyyppiseksi: type="text". Tällöin esimerkiksi joidenkin mobiililaitteiden näppäimistö muuttuu suoraan tukemaan url-osoitteen kirjoittamista. Muita mahdollisia muotoja ovat mm. sähköpostiosoite type="email" sekä puhelinnnumero type="tel". Näitä tyyppejä on mahdollista hyödyntää myös syötteen validoinnissa.
HTML-esimerkki
HTML-koodi
<input type="text" name="esm_text1" value="" class="form-control" id="esm_text1">
<input type="text" name="esm_text1" value="" class="form-control" id="esm_text1" placeholder="placeholder-teksti">
<input type="email" name="esm_text3" value="" class="form-control" id="esm_text13" placeholder="syötä sähköpostiosoite">
<input type="tel" name="esm_text4" value="" class="form-control" id="esm_text14" placeholder="syötä puhelinnumero">
Tekstialue (textarea)
Tekstialuetta käytetään monirivisen tekstin syöttämiseen. Luokkana käytetääm .form-control-luokkaa, ks. edellä.
Sivuston tyyleissä on määritelty text-area elementin korkeusasetukseksi “auto”, jolloin korkeus määräytyy selaimen mukaan.
Ohjeteksti voidaan asettaa placeholder-attribuutilla.
HTML-esimerkki
HTML-koodi
<textarea name="esm_texta1" class="form-control" id="esm_texta1"></textarea>
<textarea name="esm_texta2" class="form-control" id="esm_texta2" placeholder="placeholder-teksti"></textarea>
Valintapainike (radio)
Valintapainikkeella valitaan yksi useista vaihtoehdoista. Jos painiketta ohjataan label-elementillä, tulee elementin id-attribuutti asettaa uniikkiin arvoon. Label-elementti voi olla painikkeen ympärillä tai siitä erillisenä. Jos painikkeet halutaan asemoida allekkain, ne sijoitetaan form-check-input-luokan sisältävän elementin sisälle. Jos ne taas halutaan asemoida rinnakkain, ne sijoitetaan form-check-inline-luokan sisältävän elementin sisälle.
HTML-esimerkki, valintapainikkeet allekkain
HTML-koodi
<div class="form-check">
<label for="radio1">
<input type="radio" name="radio1" id="radio1" class="form-check-input" value="Arvo 1"/> Kuvausteksti</label>
</div>
<div class="form-check">
<label for="radio2">
<input type="radio" name="radio1" id="radio2" class="form-check-input" value="Arvo 2"/> Kuvausteksti</label>
</div>
HTML-esimerkki, valintapainikkeet rinnakkain
HTML-koodi
<div class="form-check-inline">
<label for="radio3">
<input type="radio" name="radio2" id="radio3" class="form-check-input" value="Arvo 1"/> Kuvausteksti</label>
</div>
<div class="form-check-inline">
<label for="radio4">
<input type="radio" name="radio2" id="radio4" class="form-check-input" value="Arvo 2"/> Kuvausteksti</label>
</div>
Valintaruutu (checkbox)
Valintaruudulla valitaan yksi tai usempi annetuista vaihtoehdoista. Jos painiketta ohjataan label-elementillä, tulee elementin id-attribuutti asettaa uniikkiin arvoon. Label-elementti voi olla painikkeen ympärillä tai siitä erillisenä. Jos painikkeet halutaan asemoida allekkain, ne sijoitetaan form-check-input-luokan sisältävän elementin sisälle. Jos ne taas halutaan asemoida rinnakkain, ne sijoitetaan form-check-inline-luokan sisältävän elementin sisälle.
HTML-esimerkki, valintaruudut allekkain
HTML-koodi
<a class="btnlinkki btnlinkki-blue btnlinkki-smaller" href="https://www.vesi.fi/vesitilanne/">Lue lisää vesitilanteesta</a>
HTML-esimerkki, valintaruudut rinnakkain
Alasvetovalikko (select)
Alasvetovalikko (select) on lista, josta käyttäjä voi valita haluamansa vaihtoehdot. Vaihtoehdot syötetään select-elementin sisällä olevilla option-elementeillä, joissa value-attribuutti sisältää varsinaisen arvon ja option-elementin sisällä oleva teksti taas käyttäjälle näkyvän osan. Select-elementillä luokkana käytetään .form-control-luokkaa, ks. edellä.
HTML-esimerkit
HTML-koodi
<select name="sort1" class="form-control">
<option value="3" selected="selected">Suosituimmat ensin<option>
<option value="2">Uusimmat ensin</option>
<option value="1">Vanhimmat ensin<option>
</select>
Muut elementit
Myös muita html-määrittelyn mukaisia lomake-elementtejä voidaan käyttää, vaikka niitä ei ole erikseen tässä dokumentissa kuvattu. Niille ei kuitenkaan ole erikseen vielä luotu omia tyylejään vesi.fi-sivustolle. On myös hyvä huomata, että kaikki Bootstrap-kirjaston määritykset ovat oletusarvoisesti käytettävissä sellaisinaan, kuitenkin niin, että ne perivät esimerkiksi sivuston marginaali- ja typografia-asetukset.