Lomake, input-elementti

Lomakkeisiin kerättävä tieto sekä toiminnallisuus toteutetaan input-elementein, niiden määrittelyjen sekä niihin kohdistettujen toimintojen avulla.

 <form>
   Lomakkeen sisältö input- elementein sekä 
   erilaisin atribuutein ja määrittein toteutettuna. 
 </form>
  

Input-elementin atribuutit ja määritteet (HTML5 erikseen mainittuna):

Seuraavaksi tarkemmin input-elementistä.

Teksti-kenttä, type="text", type="email" ja name="teksti"

Lomakkeeseen kentät joihin lomakkeen täyttäjältä pyydetään tekstiä luodaan input-elementissä type-atribuutin text-määritteellä.

Sähköposti-osoite voidaan pyytää omaan kenttäänsä asettamalla type-atribuutille email-määrite.

Palvelimella oleva ns lomakkeenkäsittelijä eli ohjelma tunnistaa name-atribuuttiin kirjoitetusta teksti-määritteestä mistä kentästä on kyse sekä "lukee" mitä kenttään oli kirjoitettu käsittelyä varten.

 <form>
    Etunimi <input type="text" name="etunimi"> 
    Sukunimi <input type="text" name="sukunimi"> 
    email <input type="email" name="tilaaja_email">  
 </form>
  

Yllä. 
  - Lomake-kentät etu- ja sukunimeä varten. 
  - Atribuutissa type määritteenä on text, jolloin lomakkeen käyttäjän oletetaan kirjoittavan tekstiä kentään. 
  - Atribuutin name-atribuutin määritteeksi kirjoitettava teksti on vapaasti sivuntekijän valittavissa. 
  - Määritteeksi kannattaa valita teksti joka kuvaa asiaa joka kentään kirjoitettavaa asiaa, 
    esimerkissä "etunimi" ja "sukunimi".
  

Teksti-kenttä, type="password" ja type="number"

Salasana syötetään omaan teksti-kenttäänsä, tällöin kentän type-atribuutin määritteenä on password ja name-määritteeksi kirjoitetaan asiaa kuvaava termi.

Tunnusluku voidaan asettaa type:lle määritellä number (HTML5). Huomaa, jos tunnusluku on nelinumeroinen on asetettava max- määritteelle arvoksi 9999 !

 <form>
    <input type="number" name="t_luku" min="1" max="9999"> Tunnusluku 	  
    <input type="password" name="s_sana"> Salasana  
 </form>
  

Yllä. 
  - Lomake-kentät tunnuslukua ja salasanaa varten. 
  - Atribuutissa type määritteenä on number, lomakkeen käyttäjän kirjoittaa (tai valitsee) kenttään numeron. 
  - Atribuutin name-atribuutin määritteenä t_luku jonka avulla tunnusluku lähetetään 
    esim. PHP-ohjelmaan annettu luku. 
  - Atribuuteissa min ja max määritellään tunnusluvulle raja-arvot.
  - Atribuuteissa type määritellä password määritellään kentäntyypiksi salasana ja 
    atribuutissa name salasanalle tunniste jolla annettu tieto lähetetään esim PHP-ohjelmaan.
  

Painikkeet

Painikkeita käytetään lomakkeiden tapahtumien ohjaamiseen palvelimelle ns lomakekäsittelijälle.
Painikkeiden tyypit (type) ovat seuraavat:

• Kuva, esim img, png kuvatietosto - type="image"
• Painike, muotoiltavissa CSS-ohjeella - type="button"
• Painike, Lähetä (muotoilut CSS) - type="submit"
• Painike, Tyhjennä (muotoilut CSS) - type="reset"

Kuva painikkeena

Kuvaa voidaan käytettää painikkeena esimerkiksi lomakkeen lähettämiseksi palvelimelle ns lomakekäsittelijälle. Esimerkissä lomake-kenttien alla on kuva joka toimii painikkeena.
Atribuuttien kuvaan liittyvät määrittelyt:

• input-tyypiksi määritellään kuva - type="image"
• käytettävän kuvan nimi ja talletuspaikka - src="gonow.png"
• kuvan leveys pikseleinä - width="100"
• (kuvan koko,voi olla leveys ja korkeus, mutta riittää vain toinenkin)

 <form>
   Etunimi:   <input type="text" name="enimi"><br> 	 	  
   Sukunimi:  <input type="text" name="snimi"><br>
   <input type="image" src="gonow.png" alt="Startti" width="100">   
 </form>
  

Painikkeen teksti

Esimerkissä input-elementin type-atribuutin button-määriteellä luodaan painike value-atribuutille määriteeksi Lähetä nimi -teksti.

 <form action="mailto:sahvoposti.osoite@gmail.com"enctype=text/plain">
   Etunimi:   <input type="text" name="enimi"><br> 	 	  
   Sukunimi:  <input type="text" name="snimi"><br>
   <input type="button" value="Lähetä nimi" onclick="msg()">   
 </form>
  

