Lomake, form-elementti

Lomakkeita käytetään vuorovaikutteisien www-sivujen toteutuksissa tiedon keräämisen, käsittelyn ja palautteen esittämisen välineenä. Lomakkeissa on pakollisia osia, pakollisuus mainitaan erikseen oppaassa. Lomakkeisiin liittyy olennaisena osana input-elementti jolla lomakeen sisältö toteutetaan, input-elementti on esitelty eri sivulla.

Lomake toteutetaan form-elementillä tai -elementeillä. Oppaan lomake-esimerkit eivät ole toimivia versioita, lomakkeita käsitellään lomakkeenkäsittelijä-ohjelmilla joiden ohjelmointikielinä on esimerkiksi PHP ja JavaSript.

 <form>
    Lomakkeen sisältö input-elementein ja niihin liittyvine asetuksineen sekä 
	muut tarvittavat elementit (esim painike).   
 </form>
  

Jotta lomake on tunnistettavissa (ja CSS:llä muotoiltavissa ?) lomake tarvitsee id-tunnisteen. Tunniste kirjoitetaan form-elementin alkuun seuraavasti:

 <form id="osa_tilaus">
    Tilaus-lomakkeen sisältö.   
 </form>
  

Lomakkeen sisällön elementit voi kirjoittaa form-elementin ulkopuolellekin (ei suositeltavaa), jos ne kiinnitetään form-elementiin id-atribuutin avulla:

 <form id="osa_tilaus">
    Tilaus-lomakkeen sisältö.   
 </form>
 <input type=”text” form=”osa_tilaus”>
  

form-elementin atribuutit

Tiedon siirtokohde, action (pakollinen)

Lomakkeen sisältämät tiedot lähetetään action-parametrillä www-palvelimella olevaan "lomakekäsittelijä"-ohjelmalle. Lomakekäsittelijä on ohjelma (PHP tai script) joka lähettää tiedot esim sähköpostiin tai palvelimelle esimerkiksi tietokantaan.
Lomakkeenkäsittelijä-ohjelma käsittelee tietoja palvelimen ja lomakkeen CGI-rajapinnalla sekä sijaitsee palvelimella, joko samalla kuin sivusto tai jollain muulla palvelimella.

Atribuutin action arvona voi olla esimerkiksi sähköpostiosoite tai lomakkeenkäsittelijä-ohjelman "nimi".

Lomake sähköposti-osoitteeseen (muista tietoturva-riskit):

 <form action="mailto:veijo.vastaanottaja@gmail.com">
    Lomakkeen varsinainen sisältö   
 </form>
  

Lomakekäsittelijälle-ohjelmalle (PHP-ohjelma):

 <form action="lomakekasittely.php">
  Lomakkeen varsinainen sisältö   
 </form>
  

Lomakkeen lähettäminen CGI-ohjelmistoon joka sijaitsee samalla palvelimella jolla täytettävä lomake on:

 <form action="/cgi-bin/post-query">
  

lähde: HTML4,Tero Linjamaa, Teknolit

Lomakkeen lähettäminen eri palvelimella olevaan CGI-ohjelmistoon (kuvitteellinen sivuton.org):

 <form action="http://www.sivuton.org/cgi-bin/post-query">
  

lähde: HTML4,Tero Linjamaa, Teknolit

Tiedon lähetystapa, method

Lähetystavan method-atribuutissa kerrotaan määritteellä lähetetäänkö lomakkeen tiedot url-muodossa (get) vai käyttäjiltä piilotettuna (post).

Esimerkki, lomake lähetetään piilotettuna:

 <form action="lomakekasittely.php" method="post">
  Lomakkeen varsinainen sisältö
 </form>
  

Koodaustapa, enctype

Atribuuttia enctype käytetään lomakkeella lähetettyjen tietojen koodaukseen sekä sitä käytetään silloin kun lomakkeella on tarkoitus lähettää kuvia tai muita tiedostoja. Määrittelyjä:

- application/x-www-form-urlencoded, kun lähetettävän tiedon tyyppi muu kuin oletusarvoinen MIME. 
                                     Tämä ei vaikuta jos lähetysmetodina on get.
- multipart/form-data, käytetään kun lomake sisältää tiedoston kokoisen lähetettävän syötekentän.
- text/plain, sähköpostin lähetys lomakkeelta (action:n arvona oltava sähköposti-osoite).

 <form action="mailto:sahvoposti.osoite@gmail.com" enctype=text/plain">
   <input name="etunimi" type="text"> Etunimi<br>
   <input name="sukunimi" type="text"> Sukunimi<br>
   <input type="submit" value="LÄHETÄ">
 </form>
  

Vastauksen esittämistapa, target

Mikäli lomake on toteutettu frame-elementillä luotuun kehykseen, käytetään target-atribuuttia, muotoa target="kehyksen nimi". Alla target-atribuutin määritteet: lomakkeella on tarkoitus lähettää kuvia tai muita tiedostoja. Määrittelyjä:

