Lomakekentät

  • input type=”text” Yksirivinen tekstisyöttökenttävapaasti tekstiä yhdelle
  • textarea Tekstikenttä useammalle riville
  • input type=”password” Salasanakenttä syötettyjen merkkien paikalla näytetään tähtimerkki (*).
  • input type=”checkbox”Valintaruutuja joita voidaan valita päälle tai pois päältä. Valintaruutuja voidaan valita useampia samasta ryhmästä
  • input type=”radio” Ympyrän muotoinen valintanappi, joka voidaan valita päälle. Valintanappeja voidaan valita ainoastaan yksi samasta ryhmästä
  • input type=submit””Lähetyspainnike, jonka avulla kyseisen lomakkeen tiedot lähetetään
  • input type=”reset”Tyhjennyspainike, jolla lomakkeen tiedot saadaan tyhjennettyä tai palautettua oletusarvoille
  • input type=”hidden” Piilokenttä, jolla lomakkeella voidaan viedä tietoja siten, että käyttäjä ei näe niitä selainikkunassa. Tiedot ovat kuitenkin näkyvissä lomakkeen lähdekoodissa, joten elementtiä ei kannata käyttää arkaluontoisten tietojen lähettämiseen
  • select on alasveto/pudotus-valikko, jolla voidaan toteuttaa erilaisia valintoja lomakkeelle.

Kentän otsikko – label

label-elementti toimii lomake-elementtien otsikkona.
Lomakkeen käytettävyyden vuoksi otsikko täytyy sijoittaa ennen varsinaista lomake-elementtiä.

<p><label
for="email">Email: </label> 
<input
id=”email” type="text" name="email"
value="Sahköpostiosoite"
/>
</p>

Mukaan täytyy laittaa scripti, jolla lomake saadaan toimimaan! Etsi se jostain…

Tarkempia ohjeita lomakkeen tekemiseen:

http://users.metropolia.fi/~kuivi/bfish/lomakkeet.php

http://www.mvnet.fi/index.php?osio=Kotisivun_teko&sivu=JavaScript-ohjelmointi

http://appro.mit.jyu.fi/doc/forms/index2.html

http://jkorpela.fi/webjulk/2.4.html

http://www.saunalahti.fi/kiveern/html/lomakkeet.html

https://www.annukka.info/html5-ja-css3-osa-5/

Esimerkkilomakekoodi: (Muuta XXXX-kohtaan omasi)

<body>

<form action="http://XXXX/cgi-bin/echo.cgi">

<input type="reset" class="nappi" value="Tyhjennä lomake">

<p><em>Lomakkeisiin ei kannata laittaa tyhjennysnappia, mutta testausvaiheessa niistä voi olla iloa.</em></p>

<p>Lempinimesi:<br>
<input name="lempinimi" type="text" class="levea" autofocus></p>

<p>Oikea nimesi: <span class="pakollinen">*</span><br>
<input name="oikea nimi" type="text" class="levea" required></p>

<p>Sähköpostiosoite:<br>
<input name="sahkoposti" type="email" class="levea"></p>

<p>Puhelinnumero, johon saa soittaa kolmelta aamuyöllä:<br>
<input name="puhelinnumero" type="tel" class="levea"></p>

<p>Minkä tahansa nettisivun osoite:<br>
<input name="nettisivun osoite" type="url" class="levea" placeholder="http://"></p>

<p>Parhaan biisin paras kohta:<br>
<textarea name="biisin kohta" rows="5" class="levea"></textarea></p>

<p>Mistä eläimistä tykkäät?<br>
<label><input type="checkbox" name="elain" value="koira"> Koira</label><br>
<label><input type="checkbox" name="elain" value="kissa"> Kissa</label><br>
<label><input type="checkbox" name="elain" value="hevonen"> Hevonen</label><br>
<label><input type="checkbox" name="elain" value="pupu"> Pupu</label><br>
<label><input type="checkbox" name="elain" value="hirvi"> Hirvi</label><br>
<label><input type="checkbox" name="elain" value="lintu"> Lintu</label><br>
<label><input type="checkbox" name="elain" value="mato"> Mato</label><br>
</p>

<p>Lempieläin:<br>
<label><input type="radio" name="lempielain" value="koira"> Koira</label><br>
<label><input type="radio" name="lempielain" value="kissa"> Kissa</label><br>
<label><input type="radio" name="lempielain" value="hevonen"> Hevonen</label><br>
<label><input type="radio" name="lempielain" value="pupu"> Pupu</label><br>
<label><input type="radio" name="lempielain" value="hirvi"> Hirvi</label><br>
<label><input type="radio" name="lempielain" value="lintu"> Lintu</label><br>
<label><input type="radio" name="lempielain" value="mato"> Mato</label><br>
<label><input type="radio" name="lempielain" value="ei valittu" checked> En osaa sanoa</label><br>
</p>

