Lomakkeet

Käsitellään HTML5-lomakkeiden luomista ja lomakekenttien syötteiden rajoitteita (tarkistuksia). Jos lomakkeet eivät ole tuttuja niin katso ensin WWW-lomakkeet-materiaali ja The native form widgets.

Esimerkki 1

form

Lomake-elementtejä voi käyttää myös ilman form-elementtiä mutta yleensä ne on syytä sijoittaa form-elementin sisään. Käydään seuraavaksi läpi ne form-elementin ominaisuudet, jotka ovat olennaisia selaimessa suoritettavien toimenpiteiden kannalta.

form-elementin html-attribuutit

Lomake-elementit

Yleisimmät lomakkeissa käytetyt elementit on käsitelty ITKP1011-kurssin WWW-lomakkeet-luennolla.

Dynaaminen lomake Lisää ja poistaa syöttökenttiä tarpeen mukaan

datalist

Sisältää option-elementtejä (kts. Select-elementti). Datalistiin voidaan viitata input-elementistä jolloin datalistin sisältöä käytetään ehdotuksena inputin sisällöksi.

<input name="luvut" type="text" value="30" list="lukuja" pattern="10|20|30|40" />
<datalist id="lukuja">
  <option value="10" label="10">
  <option value="20" label="20">
  <option value="30" label="30">
  <option value="40" label="40">
</datalist>

meter

Havainnollistaa jonkin luvun suuruutta tietyllä välillä.

Lämmitä uuni <meter min="100" max="250"
  value="200">200 asteeseen</meter>

output

Esittää jonkin laskennan tai toiminnan tuloksen.

<input type="number" name="luku1" value="10" />
  <input type="number" name="luku2" value="20" />
<output>30</output>

progress

Esittää jonkin tehtävän etenemistä, progress bar.

<progress value="70" max="100">70 %</progress>

Esimerkki 2

DOM-rajapinta

Lomake-elementtien ohjelmointirajapintana ovat seuraavat luokat:

Esimerkki

HTMLInputElement

HTMLInputElement-rajapinnan tärkeimmät ominaisuudet ovat seuraavat. Huomaa, että useimmat viittaavat suoraan vastaaviin HTML-attribuutteihin. Tarkista näiden määritelmät MDN:n HTMLInputElement-sivulta

Tärkeimpiä metodeja:

HTMLSelectElement

HTMLSelectElement-rajapinta sisältää paljon samoja ominaisuuksia kuin HTMLInputElement. Tarkista ominaisuudet MDN:n HTMLSelectElement-sivulta Tärkeimmät ominaisuudet ovat seuraavat:

Tärkeimpiä metodeja, jotka eivät ole samoja kuin HTMLInputElementillä:

HTMLFormElement

HTMLFormElement-rajapinta sisältää seuraavia asioita. Tarkista ominaisuudet MDN:n HTMLFormElement-sivulta

Ominaisuuksia:

Metodeja:

Tapahtumia:

Validointi

Chrome esittää oman virheilmoituksen hieman eri tavalla kuin esim. Firefox. Chrome näyttää aina kentän yhteydessä yleisen virheilmoituksensa, joka riippuu kentän tyypistä. Oma kustomoitu virheilmoitus näkyy Chromella vasta, kun koko lomake validoidaan eli joko yritetään lähettää lomake (submit) tai koodissa kutsutaan joko koko lomakkeelle tai kyseiselle kentälle reportValidity()-metodia. Firefox korvaa oman yleisen virheilmoituksensa kustomoidulla ilmoituksella jo myös ilman reportValidity()-kutsua. Chrome taasen esittää kustomoidun virheilmoituksen eri tavalla kuin vakiot. Jos kutsuu reportValidity()-metodia koko lomakkeelle niin silloin oma virheilmoitus näkyy Chromella vain ensimmäisessä virheellisessä kentässä.

Kannattaa siis toimia yleensä seuraavasti:

Esimerkki 1

esimerkki 2 (lomake.js) esittelee click- ja submit-tapahtumien toimintaa eri tilanteissa.

Sama esimerkki kuin edellä, mutta interaktiivinen versio. Suorita run-painikkeella.

Lomakkeiden käsittely

