Oletan seuraavaksi, että luot ylimääräisen HTML-tiedoston. Minä ainakin tallennan sen nimellä yhteystiedot.html. yhteystiedot.html-tiedosto sijoittuu samalle tasolle kuin teille jo tuttu index.html-tiedosto.
Tässä ensimmäisessä osassa tehdään perusasetukset lomakkeelle. Pyöristetyt kulmat, väriasteikot jne. seuraavat sitten seuraavassa ohjeessa.
Yhteystiedot.html-tiedostossa luodaan lomake. Lomake määritellään div-luokan content sisällä. Mieti sen jälkeen, mitkä kentät haluat sisällyttää. Päätin kerätä seuraavat tiedot:
• Nimi
• Sähköpostiosoite
• Kommentti
Sinun täytyy totta kai itse päättää, mitä tietoja haluat kerätä. Yleisesti suosittelen kuitenkin keräämään vain tarvittavat tiedot. Useimmat verkkosivujen kävijät nimittäin karttavat kattavia lomakkeita. Pitäkää se siis lyhyenä.
Lomakkeeni perusrakenne näyttää seuraavalta:
<div class="content">
<formclass="form" action="#" method="post">
<fieldset>
<legend>Ota yhteyttä meihin</legend>
<ol>
<li>
<label for="name">Nimi:</label>
<input type="text" name="name"id="name" value="" />
</li>
<li>
<label for="email">Sähköpostiosoite:</label>
<input type="text" name="email" id="email"value="" />
</li>
<li>
<label for="comment">Kommentti:</label>
<textarea cols="32" rows="7"name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit"id="submit" value="Lähetä" />
</li>
</ol>
</fieldset>
</form>
</div>Lomake ei sisällä aluksi mitään erityistä. Lomakekenttien ympärille on sovellettu fieldset-määritys. Kuinka lomakekentät luodaan ja mitä label-elementit tarkoittavat, on jo kuvattu tarpeeksi. Tässä vaiheessa keskitytään lomakkeen ulkoasun suunnitteluun.
Kun tuloksen avaa selaimessa, alkuunsa näkyy vielä melko vähän houkutteleva lomake.
Tässä vaiheessa on luonnollisesti parannettavaa.
Aluksi tehdään perustiedot lomakkeelle.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Tässä määritellään ulko- ja sisävälejä. Lisäksi lomakkeelle asetetaan leveys 550 pikseliä.
Jatketaan fieldset-tyylin määrittelyä.
fieldset {
padding: 10px 20px 25px;
}
Tässäkin määritellään välit.
Itse lomakekentät on asetettu järjestettyyn ol-listaan.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Jotta lista ei näytä visuaalisesti listalta, käytetään list-style-type: none; Lisäksi reunoihin ja sisäväliin asetetaan arvot 0.
Seuraavaksi määritellään listamuokkaukset. Ne kelluvat vasempaan reunaan ja niillä on 10 pikselin sisäväli.
li {
float: left;
padding: 10px;
}
Lopuksi erityispiirteenä on nappi, joka sijoitetaan lomakkeen alapuolelle. Se tulee oikealle.
li.button {
float: none;
clear: both;
text-align: right;
}Lomakkeen otsikko
Keskitytään nyt legend-elementtiin. Sen avulla määritellään lomakkeen otsikko.
Otsikon määrittely näyttää seuraavalta:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Etiketit
Label-elementti on jo tullut teille tässä sarjassa tutuksi. Labelin avulla luodaan looginen yhteys kentän otsikon ja todellisen lomakekentän välille. CSS-määritysten osalta tässä on muuten yksi erikoisuus.
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Varustan label-elementin muun muassa cursor-määrityksellä. Tämä kertoo kävijöille, että kentän otsikot ovat napsautettavissa. Kun todellakin napsauttavat kentän nimeä, kohdistin siirtyy automaattisesti kyseiseen kenttään.
Lomakekenttien muotoilu
Seuraavaksi muotoillaan itse lomakekentät. Ensin tehdään yleisiä määrityksiä inputille ja tekstikentälle.
input, textarea {
color: #3399FF
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Tämä koskee ainoastaan suunnittelullisia asioita. Erityistä huomiota tulee kiinnittää kehyksiin. Heti kun kohdistin asetetaan kenttään, reunan väri muuttuu. Tämä ei ole pelkästään esteettinen näkökohta. Itse asiassa se auttaa myös kävijöitä täyttämään lomakkeen. He näkevät aina heti, missä kentässä kohdistin on juuri nyt.
Nyt seuraa joitain tietoja monirivisestä tekstikentästä.
textarea {
width: 430px;
overflow: auto;
}
Tämän kentän leveys asetetaan 430 pikseliksi. Hieman oudolta saattaa ensisilmäyksellä vaikuttaa ohje overflow: auto monirivisten syöttökenttien yhteydessä. Tämä rivi johtuu vanhemmista Internet Explorerin versioista. Itse asiassa tämä selain näytti aikaisemmin vierityspalkit monirivisissä syöttökentissä, vaikka se ei ollutkaan tarpeen. Overflow: auto auttaa kiertämään tämän ulkonäköongelman.
Muotoile lähetä-painike
Tällä hetkellä lähetä-painike näyttää vielä melko tylsältä. Tämä muuttuu nyt. Tuloksena näyttää tältä:
Painikkeelle annetaan erilaisia ominaisuuksia.
• Taustaväri
• Kirjasintyyli
• Kehys
• Välit
Siinä esiintyvä CSS-merkintä on seuraavanlainen:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Mainittavaa tässä saattaa olla input[type="submit"]. Tämän valitsimen avulla päästään käsiksi niihin input-elementteihin, joilla on attribuutti-arvopari type="submit".
