sivut.web

ohjeita web-sivuston tekijälle

etusivu html javascript perl php grafiikka sivusto palvelin sanasto info palaute

HTML: Hyvännäköisiä lomakkeita

Hyvännäköistä lomaketta on äärimmäisen mukava käyttää. Niiden suunnitteluun tulisikin panostaa huolella, sillä jo pelkällä ulkonäöllä voidaan pienentää vierailijan kynnystä kirjoittaa kirjoittaa asiansa.

Luokaamme esimerkkilomake, jolla ilmoittaudutaan keksittyyn tapahtumaan. Ensimmäisessä esimerkissä käytetään tapaa, jossa kentän nimi sijoitetaan eri riville kentän yläpuolelle. Siistiä ja kaunista.

<form>

<p>
Nimi<br>
<input type="text" name="nimi" size="30">
</p>

<p>
Puhelinnumero<br>
<input type="text" name="puhelin" size="30">
</p>

<p>
Sähköposti<br>
<input type="text" name="sahkoposti" size="30">
</p>

<p>
Tuon mukanani<br>
<input name="tuon_elaimen" type="checkbox"> kotieläimen<br>
<input name="tuon_seuralaisen" type="checkbox"> (avo)vaimon/tyttöystävän<br>
<input name="tuon_ruokaa" type="checkbox"> ruokaa<br>
<input name="tuon_juomaa" type="checkbox"> juomaa
</p>

<p>
Ruokavalioni<br>
<input type="radio" name="ruokavalio" value="kaikkiruokainen"> kaikkiruokainen<br>
<input type="radio" name="ruokavalio" value="allergikko"> allergikko<br>
<input type="radio" name="ruokavalio" value="kasvissyoja"> kasvissyöja<br>
<input type="radio" name="ruokavalio" value="lihansyoja"> lihansyöja
</p>

<p>
Tulen paikalle<br>
<select name="tulen_paikalle">
<option> omalla autolla
<option> junalla
<option> bussilla
<option> kävellen
<option> linjoja pitkin
<option> yhteiskuljetuksella
<option> en tiedä vielä
</select>
</p>

<p>
Muuta huomioitavaa<br>
<textarea name="muuta" cols="30" rows="3"></textarea>
</p>

<p><input type="submit" value="Ilmoittaudu"></p>

</form>

esimerkki

Seuraava tekniikka vaatiikin sitten jo hieman kokemusta taulukoiden käytöstä. Keskitetyssä taulukossa on joka riviä kohden 3 vierekkäistä solua, joista ensimmäisessä on kentän nimi ja viimeisessä itse lomakkeen kenttä. Tämäntyyppinen lomakeratkaisu vaatii vähän enemmän rakentelua, mutta siinä on omat etunsa, sillä se mm. voittaa pystysuunnassa lyhyydellään edellisen ratkaisun.

<p align="center">

<table>

<tr>
<td align="right">Nimi</td>
<td width=5></td>
<td align="left"><input type="text" name="nimi" size="30"></td>
</tr>

<tr>
<td align="right">Puhelinnumero</td>
<td></td>
<td align="left"><input type="text" name="puhelin" size="30"></td>
</tr>

<tr>
<td align="right">Sähköposti</td>
<td></td>
<td align="left"><input type="text" name="sahkoposti" size="30"></td>
</tr>

<tr>
<td align="right" valign="top">Tuon mukanani</td>
<td></td>
<td align="left">
<input name="tuon_elaimen" type="checkbox"> kotieläimen<br>
<input name="tuon_seuralaisen" type="checkbox"> (avo)vaimon/tyttöystävän<br>
<input name="tuon_ruokaa" type="checkbox"> ruokaa<br>
<input name="tuon_juomaa" type="checkbox"> juomaa
</td>
</tr>

