WWW-lomakkeet - Luento 4

• Luentotaltiointi
• Viikkotehtävä 1
• Lomakkeen tekeminen
  • Lähetysmetodit
• Lomake-elementtejä
  • label - kentän otsikko
  • input - text, radio, checkbox, hidden ja submit
  • select - valintalista
  • textarea - tekstikenttä
  • button - yleispainike
  • fieldset ja legend - lomakkeen rakenne

Käsitellään WWW-lomaketekniikoiden nykyisiä mahdollisuuksia ja mahdottomuuksia XHTML-dokumenteissa.

Viikkotehtävä 1

Ensimmäisen viikkotehtävän tilastoja:

• VT1 vaikeustaso
• VT1 mistä opin uutta

Katsellaan seuraavia asioita:

• Palautushakemistoon vain tehtävään liittyvät tiedostot
• Ulkoasu vs. rakenne. Mistä rakenne voidaan päätellä?
• Ei XHTML:ään ulkoasumäärityksiä!
• Välttäkää b-elementtiä.
• Lokaalin sivun selailu, miksi ei näytä hakemistosta sivua?
• Missä samp-elementtiä?
• PNG kaaviokuviin, JPG valokuviin.
• Entiteetit
• Taulukot
• Navigointi link-elementeillä.
• Metatiedon merkitys.
• Dublin Core XHTML:ssä

Lomakkeen tekeminen

Lomakelohko sijoitetaan body-elementin sisään form-elementillä:

<form action="http://palvelin/kasittelijaohjelma" method="metodi">
...
</form>

• action-attribuutti kertoo miten tai millä lomakkeella syötetyt tiedot käsitellään.
• method-attribuutti kertoo tavan, jolla tieto lähetetään käyttäjältä käsittelijälle. Mahdollisia arvoja ovat post ja get.
• Esimerkkejä
  • Luentoesimerkki
  • Yksinkertainen lomake.
  • Lyhyt kysely katselutottumuksista.

Lähetysmetodit

Lomakkeen tietojen lähettämiseen on kaksi erilaista metodia (post ja get), joilla kummallakin on oma käyttökohteensa. Metodien välinen ero huomioidaan lomakkeen tiedot vastaanottavassa ohjelmassa.

post-metodi

• Käytetään silloin, kun ei haluta tietoja URL:n joukkoon tai kun lähetettävä tietomäärä on suuri.
• Käytetään jos lomakkeen tiedoilla pyritään muuttamaan / lisäämään / poistamaan jonkin tietovaraston tietoja

get-metodi

• Lähettää lomakkeen sisällön URL:n mukana.

  http://palvelin/ohjelma.cgi?nimi=Jukka+M%E4ntyl%E4&email=jmantyla@cc.jyu.fi

• Lomakkeen tiedot siis näkyvät osoitteen perässä selainikkunassa.
• Käytetään jos lomakkeella on tarkoitus tehdä haku tai muu toiminto joka ei vaikuta järjestelmän tilaan
• Mahdollistaa kirjanmerkkien tekemisen. esim. googlen haut
• Ei kannata käyttää suurien tietomäärien siirtämiseen koska osoiterivillä on jokin maksimikoko

Lomake-elementtejä

<label for="lempinimi" accesskey="L">
Lempinimi: </label>
<input id="lempinimi" type="text" name="nick"
 maxlength="11" size="20" value="Kutsumanimi"
 title="Anna lempinimi jota käytät palvelussa" />

<label for="salasana">Salasana: </label>
<input id="salasana" type="password"
 name="passwd" value="" />

<label for="kissa">Kissa</label>
<input id="kissa" type="checkbox"
 name="lemmikit" value="kissa"
 checked="checked" /><br />
<label for="koira">Koira</label>
<input id="koira" type="checkbox"
 name="lemmikit" value="koira" />

<label for="mies">Mies</label>
<input id="mies" type="radio"
 name="sukupuoli" value="mies" /><br />
<label for="nainen">Nainen</label>
<input id="nainen" type="radio"
 name="sukupuoli" value="nainen"
 checked="checked" />

<label for="txtalue">Vapaat kommentit:</label>
<textarea id="txtalue" name="kommentti"
 rows="5" cols="20">Sana on vapaa...</textarea>

<select id="ruokapaikat" multiple="multiple"
 size="3" name="ruokap">
<optgroup label="Pizza">
<option value="kotipizza"
 selected="selected">Kotipizza</option>
<option value="rax">Rax</option>
<option value="rosso" >Rosso</option>
</optgroup>
<optgroup label="Burger">
<option value="mcd">McDonald's</option>
<option value="hese"
 selected="selected">Hesburger</option>
</optgroup>
</select>

<fieldset>
<legend>Yleiset tiedot</legend>
</fieldset>

<input type="image" src="laheta.png" name="laheta"
 value="klikattukuvaa" alt="[Lähetä]"
 title="Lähettää lomakkeen tiedot" />

