HTML-OPAS/LOMAKKEET

Lomakkeet
Kirjan sivut 92- 98

Lomakkeet määritellään FORM-elementillä. FORM-aloituksessa määritellään myös se, miten lomakkeessa oleva tieto käsitellään. Tämä määrittely tapahtuu ACTION ja METHOD -attribuuteilla. FORM-elementti tulee koko lomakkeelle. Jos laitat useamman FORM-/FORM-elementtiparin, tarvitset jokaiselle lomakkeelle omat Submit/Reset-painikkeet

METHOD - kuinka lomakkeen tiedot lähetetään, joko post tai get. get-lähettää viestin palvelimelle, joka sitten käsittelee määritellyllä tavalla lomakkeen tiedot. Get-määritys ei ole suositeltava. Mieluimmin METHOD-arvoksi määritellään post.

ACTION-attribuutilla määritellään, miten lomakkeen tietojen lähettäminen tapahtuu. ACTION-arvoksi voidaan määritellä palvelimella sijaitseva CGI-ohjelma, joka käsittelee lomakkeen tiedot ja lähettää ne eteenpäin. Toinen tapa on määritellä ACTION-arvoksi sähköpostiosoite, johon lomakkeen tiedot lähetetään suoraan.

<FORM METHOD=”post” ACTION=”http://www.palvelin.fi/cgi-bin/emailfi”>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>

FORM-elementin sisälle määritellään INPUT-elementillä minkälaisia lomakekenttiä lomakkeessa on:

INPUT TYPE="text" - tekstikenttä, jolla on lisäksi attribuutit:
* NAME (nimi, jotta tiedetään minkä lomakekentän tietoa lähetetään)
* VALUE - oletusteksti, joka lukee kentässä, kun sivulle tullaan
* MAXLENGHT - kirjainten maksimimäärä kentässä
* SIZE - kentän näkyvän osan koko, ei rajoita kirjainten määrää
INPUT-elementti luo text-tyyppisen kentän myös silloin, jos ei erikseen mainita TYPE-attribuutilla millainen lomakekenttä on kyseessä

<INPUT TYPE="text" NAME="name" VALUE="oletusteksti" MAXLENGHT="30" SIZE="20">

INPUT TYPE="password" - tekstikenttä, joka on muutoin samanlainen kuin text, mutta kenttään syötetty tieto ei ole näkyvissä kuin tähtinä

<input type="password" name="T1" size="20">

INPUT TYPE="checkbox" - valintaruutu
* CHECKED - jos lisätty INPUT-elementtiin, on valintaruudussa valintarasti valmiina
* VALUE - valintaruudun arvo, joka lähtee lomakkeen lähetyksen yhteydessä
* NAME - nimi, johon viitataan lähetyksessä eli tämän nimen arvo on value-kohdan teksti

INPUT TYPE="radio" - radio-painike, jossa ryhmään kuuluvista voi valita vain yhden kerralla
* CHECKED - onko valittu, ryhmässä voi olla vain yksi valittuna
* VALUE - valintaruudun arvo, joka lähtee lomakkeen lähetyksen yhteydessä
* NAME - nimi, johon viitataan lähetyksessä eli tämän nimen arvo on value-kohdan teksti

INPUT TYPE="submit" VALUE="Lähetä" - painike, jolla lomakkeen tiedot lähetetään. VALUE-attribuutti antaa painikkeelle siinä näkyvän tekstin.

INPUT TYPE="reset" VALUE="Tyhjennä" - painike, jolla lomakkeen tiedot tyhjennetään. VALUE-attribuutti antaa painikkeelle sen näkyvän tekstin

BUTTON-elementti: uudempi tapa määritellä painikkeet
* TYPE - reset, submit, button
* NAME - kuten edellä
* VALUE - lähetä kuten edellä
Tällä elementillä voidaan painikkeeseen sijoittaa kuva:
<BUTTON TYPE="submit" VALUE="Lähetä" NAME="lahetys">
<IMG SRC="kuva.gif">
</BUTTON>

INPUT TYPE="file" NAME="tiedosto"
tiedoston liittäminen lomakkeesta lähtevään tietoon HUOM! ei toimi vanhemmissa Explorerin versioissa

MALLIT:
<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
Anna nimesi:
<INPUT TYPE="TEXT" NAME="NAME"><BR>
Kotisuvun osoite:
<INPUT TYPE="TEXT" NAME="HOME" VALUE=http:// SIZE="50"><BR>
<INPUT TYPE="submit" value=Lähetä><INPUT TYPE="reset" value=Tyhjennä>
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<INPUT TYPE=CHECKBOX NAME=F01>Musiikki
<INPUT TYPE=CHECKBOX NAME=F02 CHECKED>Kirjat
<INPUT TYPE=CHECKBOX NAME=F03>Elokuvat
<INPUT TYPE="submit" value=Lähetä><INPUT TYPE="reset" value=Tyhjennä>
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<SELECT NAME=HARRASTUKSET>
<OPTION>KIRJAT
<OPTION>MUSIIKKI
<OPTION>LAULU
<OPTION>ELOKUVA
</SELECT>
<INPUT TYPE="submit" value=Lähetä><INPUT TYPE="reset" value=Tyhjennä>
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<INPUT TYPE="radio" NAME="HARRAS" VALUE=1>MUSIIKKI<BR>
<INPUT TYPE="radio" NAME="HARRAS" VALUE=2>KIRJAT<BR>
<INPUT TYPE="radio" NAME="HARRAS" VALUE=3>LAULU<BR>
<INPUT TYPE=submit VALUE="LÄHETÄ">
<INPUT TYPE=reset VALUE="TYHJENNÄ">
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<SELECT NAME="HARRAS" SIZE=5>
<OPTION>MUSIIKKI
<OPTION>LAULU
<OPTION>KIRJAT
<OPTION>ELOKUVA
<OPTION>PELIT

</SELECT> <BR>
<INPUT TYPE=submit VALUE="LÄHETÄ"> <INPUT TYPE=reset VALUE="TYHJENNÄ">
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<SELECT NAME="HARRAS" SIZE=4 MULTIPLE>
<OPTION>MUSIIKKI
<OPTION>LAULU
<OPTION>KIRJAT
<OPTION>ELOKUVA
<OPTION>PELIT

</SELECT> <BR>
<INPUT TYPE=submit VALUE="LÄHETÄ"> <INPUT TYPE=reset VALUE="TYHJENNÄ">
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<TEXTAREA NAME=CONTENT ROWS=5 COLS=30>
</TEXTAREA>
<BR>
<INPUT TYPE=submit VALUE="LÄHETÄ"> <INPUT TYPE=reset VALUE="TYHJENNÄ">
</FORM>

<FORM METHOD=”post” ACTION=”mailto:sähköposti@osoite.fi”>
<TEXTAREA NAME=CONTENT ROWS=8 COLS=70>
</TEXTAREA>
<BR>
<INPUT TYPE=submit VALUE="LÄHETÄ"> <INPUT TYPE=reset VALUE="TYHJENNÄ">
</FORM>

Kooste:
Elementti	Attribuutit / selitykset
<FORM> - </FORM>	Lomakkeen aloitus - ja lopetus name - lomakkeen nimi method - miten lomakkeen dataa käsitellään action - mihin tieto lomakkeelta lähtee
<INPUT>	Lomake-elementti type - elementin tyyppi name- elementin nimi size - elementin koko value - oletusarvo
<BUTTON>	Lomakkeen painike name - nimi type - painikkeen tyyppi value - painikkeessa oleva teksti
<TEXTAREA> - </TEXTAREA>	Tekstikenttä rows - montako näkyvää riviä cols - montako näkyvää merkkiä name - nimi
<SELECT> - </SELECT>	Pudotusvalikko name - nimi size - näkyvien rivien määrä multiple - voiko valita useamman rivin
<OPTION> - </OPTION>	Pudotusvalikon yksittäinen rivi value - valinnan arvo