HTML-opas - Web Ohjelmoinnin perusteita

Lomakkeet

Php lomake

Lomakkeita voidaan käyttää tiedon lähettämiseen internet sivulta. Voit tehdä sivuille esim. palaute-, kilpailu-, ilmoittautumis- tai tilauslomakkeen. Puhumattakaan vieraskirjasta ja foorumista, jotka myös ovat lomakkeita. Tosin niihin tarvitaan aina palvelinpään ohjelmointia avuksi. Tässä keskitytään vain palautelomakkeeseen.

<FORM> </FORM> Aloittaa ja lopettaa lomakkeen. Määrittelyt ovat:
ACTION Määrittelee käytettävän osoitteen, kun lomake on toiminnassa. Yleensä ASP-, CGI- tai PHP- tiedoston osoite. Ota selvää tukeeko serverisi (palvelun tarjoajasi) näitä tiedostoja. Voidaan määrittää myös MAILTO -osoite, jotta lomakkeen tiedot postitettaisiin suoraan sinulle.
METHOD Määrittelee metodin, jolla serveri lähettää lomakkeen tiedon. Mahdollisia arvoja ovat: POST
tai GET. Kun käytetään arvoa GET, niin serveri lisää argumentit ACTION-osoitteen perään.
Kun käytetään arvoa POST, niin tieto lähetetään HTTP postitoimintona.
Esim: <form action="mailto:osoite@palvelin.tunnus" method="post">

"Hidden" -määritelmä piilottaa tiedot selaimelta, nämä kentät ei näy käyttäjälle. "Recipient" tarkoittaa vastaanottajaa ja sillä kerrotaan antamalla value -käskyllä vastaanottajan sähköpostiosoite.
<input type="hidden" name="recipient" value="osoite@palvelin.tunnus">

"Redirect" kertoo html-sivun johon siirrytään kun lomake on lähetetty. Tätä käytetään yleensä kiitossivulle ohjauksena, siis "Kiitos palautteesta". On hyvin ystävällistä tehdä sellainen sivu, näin viestin lähettäjä tavallaan "varmistuu", että viesti on lähtenyt.
<input type="hidden" name="redirect" value="http://www.omatsivut.com/kiitos.html">

Sivun loppuun on ihan käytännöllistä lisätä esimerkiksi lähetä ja tyhjennä nappit. Varsinkin tuo lähetä. Tietenkin sillä olettamuksella että yleensäkin haluaa palautetta sivuiltaan.
Submit tarkoittaa että lomake lähetetään. Value="Lähetä" laittaa lähetysnappiin tekstiksi Lähetä.
Reset tarkoittaa että lomake tyhjennetään kaikista tiedoista. (Me kaikki tulemme välillä katumapäälle).
<input type="SUBMIT" value="Lähetä"> <input type="RESET" value="Tyhjennä">

Alla muutamia muita esimerkkejä:

Näytöllä

Koodit

Etunimi:
Sukunimi:
Sähköposti:
Kotisivut:

Etunimi: <input type="text" name="enimi" size="20">
Sukunimi: <input type="text" name="snimi" size="20">
Sähköposti: <input type="text" name="email" size="20">
Kotisivut: <input type="text" name="sivut" value="http://" size="20">

Radiolista kysely, voi valita vain yhden.
1. Valinta
2. Valinta
3. Valinta
4. Valinta

<input type="radio" name="kysely" value="1. Valinta"> 1. Valinta
<input type="radio" name="kysely" value="2. Valinta"> 2. Valinta
<input type="radio" name="kysely" value="3. Valinta"> 3. Valinta
<input type="radio" name="kysely" value="4. Valinta" checked> 4. Valinta
Checked = jos oletuksena halutaan jonkun vaihtoehdon olevan "valmiiksi valittu".

Checkbox kysely, voi valita useampia.
1. Valinta.
2. Valinta.
3. Valinta.
4. Valinta.

<input type="checkbox" name="kysely2" value="1."> 1. Plaa...
<input type="checkbox" name="kysely2" value="2."> 2. Plaa...
<input type="checkbox" name="kysely2" value="3."> 3. Plaa...
<input type="checkbox" name="kysely2" value="4."> 4. Plaa...
Value voidaan antaa myös numeroina. Checked määrittely on myös mahdollista.

Valinta alaspudotus valikosta

<select name="utelu">
<option>Valitse valikosta </option>
<option value="1."> 1. Valinta </option>
<option value="2."> 2. Valinta </option>
<option value="3."> 3. Valinta </option>
<option value="4."> 4. Valinta </option>
</select>
Checkedin tilalla käytä tarvittaessa selected.

Valinta ilman alasputotusta

<select name="utelu2" size="4" multiple>
<option value="1."> 1. Valinta </option>
<option value="2."> 2. Valinta </option>
<option value="3."> 3. Valinta </option>
<option value="4."> 4. Valinta </option>
</select>
Size = Montako vaihtoehtoa on näkyvillä. Niitä voi olla useampiakin, silloin oikealle ilmestyy scrollipalkki.
Multiple = useamman voi valita (+ sift näppäin). Checkedin tilalla käytä tarvittaessa selected.

Salasanakenttä:

Viestikenttä

<textarea name="viesti" rows="4" cols="24"> Oletus tekstisi tähän (vapaaehtoinen). </textarea>
<input type="submit" value="Lähetä">
<input type="reset" value="Tyhjennä">
Rows=Tekstilaatikon korkeus, Cols=Tekstilaatikon pituus.

Kuva painike: <button type="submit"> <img src="suomi.gif" width="38" height="20" border="0"> </button>

Huom: Tämä on esimerkkilomake, eikä se lähetä postia.

Vierailijoiden lkm 12/5 -04 lähtien: 274903 kpl.

Online 6.

Sivulataukset 9/7 -04 lähtien: 5181800 kpl.

Johdanto Ohjelmat Koodeja Kuvat Taustakuvat Taustavärit Linkit Listat Lomakkeet Php-palaute Taulukot Tyylit Kehykset Äänet Kotisivutilaa Domain osoite Metakone Hirsipuu Lisää linkki Päivänvitsi Suosittele Vieraskirja Lähetä kortti

Mietelause: Erehtyminen on inhimillistä, mutta todella suuriin mokiin tarvitaan tietotekniikkaa.

Tuntematon