Lomakkeet

• form
  • form-elementin html-attribuutit
• Lomake-elementit
• datalist
• meter
• output
• progress
• DOM-rajapinta
  • Lomakkeiden käsittely
  • HTMLInputElement
  • <input type="radio" /> ja <input type="checkbox" />
  • HTMLSelectElement
  • HTMLFormElement
• Validointi
  • Validointi heti kentän täyttämisen yhteydessä
  • Koko lomakkeen validointi lomakkeen täyttämisen jälkeen
• Lomakkeiden ulkoasu
• Päivityslomakkeet
  • Versio 0
  • Versio 1
  • Versio 2
  • Versio 3
• Lomake-esimerkkejä
• Lisätietoa

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

• action lomakkeen käsittelevän ohjelman URI-osoite. Ei käytetä tällä kurssilla.
• enctype määrää lomakkeen lähetystietojen MIME-tyypin. Ei tarvita tällä kurssilla
• method määrää HTTP-metodin jolla lomakkeen tiedot lähetetään. Ei tarvita tällä kurssilla.
• autocomplete määrää voidaanko lomakkeen sisältöä täyttää automaattisesti (on) vai ei (off). Selain käyttää aiemmin syötettyjä arvoja lomakkeen täyttämiseen
• novalidate määrää validoidaanko lomakkeen sisältö vai ei. Oletuksena validointi on käytössä. Jos validoinnin poistaa käytöstä niin sen voi kuitenkin erikseen määrätä kutsumalla checkValidity()-metodia, joko koko lomakkeelle tai yksittäiselle kentälle

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

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ä.

Lomake-elementtien ohjelmointirajapintana ovat seuraavat luokat:

• Document.forms
• HTMLFormElement
• HTMLInputElement
• HTMLSelectElement
• HTMLFormElement
• HTMLOptionElement
• HTMLButtonElement
• HTMLDatalistElement
• HTMLLabelElement
• HTMLFieldsetElement
• HTMLLegendElement
• HTMLMeterElement
• HTMLOptgroupElement
• HTMLOutputElement
• HTMLProgressElement
• HTMLTextareaElement
• RadioNodeList

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

• form palauttaa lomakkeen (form), jonka lapsi input-elementti on
• name
• type
• disabled
• autofocus
• required
• value
• validity
• validationMessage
• checked vain jos type on checkbox tai radio
• defaultChecked
• autocomplete
• max
• maxLength
• min
• minLength
• pattern
• placeholder
• readOnly
• size
• defaultValue
• list
• multiple
• step
• valueAsDate
• valueAsNumber
• autocapitalize

Tärkeimpiä metodeja:

• blur()
• click()
• focus()
• select()
• setCustomValidity() asettaa oman virheilmoituksen. Jos tämä on muuta kuin tyhjä merkkijono "" niin elementti on epävalidi.
• checkValidity() Tarkistaa onko elementti validi. Elementti on epävalidi, jos se ei täyty sille asetettuja rajoitteita tai sille on asetettu oma virheilmoitus
• reportValidity() raportoi mahdollisesta virheestä
• stepDown()
• stepUp()

<input type="radio" /> ja <input type="checkbox" />

Radiobuttonit ja myös checkboxit ovat erikoistapaus input-elementistä. Näistä on erityisesti muistettava seuraavien propertyjen toiminta:

• checked lukee tai asettaa elementin valituksi esim. input.checked = true;. Arvo on true tai false
• defaultchecked lukee tai asettaa elementin oletusarvon eli sen mitä lukee HTML-koodissa. Arvo on true/false. Sama asia kuin käyttäisi getAttribute("checked") tai setAttibute("checked"), mutta näiden arvot ovat merkkijonoja.
• indeterminate kertoo onko painike epämääräisessä tilassa eli painike ei ole valittu eikä valitsematta. Tätä harvemmin tarvitaan.

Kts. checked.html

HTMLSelectElement

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

• multiple
• options lista select-elementin sisältämistä option-elementeistä
• selectedIndex
• selectedOptions
• size
• type mahdollisia arvoja ovat "select-one" tai "select-multiple"

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

• item()
• namedItem()
• remove()

HTMLFormElement

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

Ominaisuuksia:

• elements
• length
• name
• method
• action
• enctype
• acceptCharset
• autocomplete
• noValidate

