Kirjautuminen

Haku

Tehtävät

Oppaat: PHP-ohjelmointi: Osa 6 - Lomakkeet

  1. Osa 1 - Johdanto
  2. Osa 2 - Muuttujat
  3. Osa 3 - if-rakenne
  4. Osa 4 - for-silmukka
  5. Osa 5 - Taulukot
  6. Osa 6 - Lomakkeet
  7. Osa 7 - Nettisivusto
  8. Osa 8 - Lisää silmukoista
  9. Osa 9 - Tiedostot
  10. Osa 10 - Omat funktiot
  11. Osa 11 - Istunnot
  12. Osa 12 - Tietokannat
  13. Osa 13 - Tietoturva
  14. Osa 14 - Olio-ohjelmointi
  15. Osa 15 - Kuvien luonti
  16. Osa 16 - Säännölliset lausekkeet
  17. Osa 17 - Merkistöt
  18. Osa 18 - PHP:n ongelmat

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.

Lomake

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ä.

Lähetystapa "get"

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.

Lähetystapa "post"

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.

Tekstikenttä

Yksirivinen tekstikenttä määritellään seuraavasti:

Mikä on nimesi?
<input type="text" name="nimi">
Mikä on nimesi?

Tekstikentälle voi antaa alkusisällön attribuutilla value:

Mikä on nimesi?
<input type="text" name="nimi" value="Uolevi">
Mikä on nimesi?

Lisäksi tekstikentän kokoa voi rajoittaa attribuutilla size:

Syntymävuosi:
<input type="text" name="nimi" size="4">
Syntymävuosi:

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">
Salasana:

Tekstialue

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ö.

Valintanappi

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>
Kieli:
suomi
ruotsi
englanti

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

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>
Viikonpäivä:

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ä.";
}
?>

Valintaruutu

Valintaruudun avulla voi toteuttaa kyllä/ei-valinnan:

<input type="checkbox" name="vahvistus">
Haluan vahvistuksen sähköpostiin.
Haluan vahvistuksen sähköpostiin.

Attribuutilla checked ruudun saa valmiiksi valituksi:

<input type="checkbox" name="vahvistus" checked>
Haluan vahvistuksen sähköpostiin.
Haluan vahvistuksen sähköpostiin.

Valintaruudun valinnan voi tarkistaa PHP:ssä seuraavasti:

<?php
if (isset($_POST["vahvistus"])) {
    // sähköpostin lähetys
}
?>

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>
Valitse tuotteet
kaali
nauris
retiisi
selleri

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ä

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:

<?php
$tunnus = $_POST["tunnus"];
if ($tunnus == 123) {
    echo "Kaikki kunnossa!";
}
?>

Piilokenttä saattaa vaikuttaa tällä hetkellä melko turhalta, mutta käytännössä siitä on usein paljon hyötyä.


Kommentit

latenleffahylly [25.04.2012 20:33:40]

#

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ä

skydda [03.05.2012 19:39:20]

#

Eiköhän ne ole vanhoja merkintöjä, mutta ne ovat mukana html5 standardissa?

HTML5 [26.07.2013 23:52:41]

#

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.

riksu [16.10.2015 12:51:21]

#

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?

Metabolix [16.10.2015 15:18:36]

#

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ä.

krokotiili-nimeltä-682 [01.01.2021 19:33:16]

#

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.

Kirjoita kommentti

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.

Muista lukea kirjoitusohjeet.
Tietoa sivustosta