Lomake
Perinteinen esimerkki lomakkeesta on ns. palautelomake, mutta niitä voidaan käyttää moneen muuhunkin tarkoitukseen. Esim. käyttäjä voi valita sivustolla käytettävän kielen lomakkeen avulla. Myös erilaisia navigointiratkaisuja voidaan tehdä lomakkeiden avulla. Lomakkeen kanssa käytetään usein muita ohjelmointikieliä (esim. php, javascript) lomakkeelle syötetyn tiedon oikeellisuuden tarkistamiseen ja tallentamiseen. Lomake alkaa aina <form> komennolla ja päättyy </form> komentoon.
Form
Form komennon lisäksi annetaan yleensä myös method ja name määritteet sekä usein myös action määrite. Method määrittää tavan jolla lomakkeen tieto lähetetään eteenpäin. Se voi saada arvokseen joko GET tai POST. GET lähettää tiedot URL osoitteen mukana ja on tarkoitettu lähinnä lyhyiden tietojen välitykseen, esim. kieli=fin (jyti.net/index.php?kieli=fin). POST lähettää tiedot HTTP:n yhteydessä ja ei näy suoraan käyttäjälle. Sitä käytetään yleensä pidempien ja esim. tietokantaan tallennettavien tietojen yhteydessä. Name määritteellä annetaan lomakkeelle nimi. Tätä tarvitaan, jos sivulla on useampi lomake tai esim. javascript koodissa halutaan viitata tiettyyn lomakkeeseen. Esim. name=palautelomake. Action määritteellä annetaan sen sivun osoite (URL) joka vastaanottaa tiedot (esim. php kielellä koodattu sivu). Koko komento voisi siis olla esim:
<form action="tallenna_tiedot.php" method="post" name="palautelomake"> Tähän lomakekentät </form>
Lomakekentät (yleisimmät)
Tekstikenttä Nimi antaa kentälle nimen joka viedään esim. tietokantaan syötteen parina "Nimi=Jyrki Timonen". ID on yksilöintitieto esim. javascript-koodia varten. Size on näytettävä koko, maxlenght maksimipituus, joka kenttään voidaan syöttää. Value on oletussyöte, joka näkyy kentässä, se on tarkoitus korvata. |
|
Salasanakenttä Kuten edellä, mutta ei näytä kirjoitettuja merkkejä. |
|
Tekstialue Pidemmän tekstin kirjoitusta varten. Rows määrittää näytettävien rivien määrän, Cols merkkien määrän. Osaa lisätä rivejä automaattisesti ja samalla ikkunaan tulee vierityspalkit. |
|
Päivämääräkenttä Katso Crome-selaimella, esimerkki ominaisuudesta jota kaikki selaimet eivät vielä tue. |
|
Pudotusvalikko Value arvo (esim. FI lähetetään eteenpäin, Suomi näytetään käyttäjälle. Usein näihin lisätään ensimmäiseksi <option value="EI">Valitse kieli</option>, jolloin nähdään onko käyttäjä todella valinnut kielen vai onko oletus jäänyt päälle. Lisämääre multiple (select -komennolle) näyttää koko listan auki ja siitä voidaan valita useampi vaihtoehto Ctrl-pohjassa. |
|
Radiopainikkeet <input type="radio" name="s-puoli" id="s-puoli" value="mies"> Mies<br> Kaikki kentät joilla on sama nimi kuuluvat ryhmään, josta voidaan valita vain yksi vaihtoehto. Value on arvo, joka lähetetään nimi arvon kanssa, esim. s-puoli=mies |
|
Checkbox <input type="checkbox" name="Kieli" id="Kieli" value="ruotsi"> Ruotsi<br> Kuten radiopainikkeet, mutta voidaan valita useampi kuin yksi vaihtoehto. |
|
Tiedoston lisääminen <input type="file" name="tiedosto" id="tiedosto"> Tämän lisäksi pitää <form> -komennon yhteyteen lisätä enctype="multipart/form-data" -määritys. |
|
Lähetyspainikkeet <input type="submit" name="laheta" id="laheta" value="Lähetä"> Submit -painike lähettää lomakkeen, Reset tyyppinen tyhjentää kenttien tiedot. Value määrittää painikkeen tekstin. Nämä kaksi painiketta tässä eivät toimi. |
Yllä olevien lisäksi voidaan lomakkeelle lisätä piilokenttiä. Esim. <input type="hidden" name="sivusto" value="jyti.net"> lisäisi lomakkeelta lähetettäviin tietoihin sivusto=jyti.net -tiedon. Sen lisäksi haluttu tekstikenttä voidaan määrittää readonly -tyyppiseksi. Silloin siinä olevaa tekstiä (value) ei käyttäjä voi vaihtaa tai korvata toisella. HTML5 toi mukanaan paljon lomaketoimintoja, joita kaikki selaimet eivät vielä tue. Yllä on mainittu päivämääräkenttä. Näihin voit tutustua esim. tästä.
Alla vielä toimiva lomake ja sen koodi. Mukana on myös vähän php-koodia, jotta lomakeen lähettämä tieto voidaan esitää.
<form name="palaute" method="post" action="lomake_esim.php"> |
Vastaanottavan php -tiedoston koodi on seuraava (jos kiinnostaa):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lomakkeen palautesivu</title>
</head>
<body>
<h3>Lähetit seuraavat tiedot: </h3>
<p>Ensin piiloviesti: <?php echo $_POST["Viesti"]; ?></p>
Nimeni on <?php echo $_POST["Nimet"]; ?> <br>
Olen sukupuoleltani <?php echo $_POST["Sukupuoli"]; ?> <br>
Äidinkieleni on <?php echo $_POST["Aidinkieli"]; ?><br>
Palautteeni on: <br>
<?php echo $_POST["Palautteeni"]; ?>
</body>
</html>
Tämä koodi ei tee muuta kuin ottaa vastaan tiedot ja tulostaa ne ruudulle, mutta yhtä hyvin se voisi lähettää ne tietokantaan tai sähköpostiin.
