Myös lomakkeisiin voidaan kohdistaa CSS-ohjeita.
Esimerkkinä "Tapahtumaan osallistumisen" -lomake.
Mikäli www-sivulla on enemmän kuin yksi kokonainen lomake kenttineen, on lomakkeiden CSS-muotoiluille annettava nimet.
1. Jos www-sivulla yksi lomake lomakenttineen, esimerkki CSS-ohjeesta:
input[type=text], select {
TÄSSÄ CSS-ohjeet
}
input[type=text].lomake1, select {
TÄSSÄ CSS-ohjeet
}
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
input[type=text].lomake1, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit].lomake1 {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit].lomake1:hover {
background-color: #45a049;
}
.tausta1 {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
HTML-koodaus:
<div class="tausta1">
<form action="/tiedot.php">
<label for="eNimi"> Etunimi </label>
<input class="lomake1" type="text" id="eNimi" name="firstname" placeholder="Anna etunimesi...">
<label for="sNimi"> Sukunimi </label>
<input class="lomake1" type="text" id="sNimi" name="lastname" placeholder="Anna sukunimesi..">
<label for="country"> Kaupunki </label>
<select id="country" name="kaupunki">
<option value="kajaani"> Kajaani </option>
<option value="kokkola"> Kokkola </option>
<option value="kuopio"> Kuopio </option>
</select>
<input class="lomake1" type="submit" value="Osallistu">
</form>
</div>
Esimerkin lomakkeen CSS-ohjeista:
width: 100%; - asettaa input-kentän leveydeksi 100% siinä tilassa (div) johon lomakekenttä sijoitetaan
display: inline-block; - sijoittaa input-kentän riville lohkoksi
box-sizing: border-box; - asetuksella saadaan lomakekentän leveys pysymään sen div-elementin sisällä johon kenttä on sijoitettu
cursor: pointer; - lomakekentän sisällä käyttävä kursori-merkki
Esimerkki, lomakekenttiä yksinkertaisesti muotoiltuna:
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
input[type=text].lomake2 {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid red;
}
HTML-koodaus:
<form>
<label for="fname"> Nimi </label>
<input class="lomake2" type="text" id="Nimi" name="nimi">
<label for="lname"> Sähköposti </label>
<input class="lomake2" type="text" id="Email" name="email">
</form>
Edellisen esimerkin ongelma on lomakekentän leveys. Kun kentän leveys on 100% kenttä on sen tilan (div:n) levyinen johon se on sijoitettu. Jos leveydeksi (width) asetetaan esim 75%, alemman kentän opasteteksti siirtyy väärää paikkaan. Korjaamiseksi on CSS-ohjeita muokattava lisää tai sijoitettava kentät esim aiemmin esitellyn tyyliseen tausta1-ohjeiseen div-elementtiin.
Edellisen esimerkin-lomake avautuu Teksti-linkistä sijoitettuna laatikkoon:
Tässä voi sijaita teksti-muotoista informaatiota.
Sulje-painikkeeseen voi yhdistää lomakkeissa käytettävän Lähetä-toiminnon.
Teksti-linkistä aukeava lomake, Lomake ja sen CSS-ohjeet edellisssä esimerkissä, alla lomake-laatikon CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
.md-button{
display: inline-block;
font-weight: 500;
font-size: 1em;
padding: 8px;
min-width: 88px;
border-radius: 2px;
border: none;
text-align: center;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: all .3s;
transition: all .3s;
}
.md-button:hover{
background-color: rgba(0,0,0, .1);
}
.md-button.md-button--raised{
background-color: rgb(64,81,181);
color: rgb(255,255,255);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.md-button.md-button--raised:hover{
background-color: rgb(64,81,181);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.md-card{
background-color: rgb(255,255,255);
border-radius: 5px;
overflow: hidden;
}
.md-card-content{
padding: 20px;
}
.md-card-btns{
width: 100%;
border-top: 1px solid rgb(200,200,200);
text-align: right;
padding: 8px 12px;
}
.toggleButton{
margin-top: 20px;
}
.infobox{
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 400px;
z-index: 1;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transition: visibility 0s .4s, opacity .4s 0s;
transition: visibility 0s .4s, opacity .4s 0s;
}
:checked + .infobox{
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: visibility 0s 0s, opacity .4s .1s;
transition: visibility 0s 0s, opacity .4s .1s;
}
/* alla olevat ohjeet tarvitaan jokaiselle avautuvalle boksille omansa */
#avaa1{ display: none; }
#avaa2{ display: none; }
#avaa3{ display: none; }
HTML-koodaus:
<p><b style="color: PURPLE"><label for="avaa1"> AVAA LOMAKE TÄSTÄ </label></b><p>
<div><input id="avaa1" type="checkbox">
<div class="infobox md-card">
<div class="md-card-content">
<form>
<label for="fname"> Nimi </label>
<input class="lomake2" type="text" id="Nimi" name="nimi">
<label for="lname"> Sähköposti </label>
<input class="lomake2" type="text" id="Email" name="email">
</form>
<p>
Tässä voi sijaita teksti-muotoista informaatiota.<br>
Sulje-painikkeeseen voi yhdistää lomakkeissa käytettävän Lähetä-toiminnon.
</p>
</div>
<div class="md-card-btns">
<label for="avaa1" class="md-button">Sulje</label>
</div>
</div>
<div>
Seuraavissa esimerkeissä focus-asetuksen käyttämistä. Asetuksen avulla ilmaistaan aktiivinen lomake-kenttä:
Esimerkin (yllä) HTML-koodaus ja CSS-ohjeet:
HTML-koodaus:
<form>
<label for="enimi"> Etunimi </label>
<input class="lomake4" type="text" id="enimi" name="enimi" value="Matti">
<label for="snimi"> Sukunimi </label>
<input class="lomake3" type="text" id="snimi" name="snimi" value=" Meikäläinen ">
</form>
CSS-ohjeet:
input[type=text].lomake4 {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text].lomake4:focus {
border: 3px solid DarkOrange;
}
input[type=text].lomake3 {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}
input[type=text].lomake3:focus {
background-color: RGB(255, 228, 179);
}
Etsi-lomakekenttä ja ikoni esimerkki:
Haku-ikonina eli kuvana voi käyttää valmista ikonia, kuvaa tai animaatiota. Esimerkissä Etsi-sanan edessä käytetään jpg-kuvaa jonka koko on 24px * 24 px:
HTML-koodaus:
<form>
<input class="hakukentta" type="text" name="search" placeholder="Etsi..">
</form>
CSS-ohjeet:
input[type=text].hakukentta {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('hakuikoni.jpg');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
Etsi-lomakekenttä jonka leveys kasvaa aktivoitaessa kenttä ja pienenee kun klikataan www-sivua kentän ulkopuolella:
Suurenevan Etsi-kentän koodaukset:
HTML-koodaus:
<form>
<input class="etsi2"type="text" name="Etsi" placeholder="Etsi..">
</form>
CSS-ohjeet:
input[type=text].etsi2 {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('hakuikoni.jpg');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text].etsi2:focus {
width: 100%;
border: 2px solid blue;
border-radius: 4px;
}
Tekstilomake-kenttä:
Tekstilomake-kentän koodaukset:
HTML-koodaus:
<form>
<textarea class="tekstilomake">Kirjoita viesti...</textarea>
</form>
CSS-ohjeet:
.tekstilomake {
width: 50%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
Responsiivinen lomake joka reagoi laitteen näytön kokoon. Kokeile esimerkin reagointia pienentämällä selaimen kokoa tai mobiililaitteella:
Responsiivisen lomakkeen koodaukset:
HTML-koodaus:
<div class="kokolomake">
<form action="viesti_2k.php">
<div class="kellu">
<div class="leveys-25">
<label class="flomake" for="enimi"> Etunimi </label>
</div>
<div class="leveys-75">
<input class="flomake" type="text" id="enimi" name="etunimi" placeholder="Etunimesi..">
</div>
</div>
<div class="kellu">
<div class="leveys-25">
<label class="flomake" for="snimi"> Sukunimi </label>
</div>
<div class="leveys-75">
<input class="flomake" type="text" id="snimi" name="sukunimi" placeholder="Sukunimesi..">
</div>
</div>
<div class="kellu">
<div class="leveys-25">
<label class="flomake" for="kaupunki"> Kaupunki </label>
</div>
<div class="leveys-75">
<select class="flomake" id="kaupunki" name="kaupunki">
<option value="helsinki"> Helsinki </option>
<option value="oulu"> Oulu </option>
<option value="turku"> Turku </option>
</select>
</div>
</div>
<div class="kellu">
<div class="leveys-25">
<label class="flomake" for="viesti"> Viesti </label>
</div>
<div class="leveys-75">
<textarea class="flomake viestikentta" id="viestisi" name="viesti" placeholder="Kirjoita viesti..">
</textarea>
</div>
</div>
<div class="kellu">
<input class="flomake" type="submit" value="Lähetä">
</div>
</form>
</div>
CSS-ohjeet:
* {
box-sizing: border-box;
}
input[type=text].flomake, select.flomake, textarea.flomake {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label.flomake {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit].flomake {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.kokolomake {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.leveys-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.leveys-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.viestikentta{
height: 200px;
}
/* lopettaa kenttien "kellumisen" */
.kellu:after {
content: "";
display: table;
clear: both;
}
/* Responsivuus - kun näytön leveys pienempi kuin 600px ,
kentien edessä oleva teksti siirtyy kenttiewn yläpuolelle */
@media screen and (max-width: 600px) {
.leveys-25, .leveys-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}