Lomakekentän tyhjentäminen, "nollaus"

Haluttaessa nollata eli tyhjentää lomakekenttiä käytetään reset-määritettä. Esimerkissä on lisäksi Lähetä-painike toteutettuna submitinput -määritteellä. Jos submit-atribuuttia teksteineen ei ole, painikkeessa näkyy oletus-teksti esim. Submit Query.

Esimerkin action-osassa kerrotaan mille ohjelmalle tiedot lähetetään.

 <form action="joku_ohjelma.asp">
    Tunnusluku: <input type="text" name="pin" maxlength="4"><br>
    Salasana: <input type="text" name="email"><br><br>
    <input type="reset" value="Tyhjennä">
    <input type="submit" value="Kirjaudu">   
 </form>
  

Mikä on asp-päätteinen tiedosto ?
Active Server Page tiedosto on www-asiakirja, joka voi sisältää HTML-koodia, tekstiä, grafiikkaa ja XML sisältöä (Mikrosoft).

Valinta -elementit

Valinta useammasta vaihtoehdosta, tekemiseen www-sivulle käytetään input-elementissä type:lle asetuksena radio. Vaihtoehtoja on kaksi tai enemmän.

    <input type="radio" name="elukka" value="kissa"> Kissa<br>
    <input type="radio" name="elukka" value="koira"> Koira<br>
    <input type="radio" name="elukka" value="marsu"> Marsu<br>
  

Yksi tai useampi useammasta vaihtoehdosta, tekemiseen www-sivulle käytetään input-elementissä type:lle asetuksena checkbox. Vaihtoehtoja on yksi tai enemmän.

   <form action="kulkupeli.asp">
    <input type="checkbox" name="kulkuneuvo" value="p_pyora"> Omistan polkupyörän <br>
    <input type="checkbox" name="kulkuneuvo" value="auto"> Omistan auton <br>
    <input type="checkbox" name="kulkuneuvo" value="vene"> Omistan auton <br>
    <input type="submit" value="Lähetä">
   </form>
  

Esimerkissä valitaan kaksi väriä ja lähetetään värikoodit väriä käsittelevään ohjelmaan. Tässä type-atribuuttiin asetetaan color-määrite. Esimerkissä 1.värille on tehty esiasetus värin heksalukuna value-atribuuttiin, esiasetus voidaan tehdä myös värin RGB-arvona. Mikäli asetusta ei tehdä käytetään oletusväriä eli mustaa, esimerkissä väri 2.

   <form action="aseta_vari.asp">
    Valitse väri.<br>
    1.väri <input type="color" name="favcolor" value="#FAFA26"> <br>
    2.väri <input type="color" name="favcolor"> <br>
    <input type="submit" value="Lähetä">
   </form>
  

Päivämäärät

Päivämäärä voidaan pyytää www-sivulla type:n atribuutin date-määritteellä. Lomakkeella lähetetty tieto tunnistetaan name -atribuutissa annetulla nimellä vastaanottavassa ohjelmassa.

 <form action="merkkipaiva.php">
    Syntymäpäivä: <input type="date" name="s_paiva">
    <input type="submit" value="Lähetä">
 </form>
  

Päivämäärä ja kellon aika voidaan pyytää www-sivulla type:n atribuutin datetime-määritteellä.

 <form action="paiva_kello.php">
    Anna päivämäärä ja kellon aika<br>
	(esim pvm ja kellonaika: 23 4 13.25):<br> 
	<input type="datetime" name="paivaklo">
    <input type="submit" value="Lähetä">
 </form>
  

Päivämäärä ja paikallinen kellon aika voidaan pyytää www-sivulla type:n atribuutin datetime-local-määritteellä. Kokeile, kirjoittamalla pelkkä päivämäärä.

 <form action="paiva_kello.php">
    Anna päivämäärä ja kellon aika<br>
	(esim pvm ja kellonaika: 23 4 13.25):<br> 
	<input type="datetime-local" name="paivaklo">
    <input type="submit" value="Lähetä">
 </form>
  

Kellonaika, viikko ja kuukausi

Kellon aikaa www-sivulla käsitellään type:n atribuutin time-määritteellä. Lomakkeella lähetetty tieto tunnistetaan name -atribuutissa annetulla valittu_aika -nimellä vastaanottavassa kello.php ohjelmassa.

 <form action="kello.php">
    Anna kellon aika: <br>
	<input type="time" name="valittu_aika">
    <input type="submit" value="Lähetä aika">
 </form>
  

