Kirjoittaja: Antti Laaksonen (2011).
Lomakkeen avulla käyttäjä voi lähettää HTML-sivulta tietoa PHP-koodille. Olemme käyttäneet lomakkeita jo monissa esimerkeissä opassarjan kuluessa, mutta nyt on aika tutustua niihin perusteellisemmin.
Lomakkeen elementtejä ovat tekstikentät ja erilaiset valintaelementit. Jokaisella lomakkeen elementillä on nimi, ja elementin arvoksi tulee käyttäjän syöttämä tieto. PHP:ssä lomakkeen elementtien arvot ovat saatavilla taulukosta $_POST
tai $_GET
riippuen lomakkeen lähetystavasta.
Lomakkeen runko HTML-sivulla on seuraava:
<form action="..." method="..."> ... </form>
Lomakkeen attribuutti action
kertoo, minne lomakkeen tiedot lähetetään. PHP:tä käytettäessä tähän kohtaan tulee käytännössä sen PHP-tiedoston nimi, joka käsittelee lomakkeen tiedot.
Lomakkeen attribuutti method
on lomakkeen lähetystapa, käytännössä "get" tai "post". Jos lähetystapa on "get", lomakkeen tiedot välitetään käsittelysivun osoitteen mukana. Jos taas lähetystapa on "post", lomakkeen tiedot välitetään sivupyynnön mukana käyttäjältä näkymättömissä.
Seuraavan lomakkeen lähetystapa on "get":
<form action="kasittely.php" method="get"> Etunimi: <input type="text" name="etunimi"> <br> Sukunimi: <input type="text" name="sukunimi"> <br> <input type="submit" value="Lähetä"> </form>
Kun käyttäjä antaa etunimeksi "Aapeli" ja sukunimeksi "Koodinen", lomake ohjaa seuraavalle sivulle:
kasittely.php?etunimi=Aapeli&sukunimi=Koodinen
PHP:ssä lomakkeen tiedot ovat saatavilla taulukossa $_GET
:
<?php $etunimi = $_GET["etunimi"]; $sukunimi = $_GET["sukunimi"]; ?>
Perusperiaate on, että jos lähetystapa on "get", lomakkeen kautta voi vain hakea tietoa sivustolta eikä lomake saa aiheuttaa muutoksia sivuston tietosisältöön. Lisäksi lomakkeen kautta lähetettävän tiedon määrä täytyy olla käytännössä pieni, jotta se mahtuu luontevasti sivun osoitteen jatkoksi.
Seuraavan lomakkeen lähetystapa on "post":
<form action="kasittely.php" method="post"> Etunimi: <input type="text" name="etunimi"> <br> Sukunimi: <input type="text" name="sukunimi"> <br> <input type="submit" value="Lähetä"> </form>
PHP:ssä lomakkeen tiedot ovat saatavilla taulukossa $_POST
:
<?php $etunimi = $_POST["etunimi"]; $sukunimi = $_POST["sukunimi"]; ?>
Lähetystapa "post" mahdollistaa suurenkin tietomäärän lähettämisen lomakkeen kautta, koska tiedot kulkevat käsittelysivulle sivupyynnön mukana eivätkä ne ole näkyvissä sivun osoitteessa.
Yksirivinen tekstikenttä määritellään seuraavasti:
Mikä on nimesi? <input type="text" name="nimi">
Tekstikentälle voi antaa alkusisällön attribuutilla value
:
Mikä on nimesi? <input type="text" name="nimi" value="Uolevi">
Lisäksi tekstikentän kokoa voi rajoittaa attribuutilla size
:
Syntymävuosi: <input type="text" name="nimi" size="4">
Tekstikentän sukulainen on salasanakenttä, joka toimii muuten samalla tavalla kuin tekstikenttä, mutta kenttään kirjoitettu sisältö ei näy selaimessa.
Salasana: <input type="password" name="nimi">
Monirivinen tekstialue määritellään seuraavasti:
<textarea name="teksti" rows="4" cols="30"> </textarea>
Tässä attribuutit rows
ja cols
määrittävät tekstialueen rivien ja sarakkeiden määrän.
Tekstialueen alkusisältö kirjoitetaan sen sisälle:
<textarea name="teksti" rows="4" cols="30"> apina banaani cembalo </textarea>
Tekstialueen sisältö käsitellään PHP:ssä samaan tapaan kuin tekstikentän sisältö.
Valintanapeilla voi toteuttaa valinnan useamman vaihtoehdon väliltä:
Kieli: <br> <input type="radio" name="kieli" value="fi" checked> suomi <br> <input type="radio" name="kieli" value="sv"> ruotsi <br> <input type="radio" name="kieli" value="en"> englanti <br>
Kaikille samaan ryhmään kuuluville valintanapeille annetaan sama nimi. Tällöin selain varmistaa, että vain yksi napeista on valittuna kerrallaan, ja lähettää valitun napin value
-attribuutin PHP:lle. Attribuutti checked
määrittää oletusvalinnan.
Yllä olevan lomakkeen voisi käsitellä seuraavasti:
<?php $kieli = $_POST["kieli"]; if ($kieli == "fi") { echo "Tervetuloa!"; } if ($kieli == "sv") { echo "Välkommen!"; } if ($kieli == "en") { echo "Welcome!"; } ?>
Valintalista on toinen tapa toteuttaa valinta useamman vaihtoehdon väliltä:
Viikonpäivä: <select name="paiva"> <option value="ma"> maanantai <option value="ti"> tiistai <option value="ke"> keskiviikko <option value="to"> torstai <option value="pe" selected> perjantai <option value="la"> lauantai <option value="su"> sunnuntai </select>
Selain lähettää valitun vaihtoehdon value
-attribuutin PHP:lle. Attribuutti selected
määrittää oletusvalinnan.
Yllä olevan lomakkeen voisi käsitellä seuraavasti:
<?php $paiva = $_POST["paiva"]; if ($paiva == "la" || $paiva == "su") { echo "Nyt on viikonloppu."; } else { echo "Nyt on arkipäivä."; } ?>
Valintaruudun avulla voi toteuttaa kyllä/ei-valinnan:
<input type="checkbox" name="vahvistus"> Haluan vahvistuksen sähköpostiin.
Attribuutilla checked
ruudun saa valmiiksi valituksi:
<input type="checkbox" name="vahvistus" checked> Haluan vahvistuksen sähköpostiin.
Valintaruudun valinnan voi tarkistaa PHP:ssä seuraavasti:
Jos ryhmä valintaruutuja liittyy samaan asiaan, ne voi koota taulukkoon antamalla niille saman nimen, jonka lopussa ovat merkit []
:
Valitse tuotteet <br> <input type="checkbox" name="lista[]" value="kaali"> kaali <br> <input type="checkbox" name="lista[]" value="nauris"> nauris <br> <input type="checkbox" name="lista[]" value="retiisi"> retiisi <br> <input type="checkbox" name="lista[]" value="selleri"> selleri <br>
Nyt lomakkeen voi käsitellä seuraavasti PHP:ssä:
if (empty($_POST["lista"])) { echo "Et valinnut mitään tuotetta!"; } else { $lista = $_POST["lista"]; echo "<p>Valitsit seuraavat tuotteet:</p>"; echo "<ul>"; foreach ($lista as $tuote) { echo "<li>{$tuote}"; } echo "</ul>"; }
Piilokenttä on lomakkeen osana oleva kenttä, jolle on annettu valmis arvo. Piilokenttä ei näy lomakkeen käyttäjälle, ellei hän katso sivun HTML-koodia.
Seuraavassa koodissa piilokentän tunnus arvo on 123:
<input type="hidden" name="tunnus" value="123">
Lomakkeen voisi käsitellä seuraavasti:
Piilokenttä saattaa vaikuttaa tällä hetkellä melko turhalta, mutta käytännössä siitä on usein paljon hyötyä.
Hei, oppaassa on merkintöjä, kuten checked ja <br> eivätkö nämä ole vanhoja merkintöjä?
Muuten aivan mahtavaa jälkeä, luen tätä iPadilla ja koodaan esimerkit PC:llä
Eiköhän ne ole vanhoja merkintöjä, mutta ne ovat mukana html5 standardissa?
latenleffahylly kirjoitti:
Hei, oppaassa on merkintöjä, kuten checked ja <br> eivätkö nämä ole vanhoja merkintöjä?
Muuten aivan mahtavaa jälkeä, luen tätä iPadilla ja koodaan esimerkit PC:llä
Kyllähän ne vanhoja siinä mielessä ovat, että ovat olleet HTML:ssä jo kauan.
Ne eivät kuitenkaan ole vanhentuneita (mitä tarkoittanet kommentissasi), joten niitä voi käyttää aivan yhtä hyvin kuin vaikkapa muita tämällä sivulla olevia tageja ja attribuutteja.
latenleffahylly kirjoitti:
Hei, oppaassa on merkintöjä, kuten checked ja <br> eivätkö nämä ole vanhoja merkintöjä?
HTML5 kirjoitti:
Kyllähän ne vanhoja siinä mielessä ovat, että ovat olleet HTML:ssä jo kauan.
Onko checked ja <br> tilalla mahdollisesti uusia attribuuttien vaihtoehtoja?
riksu kirjoitti:
Onko checked ja <br> tilalla mahdollisesti uusia attribuuttien vaihtoehtoja?
Kummallekaan näistä ei ole ”uusia vaihtoehtoja”. Ainakin checked on täysin ajankohtainen ja oikea attribuutti esitettyyn käyttötarkoitukseen. Myös br-tagi on oikea tagi rivinvaihdon luomiseen – jos tarkoituksena on nimenomaan luoda yksi rivinvaihto. Jos taas on tarkoitus vain vaikuttaa sivun ulkoasuun, esimerkiksi tehdä sivulle tyhjä rako tai asetella elementtejä allekkain, kannattaa miettiä, voisiko ongelman ratkaista paremmin CSS-tyyleillä.
input-tägissä voi käyttää min- ja maxlength-attribuutteja, mikä rajoittaa tekstikappaleen minimi- ja maksimikokoa.
<input type="text" minlength="4" maxlength="4" name="syntymavuosi">
Kukaan ei varmaankaan ole syntynyt kolme-tai viisilukuisena vuotena.
Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.