<p>Mikä fiilis?
<select name="fiilis">

<option value="valitse">Valitse...</option>
<option value="vasynyt">Väsynyt</option>
<option value="iloinen">Iloinen</option>
<option value="tehokas">Tehokas</option>
<option value="surullinen">Surullinen</option>
<option value="vihainen">Vihainen</option>
<option value="levoton">Levoton</option>
<option value="arsyyntynyt">Ärsyyntynyt</option>

</select>
</p>

<p>Syntymäpäiväsi:<br>
<input type="date" name="syntymapaiva"></p>

<p>Lempivärisi:<br>
<input type="color" name="lempivari"></p>

<p>Ihanteellinen lämpötila joulukuussa:<br>
<input type="number" name="lampotila joulukuussa" class="numero"></p>

<p>Kuinka paljon rakastat koiria?</p>
<input type="range" name="koirat" id="liukusaadin">
<table id="liukusaadinselitykset">
<tr>
<td>paljon</td>
<td class="keskitetty">todella paljon</td>
<td class="oikealla">äärettömästi</td>
</tr>
</table>

<input type="submit" class="nappi" value="Lähetä lomakkeen tiedot">

</form>

</body>

Liukusäädin ja sen alla olevat selitystekstit:

  • inputille id, ja se määrätään 100% leveäksi
  • tablelle joku toinen id, ja senkin leveydeksi 100%
  • liukusäätimeltä oletusarvoiset marginaalit nollaksi
  • tämän tietyn taulukon solujen leveydeksi 33.3%
  • keskimmäiselle solulle class ”keskitetty”, ja css:llä tasaus keskelle
  • kolmannelle solulle class ”oikealla”, ja css:llä tasaus oikealle
  • liukusäädinselityksille (se taulukko) alamarginaaliksi 1em

Tuola ylempänä olevan lomakkeen CSS:

@charset "utf-8";
body {
	font-family: arial,sans-serif;
	background-color: #6F9A86;
}
form {
	background-color: #FFFFFF;
	max-width: 400px;
	padding-top: 46px;
	padding-right: 46px;
	padding-bottom: 46px;
	padding-left: 46px;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-shadow: 0 0px 146px #536F62;
	box-shadow: 0 0px 146px #536F62;
}
.pakollinen {
	color: #FF0004;
}
select  {
	font-size: 100%;
}


.levea {
	width: 100%;
	padding: 0.3em 0.5em;
	font-size: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.numero {
	font-size: 2em;
	width: 2.2em;
	text-align: right;
}
.nappi {
	font-size: 20px;
	font-family: arial,sans-serif;
	font-weight: bold;
	width: 100%;
	color: #FFFFFF;
	background-color: #6F9A86;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-style: none;
	white-space: normal;
}
#liukusaadinselitykset {
	width: 100%;
	margin-bottom: 1em;
}
#liukusaadin {
	width: 100%;
	margin-top: 0px;
}
#liukusaadinselitykset td {
	width: 33.3%;
}
.oikealla {
	text-align: right;
}
.keskitetty {
	text-align: center;
}

Lomakkeen lisämuotoilua

(Kokeilen kun ehdin)

  • Vähintään yhteen kohtaan vastaamisen on oltava pakollista (required).
  • Vähintään yhdessä kohdassa on oltava esimerkkisisältöä (placeholder).
  • Aseta kursori vilkkumaan valmiiksi ensimmäiseen kenttään (autofocus).
  • ”Valitse yksi monista” -kysymyksessä on oltava yksi vastausvaihtoehto etukäteen valittuna (checked), kuten esim ”En osaa tai halua sanoa”.
  • Lomakkeelle eri taustaväri kuin koko sivulle.
  • Lomakkeelle maksimileveys.
  • Tekstinsyöttökenttien leveys niin leveäksi kuin mahdollista (mutta niin että niiden ja lomakkeen reunan väliin jää hieman tyhjää tilaa).
  • Lähetys- ja tyhjennysnapeille värit, fontti ja tyhjää tilaa tekstin ympärille.
  • Liukusäätimen alle jotain ääripäihin ja keskelle, ja liukusäädin ylettymään yhtä pitkälle reunoille kuin muukin lomakkeen sisältö.