<tr>
<td align="right" valign="top">Ruokavalioni</td>
<td></td>
<td align="left">
<input type="radio" name="ruokavalio" value="kaikkiruokainen"> kaikkiruokainen<br>
<input type="radio" name="ruokavalio" value="allergikko"> allergikko<br>
<input type="radio" name="ruokavalio" value="kasvissyoja"> kasvissyöja<br>
<input type="radio" name="ruokavalio" value="lihansyoja"> lihansyöja
</td>
</tr>

<tr>
<td align="right">Tulen paikalle</td>
<td></td>
<td align="left">
<select name="tulen_paikalle">
<option> omalla autolla
<option> junalla
<option> bussilla
<option> kävellen
<option> linjoja pitkin
<option> yhteiskuljetuksella
<option> en tiedä vielä
</select>
</td>
</tr>

<tr>
<td align="right" valign="top">Muuta huomioitavaa</td>
<td></td>
<td align="left"><textarea name="muuta" cols="30" rows="3"></textarea></td>
</tr>

<tr>
<td align="right"></td>
<td></td>
<td align="left"><input type="submit" value="Ilmoittaudu"></td>
</tr>

</table>

</p>

esimerkki

Tätä sivua on viimeksi päivitetty 4.7.2002.

Käyttäjien kommentit

Tosi käteviä, tosi hyviä, tosi hyödyllisiä. Mä otan heti ton oman osotteeseen www.eetoradio.urli.net

Entä jos onkin allergikko-kasvissyöjä, kun tuosta ei voi valita kuin yhden vaihtoehdon ;) Noh, hyvä esimerkki silti, sekaviakin lomakkeita on tullut vastaan..

Ihan kätevä.
Jos teen samanlaisen lomakkeen ja joku kirjoittaa siihen, tuleeko lomakkeen kirjoittajan viesti mihinkä, minun sähköpostiiniko?

En löytänyt tuolta kohtaa, jolla voisi johtaa lomakkeeseen laitetut viestit omaan sähköpostiin. Kuinka se voi siis toimia?

Niin just,
Miten tohon koodiin voi lisätä käskyn/systeemin, et tiedot tulee tiettyyn sähköpostiosotteeseen?

- J

oon miettiny kanssa tässä. ihan hyvin että peräkkäisinä päivinä tänne eksyy joku.. :P

Miten saan muutettua tekstin väriä. Sivujeni taustaväri on musta, ja haluaisin tekstin punaiseksi.

Niin, mitenkä ne tiedot saa laitettua e-mailiin tuosta lomakkeesta?

Apua löytyy esimerkiksi tuolta

http://appro.mit.jyu.fi/www/luennot/luento6/#TOC3

Niille jotka kysyivät miten saa lomakkeen lähettämään tiedot sähköpostiin:

<form method="post" action="sähköposti@osoite.fi">

Lomake kysymykset tänne...

<input type="submit" value="lähetä!">
</form>

Mulla ei toimi tuo

"<form method="post" action="sähköposti@hotmail.com">

Lomake kysymykset tänne...

<input type="submit" value="lähetä!">
</form>"

Kun painaa lähetä tulee teksti

"The requested URL /******@hotmail.com was not found on this server."

Oma sähköposti osoite on siis sensuroitu itse koodissa ei lue noin.

Oma sähköpostiosoite pitää lisätä myös serverille palautteen vastaanottajaksi.

Mitenkäs tuo onnistuu? Kokoonpanolla:

apache
mysql 5.x
php 4.x
phpmyadmin

nii miten ton saa toimimaan minne se oma s-postiosote pitää servuun laittaa käytän apacea

Siinä pitää käyttää Mailto: tagia

Hehheh, 14 tunnin armottoman yrityksen jälkeen alkaa jo onnistua tuo tietokoneen käynnistäminen. En oo voinu nukkua koko aikana ku pelkään että tulee virus. Mutta ei hätää, kävin ostamassa patterillisen Mad Crockeja ;)

Siis miten tuo Mailto: tagi homma tehdään?
Vastauksia kaivataan!

Aivan paras vinkki.

Lisää oma kommentti