Tässä osassa tutkitaan lomakkeen tekemisen salat

Lomakkeen avulla voit olla yhteydessä käyttäjän kanssa. Voit kerätä sen avulla mm. tietoa tai käyttäjä voi lähettää palautetta tai tilata sinulta jotain. Lomake esitetään <form></form> tagilla. Kaikki lomake elementit, kuten tekstikentät, pudotusvalikot ym sijoitetaan aloittavan ja päättävän form-tagin sisään.

<form action="">
<input type="text" name=”etunimi” id=”etunimi”  value="Kirjoita tähän etunimesi" />
</form>

actionin avulla ilmaistaan mitä tulisi tapahtua, kun lomake lähetetään. Saat nämä tiedot palveluntarjoajaltasi, joten jätetään kohta toistaiseksi tyhjäksi ja kirjoitetaan siihen vain lainausmerkkipari. Kohta ei ole enää pakollinen HTML5:ssä. Usein action kohtaan tulee cgi-skriptin osoite, esim:  <form action="http://esimerkki.fi/cgi-bin/mail.cgi">

input type kertoo minkä tyyppinen kenttä on kyseessä. Text on yksirivinen tekstikenttä.

name: Pakollinen kaikille kentille. Määrittelee kentän nimen, jonka avulla verkkosovellus palvelimella tietää miltä elementiltä tieto on peräisin. Tämä ei näy käyttäjälle. Monella kentällä saa olla sama name.

id: kentän ainutlaatuinen (ei kahta samaa id:tä samassa lomakkeessa) tunnus, jota tarvitaan kun esim skriptillä haetaan dataa tästä tietystä kentästä tai halutaan CSS:n avulla muotoilla sen ulkoasua. Usein id ja name ovat käytännössä samat kullakin elementillä.

Voit lisätä selitteen kentälle käyttämällä <label> tagia:

<form action="">
<label>Etunimi:</label>

Kentät ja valikot

Monirivisen tekstikentän saat käyttämällä <textarea> tagia ja määrittämällä kuinka monta riviä (rows) ja kuinka leveä (cols) kentästä tulee.

<textarea id=”tenttivastaus” name=”vastaus” rows=”5” cols=”40”></textarea>

Pudotusvalikko tehdään käyttämällä <select>:ä

<select>
<option value="koira">Koira</option>
<option value="kissa">Kissa</option>
<option value="Marsu">Marsu</option>
</select>

Kokeile myös seuraavaa koodia, jolla ryhmittelet ja otsikoit osat select-listassa:

<select id="artisti" name="muusikko" multiple="multiple">
<optgroup label="Reggae">
<option>Dennis Brown</option>
<option>Bob Marley</option>
</optgroup>
<optgroup label="Blues">
<option>Muddy Waters</option>
<option>Howlin' Wolf</option>
<option>Bessie Smith</option>
</optgroup>


Valintanappi saadaan inputin ”radio” tyypillä. Käytä nappeja kun haluat pakottaa käyttäjän valitsemaan vain yhden vaihtoehdoista. Huomaa myös uusi tagi <br>, sen avulla pakotetaan koodissa rivinvaihto. checked sanalla määrität mikä napeista on valmiiksi valittuna. Aseta kaikille saman ryhmän napeille sama name, mutta muista yksilölliset id:t!

<input type="radio" name="Sukupuoli" id=”m” value="mies" checked> Mies <br>
<input type="radio" name="Sukupuoli" id=”n” value="nainen"> Nainen

Valintaruutu samaisen inputin tyypillä, mutta käytä ”checkbox” arvoa. Käyttäjä voi valita yhden tai useamman vaihtoehdon. name voi olla sama kaikissa, mutta voi olla erikin.

<input type="checkbox" name="rotu1" value="Dobermanni"> Dobberi <br>
<input type="checkbox" name="rotu2" value="Chihuahua"> Chihu

Painikkeet

Lähetä ja Tyhjennä painikkeet ovat tyypillisimmät lomakkeen yhteydessä olevat painikkeet. Ja toimiakseen eli lähettääkseen lomakkeen tiedot, tarvitsee painike sen lomake actionin.

<input type="submit" value="Lähetä"> <input type="reset" value="Tyhjennä">

Painikkeita voi käyttää kaikenlaiseen muuhunkin kivaan, jos koodaa niille tapahtumia. Kokeile vaikka seuraavaa pätkää:

<input type="button" onclick="alert('Soon moro!')" value="Napsauta!">

HTML5 uudet syötetyypit

HTML5:n mukana tuli liuta uusia input-tyyppejä kuten:

Aikaan liittyvät, osassa on toteutettuna kalenterityyppinen komponentti

<p><input type="date"></p><p><input type="time"></p>
<p><input type="datetime"></p><p><input type="datetime-local></p>
<p><input type="month"></p><p><input type="week"></p>

Komponentti värin, verkko-osoitteen, sähköpostiosoitteen ja puhelinnumeron vastaanottamiseen

<p><input type="color"></p> <p><input type="email"></p>
<p><input type="tel"></p> Tämän kanssa joutunee leikkimään pattern-attribuutilla, sillä muotoilu: 123-1234
<p><input type="url"></p>

Luvun syöttäminen/valinta tietyltä väliltä ja kenttä haun tekoon hakukoneelle.

<p><input type="number"></p> <p><input type="range"></p>
<p><input type="search"></p> Ei automaattisesti tee hakua, vaan joudut vielä ohjelmoimaan toiminnon.

Katso W3Schoolin sivulta esimerkkejä.

Fieldset ja legend

Jotta lomakkeen ulkoasun muotoilu CSS:n avulla olisi kätevämpää, kannattaa myös opetella käyttämään <fieldset> ja <legend> tageja ryhmittelyyn.

<fieldset>
<legend>Perustiedot</legend>
<label for="nimi">Nimi:</label>
<input id="nimi" type="text" name="koiran_Nimi" value="Koiran nimi" />
<label for="rotu">Rotu:</label>
<input id="rotu" type="text" name="rotu" />
</fieldset>