HTML-opas - Ohjelmoinnin perusteita

Lomakkeet

Php lomake

Lomakkeita voidaan käyttää tiedon lähettämiseen. Lomakkeen avulla saat sivuille esim. palaute-, kilpailu- tai tilauslomakkeen.

<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ä" tekstin.
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ä:

Nimikentät Etunimi: Sukunimi: Sähköposti: Kotisivut:	Etunimi: <input type="text" name="enimi" size="25"> Sukunimi: <input type="text" name="snimi" size="25"> Sähköposti: <input type="text" name="e_mail" size="25"> Kotisivut: <input type="text" name="sivut" value="http://" size="25">
Radiolista, vaihtoehdoista voi valita vain yhden. Valitse sinulle mieluisin ohjelmointi kieli HTML Java SQL VisualBasic	<input type="radio" name="okieli" value="html"> HTML <input type="radio" name="okieli" value="java"> Java <input type="radio" name="okieli" value="sql"> SQL <input type="radio" name="okieli" value="visualbasic" checked> VisualBasic (Checked voidaan lisätä, jos oletuksena halutaan jonkun vaihtoehdon olevan "valmiiksi valittu".)
Checkbox kysely 1. Sain sivut tehtyä oppaan avulla 2. Asiat olivat minulle ennestään tuttuja 3. Asiat oli minulle kohtalaisen tuttuja 4. En tiennyt asiasta ennestään mitään 5. Enpä juuri nytkään	<input type="checkbox" name="kysely" value="1"> 1. Plaa plaa... <input type="checkbox" name="kysely" value="2"> 2. Plaa plaa... <input type="checkbox" name="kysely" value="3"> 3. Plaa plaa... <input type="checkbox" name="kysely" value="4"> 4. Plaa plaa... <input type="checkbox" name="kysely" value="5"> 5. Plaa plaa... (Value voidaan antaa myös sanana, nyt tilan säästämiseksi numerona)
Arviosi oppaasta (asteikko 1-5)	<select name="arvostelu"> <option>Anna arviosi <option value="1"> 1 Huono </option> <option value="2"> 2 Välttävä </option> <option value="3"> 3 Tyydyttävä </option> <option value="4"> 4 Hyvä </option> <option value="5"> 5 Kiitettävä </option> </select>
Maapallo on	<select name="maapallo" size="4" multiple> <option value="1"> 1. Litteä </option> <option value="2"> 2. Pyöreä </option> <option value="3"> 3. Soikea </option> <option value="4"> 4. Neliö </option> </select> (MULTIPLE määrittää, että useamman kuin yhden nimikkeen voi valita (+ sift).)
Viestikenttä "Lähetä risut ja ruusut"	<textarea name="viesti" rows="4" cols="24" wrap="hard">Lähetä risut ja ruusut</textarea> <input type="submit" value="Lähetä"> <input type="reset" value="Tyhjennä"> Kuva painike: <button type="submit"> <img src="suomenlippu.gif" width="52" height="28" border="0"> </button>

Lomake sivulla on käytetty upotettuja tyylejä. Näiden tyylien käyttö ei ole välttämätöntä. Sivun head osaan on lisätty koodi:

<style type="text/css">
<!--
.tyyli { font-family: verdana; font-weight: bold; 
	background-color: #ffffff; 
	font-size: 12px; color: #6955FF;
	border: #6955FF 1px solid;}
textarea { background-image:url(kuva.gif); 
	font-weight:bold; font-size: 12px;
	 color:#6955FF;}
-->
</style>

Tämän lisäksi esim. tekstilaatikoiden koodiin on lisätty class="tyyli" jolla saadaan kyseinen tyyli komento tulostumaan. Huom. Tekstialueen taustakuva ei näy netscapessa, eikä tällöin välttämättä edes koko tekstialue jos käytetään taustakuvaa. NS6:ssa pitäisi näkyä, muttei ainakaan vanhemmissa.