Lomakkeet

Lomakkeet muodostavat merkittävän tavan käyttäjälle olla yhteydessä verkkosivun kanssa. Lomakkeita on monen kokoisia eli esimerkiksi palvelun sisäänkirjautuminen tai hakupalkki ovat lomakkeita siinä missä jokin laaja ilmottautumislomake on lomake.

Toimivan lomakkeen periaatteet

Kaikki lomakkeen sisältö tulee form-tagin sisälle. Tämä on tärkeää lomakkeen käsittelyn vuoksi, sillä yleensä tagin sisään annetaan ohjeet siitä, miten saatu tieto käsitellään (tätä harjoitellaan myöhemmin JavaScriptin ja PHP:n kanssa). Sen sisällä on lisäksi joukko erilaisia elementtejä, joilla kerätään tietoja käyttäjältä.

Yleisin on input. Se on yksinkertainen tekstikenttä, jolle voi kuitenkin antaa ominaisuuksia, jotka muuttavat sitä tarpeeseen sopivaksi antamalla sille tyyppi.

Suurempi tekstikenttä pidemmille teksteille on textarea.

select on pudotusvalikko, josta voi valita haluamansa vaihtoehdon.

Lisäksi hyvällä lomakkeella pitää olla jokin tapa lähettää tiedot, usemmiten jokin nappi. Suuremmissa lomakkeissa voi olla myös hyvä olla tapa tyhjentää lomake tai peruuttaa koko lomakkeen täyttäminen.

Input ja sen tyypit

input on tag, jota käytetään kaikkein eniten lomakkeiden kanssa. Jokaiselle elementille annetaan myöhempää käsittelyä varten name-atribuutti, joka kuvaa kyseistä kenttää.

inputille annetaan myös jokin tyyppi. Jos haluamme sen olevan yksinkertainen tekstikenttä vaikka hakusanalle, sen tyypiksi annetaan text. Usein myös nappi on input, jonka tyyppi on submit eli tietojen lähetys.

<form>
    <input type="text" name="search">
    <input type="submit" name="submit"> Search
</form>

inputin tyyppi voi olla myös number. Tällöin kentän vierelle tulee palkki, josta voi naputella numeroa suuremmaksi tai pienemmäksi, mutta siihen voi myös kirjoittaa. Sille voi antaa myös minimi- ja maksimiarvot. Kannattaa huomioda, että vaikka arvot näyttävät numeroilta, kun lomake lähetetään ne ovat kuitenkin merkkijonoja eli niillä ei voi suorittaa laskutoimituksia ilman tyyppimuunnosta.

<form>
    <input type="number" name="participants" min="1" max="10" > Number of participants
</form>

inputin tyyppi voi olla email, jolloin selain odottaa, että syöte on muodoltaan sähköpostiosoite.

inputin tyyppi voi olla myös password, jolloin kirjoitettu teksti on automaattisesti piilossa, jotta ulkopuoliset tahot eivät näkisi, mikä salasana on.

inputin tyyppi voi olla myös checkbox. Silloin annetun tekstin eteen luodaan pieni laatikko, jonka voi valita. Silloin tarvitaan myös value, joka lähetetään käsiteltäväksi, mikäli laatikko on valittu.

      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>

Jos haluaa, että checkbox on valmiiksi merkattu, käytetään atribuuttia checked.

      <form>
         <input type = "checkbox" name = "maths" value = "on" checked> Maths
      </form>

Jos haluaa tehdä lomakkeeseen monivalinta napin, silloin useampaan input-elementtiin laitetaan tyypiksi radio ja niille laitetaan sama nimi. Tällöin käyttäjä pystyy valitsemaan niistä vain yhden. value on silloin se, joka erottaa lomakkeen käsittelyssä, mikä monivalinnan tulos oli eli niiden on oltava eri.

      <form>
         <input type = "radio" name = "transport" value = "walking"> By foot
         <input type = "radio" name = "transport" value = "public"> By public transport
      </form>

