HTML5 ja CSS3 osa 5: Lomake

Kuvitus
Medibang Paint sivellin uudistuksia
2015/12/21
tuts_gif
Tuts+ suomennos: GIF-animaatiosta makro
2016/01/12
Näytä kaikki

HTML5 ja CSS3 osa 5: Lomake

html css

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>

tekstikenttä

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>

label tekstikentälle

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>

pudotusvalikko

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>

ryhmälista

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

valintanappi

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

ruudut

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.

input html5

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>

fieldset

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Spam Blocking by WP-SpamShield

This site uses Akismet to reduce spam. Learn how your comment data is processed.