Sivun kaikkiin lomakkeisiin pääsee käsiksi suoraan document.forms-objektin kautta. Esim. sivun ensimmäinen lomake on aina document.forms[0]. Jos lomakkeelle on annettu id-attribuutissa arvo "lomake", niin voi käyttää myös muotoja
document.forms.lomake
document.forms["lomake"]
<form action="">
<label><input id="eka" type="text" value="1" /></label>
<label><input id="toka" type="text" value="2" /></label>
<label><input id="reportValidity" type="text" value="3" /></label>
</form>

Samaan tapaan pääsee käsiksi kaikkiin lomakkeen sisältämiin lomake-elementteihin. Esim. document.forms.lomake[0] palauttaisi ensimmäisen input-elementin, jonka id on eka. document.forms.eka palauttaisi saman inputin mutta kolmannen inputin id-arvo onkin reportValidity, joka on sama kuin lomake-elementissa normaalisti olevan metodin nimi! Nyt jos yrittää kutsua:

document.forms.lomake.reportValidity();

niin saakin virheilmoituksen, että tämä ei ole funktio... Ei ole funktio, koska se onkin nyt input-elementti. Älä siis käytä lomake-elementtien id-arvoina olemassa olevien metodien nimiä.

Lomakkeiden ulkoasu

Päivityslomakkeet

Seuraavassa on neljä eritasoista esimerkkiä joissa päivitetään yksinkertaista tietorakennetta ja esitetään sivulla tietorakenteen sisältö. Kunkin esimerkin javascript-koodi on suoraan html-koodin seassa. Jos haluaa itse näitä sorkkia ja kokeilla niin riittää, että kopioitte html-sivun lähdekoodin itsellenne.

Versio 0

Tässä esimerkissä ongelmana on muutosten päivittäminen suoraan tietorakenteeseen. Mitä jos kämmää ja kirjoittaa jotain väärin? Ei ole mitään mahdollisuutta perua vaan muutos on heti peruuttamaton. Parempi ratkaisu olisi muokata kopiota ja päivittää tietorakenteeseen vasta kun klikataan tallenna muutokset -painiketta. Tästä näkee kuitenkin miten objektien viitteitä voi käyttää. Viitteiden avulla on pidetty tietorakenteen ja DOM-puun käsittelyt minimissä:

muokkaus 0

Versio 1

Sama kuin edellä, mutta tehdään muokkaaminen kopion kautta. Päivitetään tietorakenne vasta kun on painettu tallenna muutokset -painiketta

muokkaus 1

Versio 2

Sama kuin edellä, mutta tietorakennetta on monimutkaistettu lisäämällä siihen yksinkertainen taulukko. Tämä vastaa viikkotehtävän tilannetta jossa lisättiin joukkueeseen jäseniä. Useimpien ratkaisuista poiketen tässä käytetään uudelleen samoja input-kenttiä eikä siis aina luoda lomaketta kokonaan uudelleen.

muokkaus 2

Versio 3

Tämä on täysin dynaaminen versio eli koodiin ei ole hardkoodattu mitään tietorakenteen avaimia. Rakenteeseen voi nyt suoraan lisätä uusia taulukoita tai merkkijonotyyppisiä tietoja. Muita tietotyyppejä ei ole huomioitu. Tässä ei myöskään pärjätä ihan pelkän viitteen avulla vaan päivitys tehdään taulukon indeksin perusteella, koska se onkin yllättäen tässä tilanteessa yksinkertaisin vaihtoehto. Viitettä käyttäessä täytyisi erikseen päivittää kaikki objektin ominaisuudet, mutta indeksin avulla voidaan suoraan vaihtaa taulukossa oleva alkio viittaamaan muokkauksessa käytettyyn kopioon.

muokkaus 3

Harjoitustehtävänä voi miettiä miten muuttaisi näitä, jos haluttaisiin mahdollistaa uusien tietojen lisääminen. Nämä osaavat nyt vasta muokata, mutta lisääminen ei onnistu.

Lomake-esimerkkejä

Tarkemmin lomakkeiden ohjelmallinen käsittely selviää esimerkistä. Kts. esimerkin lähdekoodi.

Toinen esimerkki (lomake.js) esittelee click- ja submit-tapahtumien toimintaa eri tilanteissa.

Lomakkeen asemointi CSS:llä (css.css).

dynaaminen lomake (dynaaminen.js) Dynaaminen lomake osaa lisätä ja poistaa syöttökenttiä tarpeen mukaan.

Lisätietoa

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
https://appro.mit.jyu.fi/tiea2120/luennot/forms/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <https://hazor.iki.fi/>
2020-10-22 15:00:24
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta