HTML-lomakkeettMyn1 HTML-lomakkeet Web-sovelluksen käyttöliittymä rakentuu web-selaimen ominaisuuksista ja keskeisimmiltä osiltaan erityisesti HTML-kielellä.

Esitys aiheesta: "HTML-lomakkeettMyn1 HTML-lomakkeet Web-sovelluksen käyttöliittymä rakentuu web-selaimen ominaisuuksista ja keskeisimmiltä osiltaan erityisesti HTML-kielellä."— Esityksen transkriptio:

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

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

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

4 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):

5 HTML-lomakkeettMyn5

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

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

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

9 HTML-lomakkeettMyn9 Avataan HTML-tiedosto:

10 HTML-lomakkeettMyn10 Painetaan Lähetä-nappia:

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

12 HTML-lomakkeettMyn12 PHP-skripti:

13 HTML-lomakkeettMyn13 Avataan HTML-tiedosto:

14 HTML-lomakkeettMyn14 Painetaan Lähetä-nappia:

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

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

17 HTML-lomakkeettMyn17 HTML-tiedoston sisältö:

18 HTML-lomakkeettMyn18 PHP-tiedoston sisältö:

19 HTML-lomakkeettMyn19

20 HTML-lomakkeettMyn20

21 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:

22 HTML-lomakkeettMyn22 HTML-tiedoston sisältö:

23 HTML-lomakkeettMyn23 PHP-tiedoston sisältö:

24 HTML-lomakkeettMyn24

25 HTML-lomakkeettMyn25

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

27 HTML-lomakkeettMyn27 Sellaisessa tapauksessa…

28 HTML-lomakkeettMyn28 Kokeillaan seuraavaksi valintanappia (radio button):

29 HTML-lomakkeettMyn29

30 HTML-lomakkeettMyn30

31 HTML-lomakkeettMyn31

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

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

34 HTML-lomakkeettMyn34

35 HTML-lomakkeettMyn35

36 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:

37 HTML-lomakkeettMyn37

38 HTML-lomakkeettMyn38

39 HTML-lomakkeettMyn39

40 HTML-lomakkeettMyn40

41 HTML-lomakkeettMyn41

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

43 HTML-lomakkeettMyn43

44 HTML-lomakkeettMyn44

45 HTML-lomakkeettMyn45

46 HTML-lomakkeettMyn46