WWW-lomakkeet

Sähköpostilomake
Lomakkeen muotoilu
Haku omalle sivulle

Näissä tehtävissä opetellaan WWW-lomakkeisiin liittyviä asioita.

Sähköpostilomake

Tehdään sähköpostin lähettämiseen tarkoitettu lomake. Esimerkkejä lomake-elementtien tekemiseen löydät luennolta. Lomakkeen rakenteesta halutaan oikeassa laidassa olevan kuvan kaltainen (kuvaa klikkaamalla näet sen suurempana). Ulkoasu määrätään vasta lomakkeen luonnin jälkeen, joten aluksi ei kannata välittää ulkoasusta.

Luo W:\www\-hakemistoon alihakemisto ohjaus6. Tallenna lomake.css ohjaus6-hakemistoon.
Aloita uusi HTML-dokumentti. Laita nimeksi index.html ja tallennushakemistoksi äsken luomasi ohjaus6-hakemisto.
Lisää linkki CSS-tyylitiedostoon lomake.css.
Muokkaa sivun title- ja h1-elementit sopiviksi.
Lisää HTML-sivulle lomake (form). Älä toistaiseksi laita mitään action-attribuuttiin.
```
<form action="" method="post">

</form>
```
Lisätään lomakkeelle tekstikenttä. Lisää ensin label-elementti. Kirjoita otsikkotekstiksi Aihe. Lisää otsikkotekstin jälkeen tekstikenttä (input-elementti). Laita lopuksi label-elementti ja input-elementti saman p-elementin sisään.
```
<p>
     <label for="aihe">Aihe</label>
     <input type="text" name="aihe" id="aihe" />
</p>
```
input-elementillä täytyy aina olla järkevä arvo name-attribuutissa. name-attribuutti, kertoo lomakkeen käsittelijälle kentän nimen.

Liitä label-elementti ja input-elementti toisiinsa seuraavalla tavalla:
- Aseta input-elementin id-attribuutin arvoksi "aihe". Tämän pitää olla yksilöllinen (uniikki) arvo tässä dokumentissa. Millään toisella elementillä ei saa olla samaa id-attribuutin arvoa.
- Aseta label-elementin for-attribuutin arvoksi sama "aihe"
- Kokeile selaimella sivun toimintaa. Jos kaikki meni oikein voit hiirellä klikata aihe-tekstiä jolloin tekstikenttä aktivoituu

Kokeile sivua selaimella. Laita tekstikentille vielä kiinteä esityspituus size-ominaisuudella:

<p><
    label for="aihe">Aihe:</label>
    <input type="text" id="aihe" name="aihe" size="40" />
</p>

Lisää lomakkeelle vielä lähetyspainike:
```
<p>
    <input type="submit" value="Lähetä viesti" name="laheta" />
</p>
```
Lomakkeelle täytyy määrätä myös jokin järkevä ohjelma käsittelijäksi. Lisää form-elementin action-attribuuttiin arvo: http://appro.mit.jyu.fi/cgi-bin/view.cgi
```
<form action="http://appro.mit.jyu.fi/cgi-bin/view.cgi" method="post">
```
- action-attribuutti kertoo miten tai millä ohjelmalla lomakkeen lähetetyt tiedot käsitellään. Laita tähän http://appro.mit.jyu.fi/cgi-bin/view.cgi.
- method-attribuutti kertoo tavan, jolla lomakkeen tiedot lähetetään. Laita arvoksi post.
Kokeile nyt lomaketta selaimella. Mitä tapahtuu kun klikkaat "Lähetä viesti"-painiketta? Kokeile syöttää lomakkeelle tietoa. Kokeile muuttaa aihe-kentän name-attribuutin arvoa.
Lisää lomakkeelle prioriteetin valinta käyttäen valintalistaa:
```
<p>
    <label for="prioriteetti">Prioriteetti</label>
    <select name="prioriteetti" id="prioriteetti">
        <option>Korkea</option>
        <option selected="selected">Normaali</option>
        <option>Alhainen</option>
    </select>
</p>
```
- Vaihtoehdoista Normaali on oletuksena valittuna joten sen selected-attribuutilla täytyy olla arvo (selected="selected").
- label-elementti yhdistetään select-elementtiin samalla tavalla kuin aiemmin input-elementtiin.

Lisätään lomakkeelle vastaanottajan valitseminen monimutkaisemmalla valintalistalla toteutettuna.

