Lomakkeisiin voidaan liittää myös Javascript-koodia, jolla voidaan tarkistaa lomakkeen tietoja, lähettää tiedot taustajärjestelmälle ja ottaa tietoja vastaan järjestelmältä. Kahdessa viimeisessä tapauksessa puhutaan Ajax-ohjelmoinnista.
Taustajärjestelmä suoritetaan aina http-palvelimella ja Javascript käyttäjän koneella.
<form name="lomakkeeni" method="post" action="mailto:erno.kivela@edu.hel.fi"> <h4>Lomakkeeni</h4> Nimi:<input type="text" name="nimi" size="20" /><br> Email:<input type="text" name="email" size="20" /><br> <p> <textarea name="palaute" rows="5" cols="20">Olen sitä mieltä, että:</textarea> <p> <input type="submit" value="Lähetä" /> <input type="reset" value="Tyhjennä" /> </form> |
Form-elementti (lomake) saa oman nimen name-parametrillä.
Action-parametri kertoo minne, ja tässä tapauksessa miten, lomake lähettää tietonsa, kun submit-nappia painetaan. Jos lomakkeen Action parametrille annetaan sähköpostiosoite, kuten yllä, täytyy paikallisella koneella olla käytettävissä postiohjelma. Toinen vaihtoehto olisi kertoa tässä kohtaa CGI-ohjelma ja sijainti, johon tiedot lähetetään.
Method-parametri kertoo, missä muodossa tiedot lähetetään. Mahdollisia tapoja on kaksi: POST ja GET. Get-metodi lähettää lomakkeen tiedot URL:n osana ja Post URL-pyynnön jälkeen. Yleensä suositellaan Post-metodia, jos palvelimelle pitää lähettää suurempia tietomääriä.
Input-elementtiä käytetään monenlaisissa tarkoituksissa ja type-parametri määrittelee, miten input näyttäytyy käyttäjälle. Esimerkiksi jos kirjoitetaan type="text" , saadaan yksinkertainen tekstikenttä, jos taas type="submit" , niin saadaan nappi, jolla lähetetään lomakkeen tiedot. Jos haluamme napin, josta lomake palautetaan alkuarvoihin, eli tyhjennetään, voidaan input-elementille määritellä type="reset".
Textarea-elementti lomakkeessamme tekee tekstialueen. Parametreillä rows ja cols määritellään tekstialueen koko leveys- ja korkeussuunnassa.
| Elementti | Muoto | Parametrit |
| Tekstikenttä | <input type="text" /> | Value (kentän oletusarvo), Name (kentän nimi), Size (kentän koko), Maxlength (merkkien enimmäismäärä) |
| Salasana | <input type="password" /> | Value (kentän oletusarvo), Name (kentän nimi), Size (kentän koko), Maxlength (merkkien enimmäismäärä) |
| Piilotettu teksti (ei näy suoraan käyttäjälle) | <input type="hidden" /> | Value (välitettävä arvo), Name (kentän nimi), |
| Tekstialue | <Textarea>Oletusarvo</Textarea> | Name (kentän nimi), Rows (kentän rivimäärä), Cols (riveille syötettyjen merkkien määrä) |
| Submit (lomakkeen lähetys) | <input type="Submit" /> | Value (Napin teksti) |
| Reset (lomakkeen tyhjennys) | <input type="Reset" /> | Value (Napin teksti) |
| Luetteloruutu (option-elementtejä voi olla enemmänkin) |
<select name="juomasi"> <option selected value="kahvi">Kahvi</option> <option value="tee">Tee tai vesi</option> </select> |
Name (luetteloruudun nimi) Multiple (Jos halutaan valita useita) Size (Kuinka monta vaihtoehtoa näkyy kerralla) Selected (oletusarvo) Value (lähetettävä arvo) |
| Valintaruutu | <input type="checkbox" /> | Name (valintaruudun nimi) Value (lähetettävä arvo) Checked (ennakkovalinta) |
| Valintanappi | <input type="radio" /> | Name (valintanapin nimi) Value (lähetettävä arvo, pakollinen) Checked (ennakkovalinta) |
<input type="password" name="salasana" value="12345" size="7" maxlength="6" /> |
|
<select name="Luetteloruutu"> <option selected value="limu">Limonadi</option> <option value="maito">Maito</option> <option value="tee">Tee</option> <option value="kahvi">Kahvi</option> <option value="piima">Piimä</option> <option value="mehu">Mehu</option> </select> |
|
<input type="checkbox" name="valinta" value="levy" checked />Valitsen levyn<br> <input type="checkbox" name="valinta" value="kasetti" />Valitsen kasetin <p> <input type="checkbox" name="posti" value="yes" />Laittakaa postituslistalle |
Valitsen levyn Valitsen kasetin Laittakaa postituslistalle |
<input type="radio" name="tuote" value="levy" checked />Valitsen levyn<br> <input type="radio" name="tuote" value="kasetti" />Valitsen kasetin<br> <input type="radio" name="tuote" value="cd" />Valitsen cd:n <p> Postituslistalle:<br> <input type="radio" name="lista" value="yes" />Laittakaa vaan<br> <input type="radio" name="lista" value="no" />Ei kiinnosta |
Valitsen levyn Valitsen kasetin Valitsen cd:n
Postituslistalle: |