input voi olla myös tiedostojen lähettämistä varten. Silloin sen tyyppi on file. Se tarvitsee lisäksi tiedon siitä, minkä tyyppisiä tiedostoja serveri hyväksyy, mikä tehdään accept-atribuutilla. Vaihtoehtoina on esimerkiksi “video/*”, “image/*”, “audio/*” tai jokin tarkempi tiedostopääte kuten “.docx”. Vaihtoehtoja voi lisätä laittamalla niiden väliin pilkun.

<form>
    <input type="file" name="poster" accept="image/png, image/jpeg" />
</form>

date inputin tyyppinä avaa päiväyksenvalintaikkunan.

inputilla on vielä muutamia mahdollisia tyyppejä, jotka votte käydä katsomassa wwwschoolsista.

Textarea

textarea on suurempi tekstikenttä, jonka ainoa tyyppi on teksti, joten sille ei yleensä erikseen anneta tyyppiä. Sen sijaan sille usein määritellään koko pystyriveinä (cols) ja vaakariveinä (rows).

<form>
    <textarea name="description" cols="50" rows="8"></textarea>
</form>

Select

selectillä voi tehdä alasvetovalikon, jossa on vaihtoehtoja käyttäjälle. Sen sisään vaihtoehdot lisätään option-tagillä.

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Napit (button)

input muuttuu napiksi, kun sen tyyppi on joko submit, button, reset tai image. submit on nimensä mukaan tietojen lähetysnappi. reset toimii automaattisesti tietojen tyhjentämiseen. buttonille voi antaa omat arvonsa. image on kuvallinen nappi, jolle voi antaa omat arvot.

Lomakkeessa voi käyttää myös tagia <button>, mutta silloin joutuu kirjoittamaan pikkuisen enemmän koodia.

Esimerkissä luodaan inputista nappi, joka luo alert-ikkunan, jossa lukee “Hello World!”. Napissa lukee “Click Me!”

<form>
    <input type="button" onclick="alert('Hello World!')" value="Click Me!">
</form>

Label

Lomakkeessa label-tagia voi käyttää antamaan kuvaus jollekin inputille, textarealle tai selectille. Periaatteessa sen voi tehdä myös kirjoittamalla haluttu teksti ennen tai jälkeen halutun alueen, mutta se ei toimi hyvin ruudunlukijoiden kanssa eli on semanttisesti huono tapa.

Kun jokin input halutaan liittää labeliin, täytyy inputiin lisätä id-atribuutti. Sen lisäksi labelissa pitää olla sitä vastaava for-atribuutti.

<form>
    <label for="username">Username: </label>
    <input id="username" name="username" type="text">
</form>

Lopputulos näyttää siis tältä:

Muita atribuutteja

inputille voi monissa tilanteissa laittaa muitakin atribuutteja, joista tärkeimmät esitellään tässä.

Tärkeä atribuutti on required eli pakollinen. Jos tämä on lisätty input-elementtiin, lomaketta ei voi lähettää, jos kyseiseen inputiin ei ole kirjoitettu mitään.

disabled tarkoittaa, että kenttä ei ole aktiivinen eikä siihen voi kirjoittaa mitään. Useimmiten tämä on säädetty jollakin ohjelmointikielellä kuten Javascript tai PHP.

size määrittää inputin koon merkkimääräisenä.

maxlength ja minlength määrittävät syötteen maksimi- ja minimipituudet.

multiple tarkoittaa, että on mahdollista antaa useampi syötä. Se toimii vain email ja file -tyyppien kanssa.

placeholder on nimensä mukaan teksti tai arvo, joka on laitettu kenttään ja jonka tilalle voi kirjoittaa.

autofocus tarkoittaa, että kun sivu ladataan, on kyseinen kenttä automaattisesti fokusoitu ja siihen voi alkaa kirjoittaa suoraan.

autocomplete tarkoittaa, että selain ehdottaa syötettä perustuen aikaisempiin syötteisiin.

Demotehtävä

1. Luo uusi HTML-tiedosto. Luo siihen ilmoittautumislomake tapahtumaa varten.
2. Lomake kysyy nimeä, sähköpostia ja puhelinnumeroa.
3. Lomakkeella voi valita päivämäärän, jolloin hän haluaa tulla tapahtumaan.
4. Lomakkeella on monivalinta, jossa kysytään, yöpyykö käyttäjä tapahtumapaikalla, yöpyykö hän jossain muualla tai onko hän vain päiväkäynnillä.
5. Lomakkeella on tekstialue, johon käyttäjä voi kirjoittaa ruoka-aineallergiansa.
6. Lomakkeella on alasvetovalikko, josta käyttäjä voi valita neljästä ruoka-annoksesta mieluisensa.
7. Lomakkeella on valinta, jossa käyttäjä voi valita, tarvitseeko hän aamupalan.
8. Nimi ja puhelinnumero ovat pakollisia tietoja.
9. Lomakkeella on napit, joilla lomakkeen voi tyhjentää ja jolla lomakkeen voi lähettää.