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

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

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

input

input-elementin tärkein attribuutti on type, joka määrää millainen kenttä on kyseessä:

input-elementin eri attribuuttien ominaisuudet kannattaa tarkistaa MDN:n dokumentaatiosta. Tässä on lyhyt listaus tämän kurssin kannalta tärkeimmistä:

button

Painike, joka voi sisältää mitä tahansa. Input-elementille voi asettaa myös tyypiksi submit jolloin luodaan peruspainike lomakkeen lähettämistä varten.

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.

meter

Havainnollistaa jonkin luvun suuruuttaa tietyllä välillä.

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

output

Esittää jonkin laskennan tai toiminnan tuloksen.

progress

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

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

DOM-rajapinta

Älä sotke edellä mainittuja attribuutteja DOM-rajapintaan. Aiemmat ovat HTML-attribuutteja. Ohjelmointirajapinta on eri:

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:

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

Lisätietoa

Lisätietoa

Käyttäjien kommentit

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