Metodeja:

• checkValidity()
• reportValidity()
• requestSubmit()
• reset()
• submit()

Tapahtumia:

• submit
• reset

Validointi

• Jos lomakkeelle ei ole asetettu novalidate-attribuuttia, niin lomakkeen kentät validoidaan automaattisesti lomaketta lähetettäessä submit-painikkeen click-tapahtuman yhteydessä. Seuraavat ovat submit-painikkeita:

  <button>Painike 1</button>
  <button type="submit">Painike 2</button>
  input type="submit" value="Painike 3" />

  Lomakkeen submit-tapahtuma tapahtuu vasta click-tapahtuman jälkeen, jos kaikki kentät ovat valideja. Vastaavan formnovalidate-attribuutin voi asettaa myös yksittäisille kentille jolloin niitä ei automaattisesti validoida lomaketta lähetettäessä.
• Yksittäiseen kenttään voi lisätä omia tarkistuksia esim. inputja change-tapahtumien yhteyteen. Käytä kuitenkin aina ensisijaisesti HTML-koodissa määriteltyä rajoitteita, jos ne ovat tarkoitukseesi riittäviä.

  Huom. minlength ja maxlength rajoitteisiin liittyvät tarkistukset ja validiteetti päivittyvät vain käyttäjän muutosten yhteydessä. Jos itse muutat kentän value-ominaisuutta, se ei vaikuta näihin tarkistuksiin.

• Oman kustomoidun virheilmoituksen voi asettaa kentän setCustomValidity()-metodilla. Jos virheilmoitusta ei haluta antaa, niin virheilmoitus on asetettava tyhjäksi merkkijonoksi ("") (kentta.setCustomValidity("")). Tyhjä virheilmoitus tarkoittaa, että kenttä on validi.
• Jokaisella kentällä on validity-ominaisuus josta voi tarkistaa onko kenttä validi(validity.valid) tai mitä rajoitetta kenttä mahdollisesti rikkoo (ValidityState)
• Yksittäisen kentän tarkistukset voi suorittaa checkValidity()-metodilla. Epävalidin kentän kohdalla tämä aiheuttaa invalid-tapahtuman. Jos et halua aiheuttaa invalid-tapahtumaa, niin käytä ValidityState.
• Kentän tai koko lomakkeen virheilmoitukset saadaan näkyville kutsumalla joko kentän tai koko lomakkeen reportValidity()-metodia. Samalla laukaistaan myös invalid-tapahtuma epävalideille kentille.
• input-elementillä tapahtuu invalid-tapahtuma, joka tapahtuu checkValidity() tai reportValidity()-kutsun tai lomakkeen submit-tapahtuman yhteydessä, jos kenttä on epävalidi.

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:

• Tarkistetaan kentän mahdollinen virheellinen syöte input- tai change-tapahtumassa. Tällöin kenttä validoidaan heti. Vaihtoehtoisesti voi tehdä validoinnin vasta koko lomakkeelle click- tai submit-tapahtumassa. Huom. muista novalidate-ominaisuuden vaikutus.
  • input-tapahtuma tapahtuu aina, kun elementin sisältö muuttuu. Esim. syöttökentässä jokaisen syötetyn merkin jälkeen
  • change-tapahtuma tapahtuu vasta, kun elementin muutokset kuitataan siirtymällä seuraavaan tms.
  • submit-painikkeen click-tapahtuman jälkeen tapahtuu vielä submit-tapahtuma, jos sitä ei estetä (preventDefault). Jos kyseessä on tavallinen painike (type="button"), niin submitia ei tapahdu. Seuraavista painikkeista tapahtuu vain click-tapahtuma, mutta ei submit-tapahtumaa:

    <button type="button">pelkkä Click-painike</button>
    <input type="button" value="Pelkkä click-painike" />

    Seuraavista painikkeista tapahtuu ensin click-tapahtuma ja sen jälkeen submit-tapahtuma, jos kaikki kentät ovat valideja. Jos lomakkeella on asetettu novalidate-attribuutti, niin submit-tapahtuma tapahtuu aina. Poikkeus: submit-tapahtumaa ei tapahdu, jos click-tapahtumassa kutsutaan preventDefault().

    <button>Submit-painike</button>
    <button type="submit">Submit-painike</button>
    input type="submit" value="Submit-painike" />

  • submit-tapahtuma koskee vain lomaketta ja tapahtuu, jos lomakkeella ei ole virheitä. Poikkeus: lomakkeelle on asetettu novalidate-attribuutti.
