Valikko:

Lomakkeet

HTML-kielessä lomakkeita käytetään tietojen lähettämiseen sähköpostilla ja tietojen välittämiseen taustajärjestelmälle, joka voi esimerkiksi tallentaa käyttäjän tiedot. Taustajärjestelmä on voitu kirjoittaa esimerkiksi PHP-kielellä.

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.

Lomakkeen tekeminen

Lomake määritellään form-tagien väliin, johon voi määritellä hyvin monenlaisia sisältöjä. Esimerkiksi alla olevaan lomakkeeseen on määritelty kaksi tekstikenttää ja tekstialue. Lisäksi, jotta lomakkeen tiedot voisi lähettää, tarvitaan Lähetä-nappi. Kohteliaasti tarjotaan yleensä myös mahdollisuus lomakkeen tyhjentämiseen.:

Lomakkeeni

Nimi:
Email:

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

Lomakkeiden mahdollisia kenttiä

ElementtiMuotoParametrit
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)

Esimerkkejä

Esimerkeissä on ensin koodi ja sen vieressä lopputulos. Lopussa on esimerkki tapahtumalomakkeesta.

<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:
Laittakaa vaan
Ei kiinnosta


LISÄÄ MELUA -tapahtuma


Tapahtuman järjestää MELUA ry. 23-24.6. 2001 .
Räminää ja roisketta joka lähtöön.
Ilmoittaudu seuraavalla lomakkeella.

Yhteystietosi:

Etunimi: Sukunimi:
Lähiosoite:
Postinumero: Osoitetoimipaikka:
Puhelin: Sähköposti:

Tapahtumat ja majoitus:

Tilaan lipun 1. päivälle ja/tai 2. päivälle.
Majoituksenani on Hoidan itse Retkeilymaja Teltta

Maksut ja lähetys:

Maksutapa: Postiennakko Maksan paikalla Maksan tilillenne.
Lisätietoja:
Laskun summa €.

Melua jo vuodesta 1987.
MELUA ry.
PL 13
Melukylä
Finland
melua@melukyla.fi