HTML-lomakkeettMyn1 HTML-lomakkeet Web-sovelluksen käyttöliittymä rakentuu web-selaimen ominaisuuksista ja keskeisimmiltä osiltaan erityisesti HTML-kielellä määritellyistä lomakkeista. HTML-lomakkeiden rooli on merkittävä. Loppukäyttäjä käyttää web-sovellusta web-selaimen ja yleensä erityisesti sen HTML-lomakkeiden kautta. HTML-lomake on web-sivulla oleva alue, jonka avulla käyttäjä voi esim. syöttää tietoja lähettääkseen ne web- selaimen avulla web-palvelimelle ja sitä kautta sovelluksen käsiteltäväksi.

HTML-lomakkeettMyn2 Lomakkeita voidaan käyttää tiettyihin tarkoituksiin myös ilman palvelinpuolen ohjelmia – tämä ei kuitenkaan ole tyypillistä. Form-elementti rajoittaa lomakealueen, joka voi sisältää input-, select- ja textarea-elementtejä datan syöttämiseen. Syöttötapaa voidaan hieman muunnella elementtien määritteillä (tarvittaessa kertaa luku HTML-perusteet). Syöttämiseen tarkoitettuja elementtejä nimitetään myös lomakkeen kentiksi.

HTML-lomakkeettMyn3 Lomakkeen rakenne on aina seuraavan tyyppinen: Normaalia tekstiä

HTML-lomakkeettMyn4 Ensimmäisessä esimerkissä HTML-lomakkeella kysytään nimeä ja osoitetta. PHP-ohjelmassa sitten kaiutetaan nuo tiedot näytölle. Tähän tarvitaan siis vain rivinsyöttökenttä (a single-line text input field). Koskapa esimerkki on tehty omassa työkoneessa – johon on asennettu Apache-palvelin – niin sekä HTML- tiedosto että PHP-tiedosto on asennettu samaan palvelimen hakemistoon, ja HTML-tiedosto siis avataan localhost-hakemistosta. HTML-lomake voisi näyttää tältä (get-metodi):

HTML-lomakkeettMyn5

HTML-lomakkeettMyn6 PHP-tiedosto näyttää tältä:

HTML-lomakkeettMyn7 Description bool isset ( mixed $var [, mixed $var [, $... ]] )mixed Determine whether a variable is set. If a variable has been unset with unset(), it will no longer be set. isset()unset() will return FALSE if testing a variable that has been set to NULL. Also note that a NULL byte ("\0") is not equivalent to the PHP NULL constant. If multiple parameters are supplied then isset() will return TRUE only if all of the parameters are set. Evaluation goes from left to right and stops as soon as an unset variable is encountered.

HTML-lomakkeettMyn8 Tässä siis PHP edustaa ns. upotettua tekniikkaa. Upotettu tekniikka tarkoittaa tekniikkaa, joka oletusarvoisesti tulkitsee HTML-dokumentin sisään upotetun ohjelmakoodin web-palvelimella. Siis tässä tapauksessa Apache-palvelimella. Edellä mainitusta syystä tiedoston tulee siis olla palvelimen hakemistossa, tässä tapauksessa htdocs- hakemistossa.

HTML-lomakkeettMyn9 Avataan HTML-tiedosto:

HTML-lomakkeettMyn10 Painetaan Lähetä-nappia:

HTML-lomakkeettMyn11 Entäs jos käytetään POST-metodia, HTML-lomake:

HTML-lomakkeettMyn12 PHP-skripti:

HTML-lomakkeettMyn13 Avataan HTML-tiedosto:

HTML-lomakkeettMyn14 Painetaan Lähetä-nappia:

HTML-lomakkeettMyn15 Siis get-metodilla lomakkeen data liitetään URLiin jatkoksi. Tällöin lomakkeen tiedot näkyvät URLissa. Tällöin URLin muoto oli äskeisessä tapauksessa tulostaTiedot.php?nimi1=arvo1&nimi2=arvo2… post-metodilla lomakkeen sisältö lähetetään HTTP- pyynnössä erillisessä data-alueessa.

HTML-lomakkeettMyn16 Toisena esimerkkinä lomakkeella on elementtinä valikkokenttä (Drop-Down Menu). Kokeillaan ensimmäiseksi sellaista valikkokenttää, josta voi valita vain yhden vaihtoehdon:

HTML-lomakkeettMyn17 HTML-tiedoston sisältö:

HTML-lomakkeettMyn18 PHP-tiedoston sisältö:

HTML-lomakkeettMyn19

HTML-lomakkeettMyn20

HTML-lomakkeettMyn21 Entä jos valikkokentässä olisi mahdollisuus tehdä useampi valinta (eli multiple-määrite olisi mukana)? Tilanne voidaan hoitaa siten, että lomakkeella valikkokenttä nimetään niin, että se kuvaa PHP- ohjelmassa taulukkomuuttujaa:

HTML-lomakkeettMyn22 HTML-tiedoston sisältö:

HTML-lomakkeettMyn23 PHP-tiedoston sisältö:

HTML-lomakkeettMyn24

HTML-lomakkeettMyn25

HTML-lomakkeettMyn26 Jos mitään valintoja ei tehdä, niin…

HTML-lomakkeettMyn27 Sellaisessa tapauksessa…

HTML-lomakkeettMyn28 Kokeillaan seuraavaksi valintanappia (radio button):

HTML-lomakkeettMyn29

HTML-lomakkeettMyn30

HTML-lomakkeettMyn31

HTML-lomakkeettMyn32 Tai sitten vähän lisää havainnollisuutta buttoneihin:

HTML-lomakkeettMyn33 Tämä ei muutu mitenkään.

HTML-lomakkeettMyn34

HTML-lomakkeettMyn35

HTML-lomakkeettMyn36 Kun käytetään asetusnappeja (checkbox), niin silloin lomakkeen tietojen käsittelijälle lähetetään kaikki valittujen asetusnappien nimi-arvo (name-value) –parit:

HTML-lomakkeettMyn37

HTML-lomakkeettMyn38

HTML-lomakkeettMyn39

HTML-lomakkeettMyn40

HTML-lomakkeettMyn41

HTML-lomakkeettMyn42 Tehdään esimerkki tekstialueesta (textarea):

HTML-lomakkeettMyn43

HTML-lomakkeettMyn44

HTML-lomakkeettMyn45

HTML-lomakkeettMyn46