- window_name, (ilmeisesti nykyään framename, vastaus näytetään ifame:ssä (?).
- _blank, vastaus näytettään uudessa ikkunassa tai selaimen välilehdellä.
- _parent, vastaus näytetään samassa kehyksessä.
- _self, vastaus näytetään vanhassa (?) kehyksessä.
- _top, vastaus näytetään kokonaisena ikkunassa (?).

 <form action="demo_form.asp" method="get" target="_blank">
   <input name="etunimi" type="text"> Etunimi<br>
   <input name="sukunimi" type="text"> Sukunimi<br>
   <input type="submit" value="LÄHETÄ">
 </form>
  

Lomakkeen nimi, name

Lomakkeen nimi ilmaistaan name-atribuutilla luotuun kehykseen, name="lomakkeen nimi".
HUOM! Kyse on lomakkeen nimestä (form-elementtissä) ei lomakekentän nimestä (input-elementissä). Lomakkeen nimi ei näy sivuston käyttäjälle, käytetään viittatessa esim JavaScriptissa lomakkeeseen sekä jos html-dokumentissa on useita lomakkeita.

 <form action="form_action.asp" method="get" name="Nimilomake">
   <input type="text" name="etunimi"> Etunimi<br> 
   <input type="text" name="sukunimi"> Sukunimi<br> 
   <input type="button" onclick="formSubmit()" value="Lähetä nimitiedot">
 </form>
 

Lomakkeessa käytettävä kieli ja kirjoitussuunta, lang ja dir

Lomakkeelle voidaan asettaa siinä käytettävä kieliasetus lang-määritteellä käyttämällä kielen englanninkielistä lyhennettä, alle esimerkissä ranska.

Lomakkeessa käytettävän kielin määrittely:

 <form action="form_action.asp" method="get" name="Nimilomake" lang="fr">
   <input type="text" name="etunimi"> Etunimi<br> 
   <input type="text" name="sukunimi"> Sukunimi<br> 
   <input type="button" onclick="formSubmit()" value="Lähetä nimitiedot">
 </form>
  

Kirjoitussuunta-asetus tehdään dir-atribuutissa käyttäen määritettä ltr (left to right) tai rtl (right to left). Molemmat asetukset koskevat yleensä koko www-sivustoa jollei toisin ole asetettu.
Kirjoitussuunta määritellään saman tyylisesti form-elementissä kuten muissakin teksti-elementeissä:

 <form action="form_action.asp" method="get" name="Nimilomake" dir="ltr">
   <input type="text" name="etunimi"> Etunimi<br> 
   <input type="text" name="sukunimi"> Sukunimi<br> 
   <input type="button" onclick="formSubmit()" value="Lähetä nimitiedot">
 </form>
  

Lomakkeen CSS-muotoilu, id, class ja span

Lomakkeen paikalliset tyyliastukset voi toteuttaa style- tai id-määritteessä, koko lomaketta koskien class-atribuuttia avulla kokonaisena tyyliastuksena CSS-tiedostossa. Määritteellä id voidaan myös ilmoittaa yksiselitteiden kohta linkille.

CSS-tiedostossa olevan Lomake1 mimisen tyyliohjeen liittäminen lomakkeeseen class-atribuutilla:

 <div class="Lomake1">
    <form>
     lomakkeen sisältö
    </form>
 </div>
  

Lomakkeelle paikallinen tyyli-asetus style-atribuutilla ja span-elementillä sekä style-tiedostosta painikkeelle class-atribuutilla:

 <form action="form_action.asp" method="get" name="Nimilomake">
    <input  type="text" name="e_nimi" style="background-color:RGB(255,238,179)"> 
     <span style="color:blue"> Etunimi </span><br> 
    <input type="text" name="s_nimi" style="background-color:RGB(255,238,179)">
     <span style="color:blue"> Sukunimi </span><br>
    <input class="painike" type="button" onclick="formSubmit()" value="Lähetä nimitiedot">
 </form>
  

Opaste-otsikko, title

Asetettaessa title-atribuutilla otsikko lomakkeelle form-elementin sisään, otsikko tai opaste avautuu näkyville pienenä opaste-ruutuna teksteineen kun hiiren osoitin on lomakkeen alueella:

 <form title="Henkilötiedot, anna tietosi." action="form_action.asp" method="get" name="Nimilomake">
    <input  type="text" name="e_nimi" style="background-color:RGB(255,238,179)"> 
     <span style="color:blue"> Etunimi </span><br> 
    <input type="text" name="s_nimi" style="background-color:RGB(255,238,179)">
     <span style="color:blue"> Sukunimi </span><br>
    <input class="painike" type="button" onclick="formSubmit()" value="Lähetä nimitiedot">
 </form>
  

Automaattinen täydennys, autocomplete

Atribuutilla autocomplete, tehdään automaattinen täydennys lomakkeen kaikkiin kenttiin ellei niitä ole erikseen asetettu. Automaattinen täydennys ei kuitenkaan toimi jos toiminto on selaimen asetuksista estetty.

Automaattinen täyttö estetty - autocomplete="off", lomakekenttä ei ehdota aiemmin kenttään kirjoitettua tekstiä tai email-osoitetta:

 <form action="demo_form.asp" method="get" autocomplete="off">
    <input type="text" name="fname">Etunimi
    <input type="email" name="email">email
    <input type="submit" value="Lähetä">
  

 <form action="demo_form.asp" method="get" autocomplete="on">
    <input type="text" name="fname">Etunimi
    <input type="email" name="email">email
    <input type="submit" value="Lähetä">
  

Kenttien tarkistuksen esto, novalidate

Lomakkeen kenttien tarkitusten estämiseen käytetään novalidate-määritettä:

 <form action="form_action.asp" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit" value="Lähetä">
 </form>