<input type="file" name="siirrettava_tiedosto"
 accept="application/rtf" />

<input type="hidden" name="ohjaus"
 value="lomake082" />

<input type="submit" name="laheta"
 value="Lähetä tiedot" />

<input type="reset" name="tyhjenna"
 value="Tyhjennä lomake" />

label - kentän otsikko

• label toimii lomake-elementtien otsikkokenttänä.
• label yhdistetään for-attribuutilla lomake-elementin id-attribuuttiin.
• Esimerkki label-elementin käytöstä.

input - text, radio, checkbox, hidden ja submit

input-elementin avulla lomakkeelle saadaan toteutettua useita erilaisia lomakekenttiä. Muuttamalla elementin type-attribuutin arvoa saadaan elementistä tehtyä seuraavassa lyhyesti esiteltäviä lomakekenttiä.

• type - attribuutti voi saada seuraavia arvoja:

  type= text | password | checkbox | radio | submit | reset |
         file | hidden | image | button 

  • text - Vapaamuotoinen tekstikenttä.
  • submit - Lomakkeen hyväksymispainike.
  • reset - Lomakkeen tyhjentämiseen tarkoitettu painike.
  • hidden - Piilotettua tietoa varten. Voidaan käyttää esimerkiksi lomakkeen käsittelevän ohjelman ohjaamiseen.
  • radio - Yksivalintainen kontrolli. Kätevä pienissä listoissa.
  • checkbox - Monivalintainen. Kätevä pienissä listoissa.

Muutamia muita input-elementin attribuutteja

• value - yleensä oletusarvo elementille. Valintaruudussa ja -napissa välitettävä arvo.
• name - määrittää elementille nimen.
• size - kertoo elementin pituuden.
• maxlength - kertoo elementin maksimipituuden (text, password).
• checked - kertoo elementin (radio, checkbox) olevan valittu (checked="checked").
• Esimerkki yksinkertaisesta lomakkeesta.
• Esimerkki valintaruudun (engl. checkbox) ja -napin (engl. radiobutton) käytöstä

select - valintalista

select-elementtiä käytetään erilaisten valintalistojen tekemiseen. Valintalistoilla saadaan määriteltyä vaihtoehtoisia valintoja tai pystytään käyttämään useamman asian valitsemiseen. option-elementtien sisälle määritellään valintalistaan liittyvät valinnat. Valintalistajen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:

• Säästävät tilaa esimerkiksi radio- tai checkbox-elementtiin verrattuna.
• Monivalinnan mahdollisuus, mutta monille käyttäjille hieman vaikea (CTRL-näppäin).
• Listan ryhmittelyä kannattaa käyttää selkeyttämään listaa (optgroup).
• Pitkät valintalistat ovat todella huonoja käytettävyyden kannalta.
• Esimerkki valintalistan käytöstä.

Valintalistaan liittyviä attribuutteja

• select-elementin attribuutteja
  • name-attribuutilla annetaan nimi.
  • multiple-attribuuttilla kerrotaan, että aktiiviseksi voidaan valita useampia listan kohtia (multiple="multiple")
  • size-attribuutilla voidaan määritellä valintalistassa yhtäaikaa näytettävien lomakenttien määrä. Jos size on määritelty, niin listaa en näytetä valintalistana, vaan listaa voidaan ainoastaan vierittää.
• option-elementin attribuutteja
  • selected-attribuutilla määritellään oletusvalinta valintalistaan (selected="selected").
  • value-attribuutilla määritellään valinnan antama arvo.
• optgroup-elementin attribuutteja
  • label-attribuutilla (optgroup) määritellään listassa näkyvän ryhmän nimi.

textarea - tekstikenttä

• Vapaamuotoinen tekstikenttä.
• Pelkästään yleisen tiedon kyselyyn.
• Tekstikentän koko voidaan määritellä tarkkaan.
• Esimerkki laajemman tekstikentän käytöstä.

Seuraavassa muutamia textarea-elementin attribuutteja

• name-attribuutilla annetaan nimi.
• rows-attribuutilla määritellään kentässä näkyvien rivien lukumäärä.
• cols-attribuutilla määritellään kentässä näkyvien merkkien lukumäärä.

button - yleispainike

Seuraavassa esimerkissä liitetään submit-painikkeen yhteyteen kuva.

<button name="laheta" type="submit">
<img src="kuva.jpg" alt="Lähetä" />
</button>

fieldset ja legend - lomakkeen rakenne

Lomakkeen rakennetta voidaan selkeyttää fieldset- ja legend-elementtien avulla.

• fieldset-elementillä määritellään lomake-elementit kuulumaan samaan ryhmään.
• Ryhmiä kannattaa miettiä esimerkiksi lomakkeen kysymyksien aihealueen mukaisesti.
• legend-elementillä määritellään lomakeryhmän (fieldset) otsikko.
• Esimerkki ryhmittelyn käytöstä. Ryhmittelyä on käytetty kaikissa edellisissä esimerkeissä.