Viikko ja vuosi voidaan toteuttaa www-sivulle type:n atribuutin week-määritteellä. Lomakkeella lähetetty tieto tunnistetaan name -atribuutissa annetulla valittu_pvm -nimellä vastaanottavassa pvm.php ohjelmassa.

 <form action="pvm.php">
    Anna viikko ja vuosi: <br>
	<input type="week" name="valittu_pvm">
    <input type="submit" value="Lähetä päivämäärä">
 </form>
  

Kuukauden nimen ja vuoden valinta voidaan toteuttaa www-sivulle type:n atribuutin month-määritteellä. Lomakkeella lähetetty tieto tunnistetaan name -atribuutissa annetulla synty -nimellä vastaanottavassa syntypvm.php ohjelmassa.

 <form action="syntypvm.php">
    Syntymäkuukausi ja vuosi: <br>
	<input type="month" name="synty">
    <input type="submit" value=" Lähetä ">
 </form>
  

Liukusäädin on eräs tapa valita numero-arvo jollekin suureelle, liukusäädin lähettää asetuskohtaa vastaavan kokonaisluku-arvon. Jos säädin on puolessa välissä ja lukualue asetuksena on esim 20 lähetettävä numero-arvon 10.
Liukusäädin voidaan toteuttaa type:n atribuutin range-määritteellä. Huomaa sesimerkissä käytetty method -atribuutissa määrite get ja vastaanottava pisteet.php ohjelma.

 <form action="pisteet.php" method="get">
    Pisteet: <br>
	<input type="range" name="pist" min="0" max="20">
    <input type="submit" value=" Lähetä pisteet">
 </form>
  

 <form action="kokeiluja.php">
    Pisteet: <input type="number" name="piste" step="3"> <br><br>
	<input type=type="text" name="e_nimi" value="Etunimi"><br>
	<input type=type="text" name="s_nimi" value="Sukunimi">
    <input type="submit" value=" Lähetä tiedot">
 </form>
 

Puhelinnumeroiden käsittelyyn on oma , type:n atribuutin tel-määrite.
(voi olla ettei kaikki selaimet tue tätä)

 <form action="puhnum.php">
    Puhelinnumerosi: <input type="tel" name="puh_numero">
    <input type="submit" value=" Lähetä ">
 </form>
 

Tiedostot

Tiedoston valitsemiseen lähettämistä varten käytetään type:n atribuutin file-määritettä.
Lomakkeella lähetetty tiedosto tunnistetaan name -atribuutissa annetulla valittu_tiedosto -nimellä vastaanottavassa tuli_tiedosto.php ohjelmassa.

 <form action="tuli_tiedosto.php">
    Avaa ja valitse tiedosto: <br>
	<input type="file" name="valittu_file">
    <input type="submit" value="Lähetä tiedosto">
 </form>
  

Piilotettu tunniste

Lomake-kenttään voidaan siinä kysyttyyn tietoon liittää kenttään liittyvä piilotettu tunniste. Jos esimerkiksi tekstikenttään lomakkeen täyttäjältä pyydetään etunimeä, voidaan annettuun etunimeen lisätä jokin tunnisteteksti. Tämä input-elementti jolla tunnisteteksti liitetään lomakekentään ei näy lomakkeen täyttäjälle vaan on tarkoitettu lomakkeenkäsittelijälle lisäinformaatioiksi.

Esimerkissä type atribuutissa hidden-määrite. Lomakkeella lähetetty tieto tunnistetaan value -atribuutissa annetulla kayttaja -nimellä vastaanottavassa ktunnus.php ohjelmassa.

 <form action="ktunnus.php">
    Käyttäjätunnus: <br>
	<input type="text" name="k_tunnus> <br>
	<input type="hidden" name="tunniste" value="kayttaja"> <br>
    <input type="submit" value=" Lähetä ">
 </form>
  

Jos esimerkkiin lomakkeen täyttäjä antaisi tekstiksi Oskari1, lomakkeenkäsittelijä saisi tutkittavakseen seuraavan tyylisen tiedon:

k_tunnus=Oskari1&tunniste=kayttaja

Haku

HTML5:ssä search atribuutin toimintaa ei ole vielä määritelty.
(tarkista on näin)

 <form action="hakuja.php">
	<input type="search" name="haku"> 
    <input type="submit" value=" Etsi ">
 </form>
  

Haku

WEB-osoitteen eli url:n syöttämiseen lomakkeelle käytetään type atribuutissa email määritettä.

 <form action="jokuweb.php">
	Anna email: <input type="email" name="oma_email"> 
    <input type="submit" value=" Lähetä ">
 </form>
  

Huomaa miten www-osoite on annettava !

Jos www-osoite annetaan: www.testiharpake.com - saadaan ilmoitus Anna URL-osoite.
Kun www-osoite annetaan: http://www.testiharpake.com - on www-osoite annettu oikealla tavalla.