• Asetetaan mahdollinen oma virheilmoitus setCustomValidity()-metodilla
• Jos virhettä ei ole, niin asetetaan omaksi virheilmoitukseksi tyhjä merkkijono setCustomValidity()-metodilla eli poistetaan virheilmoitus.
• Kutsutaan kyseisen kentän tai koko lomakkeen reportValidity()-metodia, joka aiheuttaa mahdollisen virheilmoituksen esittämisen käyttäjälle

Validointi heti kentän täyttämisen yhteydessä

1. Tarkistetaan kentän mahdollinen virheellinen syöte input- tai change-tapahtumassa.
2. • Tehdään omat javascript-tarkistukset.
   • checkValidity()-kutsulla voidaan tarkistaa rikkooko kenttä jotain rajoitteitaan.
   • Jos rajoitteita on rikottu, tapahtuu myös invalid-tapahtuma.
   • ValidityState-ominaisuudesta voi tarkistaa mitä rajoitteita kenttä rikkoo.
   • Asetetaan mahdollinen oma virheilmoitus setCustomValidity()-metodilla.
3. Jos virhettä ei ole, niin poistetaan mahdollinen aiempi virheilmoitus asettamalla virheilmoitukseksi tyhjä merkkijono setCustomValidity()-metodilla
4. Kutsutaan kyseisen kentän reportValidity()-metodia, joka aiheuttaa mahdollisen virheilmoituksen esittämisen käyttäjälle. Tämä esittää myös HTML5-lomake-elementtien attribuuteissa määriteltyihin rajoituksiin liittyvät virheilmoitukset. Aiheuttaa tarvittaessa myös invalid-tapahtuman eli toimii kuten checkValidity(), mutta myös näyttää virheilmoitukset.
5. Virheellisten kenttien ulkoasua voidaan muokata :invalid ja valid-valitsimien avulla
6. Lomake hyväksytään ja submit-tapahtuma sallitaan vasta, kun kaikissa kentissä on validi sisältö.

   Kaikkia virheitä ei pysty tarkistamaan heti kentän täyttämisen yhteydessä. Osan voi ehkä tarkistaa vasta koko lomakkeen täyttämisen jälkeen. Painikkeen click-tapahtumassa voi käsitellä näitä virhetarkistuksia, koska se tapahtuu aina. submit-tapahtumassa ei voi poistaa omia virheilmoituksia, koska submit-tapahtuma ei tapahdu virheitä esiintyessä. Poikkeus: submit-tapahtuma tapahtuu aina, jos lomakkeelle on asetettu novalidate-attribuutti.

Koko lomakkeen validointi lomakkeen täyttämisen jälkeen

1. Onko lomakkeelle asetettu novalidate-attribuutti? Jos on, voidaan virhetarkistukset tehdä submit-tapahtumassa. Jos ei ole, on käytettävä esim. painikkeen click-tapahtumaa
2. Tarkistuslogiikka on sama kuin edellä

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 ulkoasu

Kertaa Asemointi CSS:n avulla.

Päivityslomakkeet

Seuraavassa on neljä eritasoista esimerkkiä joissa päivitetään yksinkertaista tietorakennetta ja esitetään sivulla tietorakenteen sisältö.

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

muokkaus 0 + live-editori

Käynnistä sovellus run-painikkeella:

Versio 1

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

muokkaus 1 + live-editori

Käynnistä sovellus run-painikkeella:

Versio 2

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

muokkaus 2

muokkaus 2 + live-editori

Käynnistä sovellus run-painikkeella:

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.

Tämä ei ole millään tavalla parempi versio kuin edellinen versio ellei ihan oikeasti ole tarve dynaamiseen laajenemiseen. Edellinen versio on yksinkertaisempi ja aivan riittävä, jos rakenne on tiedossa.

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

• Form data validation
• Constraint validation
• reportValidity()
• HTML forms
• Form data validation
• Styling HTML forms
• Advanced styling for HTML forms
• :valid
• :invalid
• Constraint Validation API