<p>
    <label for="vastaanottaja">Vastaanottaja</label>
    <select name="vastaanottaja" id="vastaanottaja" size="7" multiple="multiple">
        <optgroup label="opettajat">
            <option value="antti.j.ekonoja@jyu.fi">Antti Ekonoja</option>
            <option value="jmantyla@iki.fi">Jukka Mäntylä</option>
            <option value="tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</option>
        </optgroup>
        <optgroup label="tuntiopet">
            <option value="mipeaarn@jyu.fi">Mikko Aarnio</option>
            <option value="jkaski@jyu.fi">Jaakko Kaski</option>
        </optgroup>
    </select>
</p>

optgroup-elementillä ryhmitellään valintalistan vaihtoehtoja
```
<optgroup label="tuntiopet">
...
</optgroup>
```
multiple-attribuutti mahdollistaa useamman vastaanottajan valitsemisen. Kokeile valita useampia pitämällä CTRL- tai SHIFT-näppäintä pohjassa
```
<select name="vastaanottaja" id="vastaanottaja" multiple="multiple">
```
size-attribuutilla voi määrätä elementin korkeuden. Kokeile eri arvoja
Jokaisella option-elementillä voi olla value-attribuutissa arvo, joka toimii kyseisen valinnan arvona. Jos value-attribuuttia ei ole annettu niin arvona käytetään option-elementin sisältöä
```
<option value="antti.j.ekonoja@jyu.fi">Antti Ekonoja</option>
```

Kokeile lomakkeen toimintaa selaimella.

Tehdään valintanappi-lista formaatin valinnalle.

<p>
    <label>
        <input type="radio" name="formaatti" value="teksti" checked="checked" />Teksti
    </label>
</p>
<p>
    <label>
        <input type="radio" name="formaatti" value="html" />HTML
    </label>
</p>
<p>
    <label>
        <input type="radio" name="formaatti" value="xml" />XML
    </label>
</p>

Käytetään label-elementtiä uudella tavalla. for- ja id-attribuutteja ei tarvita, jos labeliin liittyvän elementin voi sijoittaa suoraan label-elementin sisään
```
<label>
        <input type="radio" name="formaatti" value="teksti" checked="checked" />Teksti
</label>
```
Lisää kaikille valintanapeille sama arvo name-attribuuttiin. Saman arvon käyttäminen pitää valintanapit samassa ryhmässä eli vain yksi voi kerrallaan olla valittuna.

Valitse oletusvalinnaksi Teksti lisäämällä kyseiselle input-elementille määre checked="checked".

<p><label><input type="radio" name="formaatti" checked="checked" value="teksti" />Teksti</label></p>

Lisätään valintaruutuina lisäasetukset:

<p>
    <label>
        <input type="checkbox" name="extra" value="Tekstiviesti" />Lähetä myös tekstiviesti</label>
</p>
<p>
    <label>
        <input type="checkbox" name="extra" value="Kirje" />Lähetä myös tavallinen kirje</label>
</p>

Valintaruuduissa input-elementin type-attribuutin arvo on checkbox
Valintaruudut ovat yksilöllisiä eikä ole merkitystä onko niillä sama vai eri name.

Täydennä lomake varsinaisella tekstialueella (textarea
```
<p>
    <label for="viesti">Viesti</label>
    <textarea id="viesti" rows="20" cols="50" name="viesti"></textarea>
</p>
```
- rows-attribuutti määrää montako riviä tekstialueessa on
- cols-attribuutti määrää montako saraketta tekstialueessa on
Kokeile lomakkeen toimintaa
Lisää kullekin lomake-elementille (input, select, textarea) vielä tabindex-ominaisuuteen numeroarvo, joka kertoo monesko elementti on sarkainjärjestyksessä. Ominaisuutta tarvitaan erityisesti silloin, jos elementtien käyntijärjestys ei ole sama kuin esiintymisjärjestys HTML-dokumentissa.
```
<input tabindex="6" type="radio" name="formaatti" value="xml" />
```
Vaihtele tabindeksien arvoja ja kokeile miten lomake toimii, kun yrität siirtyä kentästä toiseen sarkain (tabulaattori) -näppäimellä

Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Katso mallia tehtävien alussa olevasta mallikuvasta (Otsikkotiedot ja Viestiosa siis omiksi ryhmikseen). Ryhmiä voi olla myös sisäkkäin. Kaikki ryhmittelyt tulevat form-elementin sisälle.

<fieldset>
    <legend>Lisäasetukset</legend>
    <p>
        <label>
            <input tabindex="7" type="checkbox" name="extra" value="Tekstiviesti" />Lähetä myös tekstiviesti
    </label>
    </p>
    <p>
        <label>
            <input tabindex="8" type="checkbox" name="extra" value="Kirje" />Lähetä myös tavallinen kirje
        </label>
    </p>
</fieldset>

fieldset-elementti rajaa ryhmän
legend-elementti määrää ryhmän otsikon

Validoi HTML-tiedostosi ja korjaa mahdolliset virheet.

Lomakkeen muotoilu

Lomake-elementtien ulkoasun muokkaaminen toimii yleensä ottaen aika huonosti, sillä selaimiin on määrätty usein melko kiinteästi, miltä erilaiset kentät näyttävät. Kenttien sijaintia voidaan kuitenkin säätää.

Muokkaa sivun css-tiedostoa esim. Firefoxin editorilla
Lisää fieldset-elementille taustasta poikkeava väri. Värin voit valita myös kuvasta tai paletista ColorZilla-työkalun avulla.
Muuta kaikkiin lomake-elementteihin (input, option, textarea) tasalevyinen kirjasin eli esimerkiksi Courier New ja yleisvaihtoehto monospace.
Määrää erilainen taustaväri toisen fieldset-lohkon sisällä olevalle fieldset-lohkolle.
Tasaa lomake-elementit samalle tasolle vaakasuunnassa. Muuta ensin CSS:ssä label-elementin rivittyminen tekstin tasosta (engl. inline) lohkoksi (engl. block).
Määrää label-elementin leveydeksi 30%.
Liu'uta (float) label-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvät label-elementtien oikealle puolelle.
Estä vielä toisen label-elementin rivittyminen samalle riville toisen label-elementin kanssa. Se onnistuu clear-ominaisuudella.
Lisää myös textarea-elementille clear-ominaisuus, jolloin saat sen rivittymään otsikon alapuolelle. Tee textarea-elementistä vielä lohkotason elementti, niin se rivittyy label-elementin alapuolelle isoillakin näytöillä.
Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.
Testaa lopuksi selaimella, että lomakkeesi näyttää suunnilleen mallikuvan lomaketta vastaavalta.
Validoi CSS-tiedostosi ja korjaa mahdolliset virheet.

Haku omalle sivulle

Googlen avulla on helppoa lisätä haku omalle sivulle. Google ei kovin avoimesti mainosta, että haun voi kohdistaa vain tiettyyn osoitteeseen.

Lisää lomakesivullesi uusi lomake

<form action="http://www.google.com/search" method="get">
<div>
<label for="hakusanat">Hakusanat </label>
<input type="text" size="20" id="hakusanat" name="q" value="" />
<input type="submit" value="Hae" />
</div>
</form>

Lomakkeen action="http://www.google.com/search" viittaa Googlen hakuohjelmaan.
Tekstikentän name="q" viittaa hakusanoihin, jotka välitetään hakuohjelmalle.
Kokeile miten haku toimii.

Rajoitetaan haku vain tiettyyn osoitteeseen. Lisää lomakkeen sisälle vielä lisämääritys:
```
<input type="hidden" name="as_q" value="site:users.jyu.fi/~omatunnuksesi/www/" />
```
- hidden-tyyppistä input-elementtiä ei näytetä sivulla
- as_q-niminen muuttuja lisää muiden hakusanojen lisäksi uuden hakutermin site:users.jyu.fi/~omatunnuksesi/www/.
- site-määreellä voidaan rajoittaa hakua vain tiettyyn WWW-sivuun tai sivustoon. Sivun osoite on tultava heti kaksoispisteen jälkeen.
- Kokeile hakulomakkeen toimintaa. Luultavasti Google ei löydä mitään, koska on erittäin epätodennäköistä, että Google olisi käynyt indeksoimassa demotehtäväsivujasi. Tämä johtuu siitä, että sivuillesi ei ole mistään linkkejä, ja vaikka olisikin, niin hakuroboteilla kestää aikansa ennenkuin ne ehtivät vierailemaan sivuillasi.
- Voit kokeilla lomakkeen toimintaa vaihtamalla haun kohteeksi esim. site:appro.mit.jyu.fi/itkp1011/.
Validoi lopuksi HTML- ja CSS-koodit ja korjaa mahdolliset virheet.

Käyttäjien kommentit