Huomaathan, että KAIKKI lomake-elementit tulee aina sijoittaa tällä sivulla ensimmäisenä esitellyn form-elementin sisään.
Kyseessä olevan elementin pakolliset attribuutit ja sisäelementit on sisällysluettelossa merkitty huutomerkillä !.
Form on tagi, jolla lomake aloitetaan ja päätellään. Kaikki muu lomakesisältö tulee form-tagien sisälle.
<form> LOMAKKEEN SISÄLTÖ– TÄHÄN </form>
Tämä attribuutti on form-elementissä pakollinen.
Action-attribuutti kertoo, minne lomake lähetetään. Jos haluat esimerkiksi lomakkeen tiedot sähköpostiisi, action-kohtaan laitetaan lomakkeenkäsittelijän osoite. Lomakkeenkäsittelijä voi olla esimerkiksi pieni php- tai cgi-scripti, joka lähettää tiedot sähköpostiisi. Se voi sijaita myös muilla palvelimilla, ja ilmaisia lomakkeenkäsittelijöitä tarjoavia palveluita onkin netissä useita myös suomeksi.
Actionin arvo voi olla myös mailto:sähköpostiosoite, jolloin lomakkeen tiedot lähetetään sähköpostiohjelmalla (esim. Outlook Express, Mozilla Thunderbird) vastaanottajan sähköpostiin. Mikäli lomakkeen lähettäjä ei käytä mitään sähköpostiohjelmaa, lomaketta ei voi lähettää.
<form action="lomakkeenkasittelija.php">
LOMAKKEEN SISÄLTÖ– TÄHÄN
</form>
<form action="mailto:matti.meikalainen@esimerkki.esim">
LOMAKKEEN SISÄLTÖ– TÄHÄN
</form>
Tämä attribuutti on form-elementissä pakollinen.
Method-attribuutti kertoo, lähetetäänkö lomakkeen tiedot url-muodossa (get) vai käyttäjältä piilossa (post).
<form action="lomakkeenkasittelija.php" method="post">
LOMAKKEEN SISÄLTÖ– TÄHÄN
</form>
Accept-attribuutti ilmoittaa, minkätyyppisiä tiedostoja (png-kuvia, gif-kuvia, html-sivua, css:ää...) lomakkeella voi lähettää. Hyväksytyt tyypit erotetaan toisistaan pilkulla.
Usein kysytyt kysymykset: Mime-tyyppi
Accept-charset-attribuutti ilmoittaa ne merkistöt, joita lomakkeenkäsittelijä hyväksyy. Eri merkistöt erotetaan toisistaan pilkulla.
Accept-charset ei ole kovin yleisesti käytössä.
Enctype-attribuutilla määritellään, miten lomakkeella lähetetyt tiedot koodataan. Enctype määritellään lähinnä silloin, kun lomakkeella on tarkoitus lähettää kuvia tai muita tiedostoja.
Attribuutin arvo on yleensä multipart/form-data, kun halutaan lähettää tiedostoja. Oletuksena se on application/x-www-form-urlencoded (sopii mm. teksteille).
Input on lomake-elementti, jota voi käyttää moneen käyttötarkoitukseen sen mukaan, mitkä asetukset elementille on säädetty. Inputin avulla voi luoda esimerkiksi lähetysnappeja, salasanakenttiä, yksirivisiä tekstikenttiä ja valintaruutuja.
Tämä attribuutti on input-elementissä pakollinen.
Type on inputiin upotettava attribuutti, joka määrää, mihin tarkoitukseen inputia käytetään.
<input type="TYPE TÄHÄN" />
Alla on esimerkit mahdollisista arvoista:
| Type | Mikä? | Esimerkki kentästä |
|---|---|---|
| Text | Tavallinen tekstikenttä | |
| Password | Salasanakenttä | |
| Hidden | Piilotettu tekstikenttä | |
| File | Tiedoston lähettävä kenttä (lähetettävä tiedosto valitaan omalta koneelta) | |
| Submit | Nappi (lähettää lomakkeen) | |
| Reset | Nappi (tyhjää lomakkeen) | |
| Button | Nappi | |
| Image | Kuvanappi (kuvan osoite ilmoitetaan attribuutilla src) | |
| Checkbox | Valittava kohta (useampia kohtia on mahdollista valita) |
|
| Radio | Valittava kohta (vain yhden kohdan voi valita) |
Kahdessa viimeisessä esimerkkikohdassa on kaksi esimerkki-inputia (valittavat kohdat).
Mikäli käytät radio-tyyppisiä input-kenttiä ja haluat, että lomakkeen kohdista voi ruksia vain yhden (kuten esimerkkitaulukossa yllä), sinun on annettava ruksittaville kohdille sama nimi. Muuten kaikki kohdat voi ruksia, sillä selain ei osaa yhdistää niitä mitenkään toisiinsa. Tällöin se käsittää ne kokonaan eri kohdiksi eikä saman kysymyksen eri vaihtoehdoiksi.
Kenttien nimeäminen onnistuu name-attribuutin avulla.
<input name="KENTÄN NIMI TÄHÄN" type="radio" /> <input name="KENTÄN NIMI TÄHÄN" type="radio" />
Vertaa itse:
Myös checkbox-tyypin inputeissa name kannattaa sisällyttää mukaan, sillä se yhdistää valittavat arvot samaan ryhmään. Lisätietoa nimistä (name) saat alempaa tältä sivulta, ks. sisällysluettelo.
Lomakkeen checkbox- ja radio-tyypin input-kentät voi merkitä valmiiksi valituiksi attribuutilla checked.
Esimerkiksi:
<input type="radio" checked="checked" />
Value-attribuutin sisällä on teksti, joka näkyy kentässä valmiiksi. Jos laitamme esimerkiksi tavalliselle teksti-inputkentälle valuen arvoksi "minä täällä hei", tulos näyttää tältä:
Ylläolevan kentän lähdekoodi näyttää tältä:
<input type="text" value="minä täällä hei" />
Hoks! Checkbox- ja radio -tyyppisiä inputteja käytettäessä on tärkeää, että määrität niille sisällön arvon (value-attribuutti). Valuesta on enemmän asiaa alempana tällä sivulla, ks. sisällysluettelo.
Kun ruksit jonkin kohdan ja lähetät lomakkeen esimerkiksi sähköpostiisi, tiedoissa lukee jotain tämän suuntaista:
Kentän_arvo_tässä: checked
Jos et ole määrittänyt kentälle arvoa, et tiedä, minkä kentän lomakkeen lähettäjä on valinnut.
Tämä attribuutti on input-elementissä pakollinen.
Input-kentässä size-attribuutti kertoo, kuinka leveä kyseinen lomake-elementti on. Mikäli kenttä on tekstityyppiä (text, password jne.), leveys merkitään kirjaimina. Mikäli kenttä on radio- tai checkbox-tyyppiä, leveys tarkoittaa pikseleitä.
<input type="text" size="20" />
Tekstikenttä (engl. textarea) on kenttä, johon voi kirjoittaa tekstiä. Rivinvaihdot ovat sallittuja, ja tarvitessa kentän viereen ilmaantuu vierityspalkki. Tekstikentässä mahdollisesti valmiina lukeva teksti kirjoitetaan textarea-tagien väliin.
<textarea>Tämä on tekstikenttä</textarea>
Yllä esitetty kenttä näyttää käytössä tältä:
Tämä attribuutti on tekstikentässä pakollinen.
Tekstikentässä rows-attribuutti ilmoittaa tekstikentän korkeuden riveissä (huomaa että esim. Mozilla Firefox ja Internet Explorer tulkkaavat tätä eri tavalla). Cols-attribuutti puolestaan kertoo, kuinka monta kirjainta tekstikenttä on leveä.
<textarea rows="2" cols="10">
Tämä on tekstikenttä
</textarea>
Valikko eli dropdown on yksirivinen lomakkeen osa, jota klikkaamalla avautuu alaspäin vierivä valikko. Valikosta voi valita vain yhden kohdan kerrallaan.
Valikko aloitetaan select-tagilla.
<select>
</select>
Select-tagin sisälle lisätään halutut vaihtoehdot option-tagien väliin. Yksi vaihtoehto on aina yksien option-tagien välissä.
Select-tagien sisällä on oltava vähintään yksi option-elementti. Muuten valikko ei toimi.
<select>
<option>Vaihtoehto 1</option>
<option>Vaihtoehto 2</option>
<option>Vaihtoehto 3</option>
</select>
Yllä esitetty valikko näyttää käytössä tältä:
Valikon vaihtoehtoja voi ryhmitellä vielä tarkemmin optgroup-elementin avulla. Halutut option-kohdat lisätään optgroup-tagien väliin:
<select> <optgroup> <option>Vaihtoehto 1</option> <option>Vaihtoehto 2</option> </optgroup> <optgroup> <option>Vaihtoehto 3</option> <option>Vaihtoehto 4</option> </optgroup> </select>
Ryhmien nimet ilmaistaan label-attribuutilla:
<select> <optgroup label="Yksi"> <option>Vaihtoehto 1</option> <option>Vaihtoehto 2</option> </optgroup> <optgroup label="Kaksi"> <option>Vaihtoehto 3</option> <option>Vaihtoehto 4</option> </optgroup> </select>
Yllä esitelty lomake valikko näyttää käytössä tältä:
Dropdownissa size kertoo, kuinka monta riviä valikko on korkea.
<select size="3">
<option>Vaihtoehto 1</option>
<option>Vaihtoehto 2</option>
<option>Vaihtoehto 3</option>
<option>Vaihtoehto 4</option>
<option>Vaihtoehto 5</option>
</select>
Multiple-attribuutilla voidaan määrittää valikko sellaiseksi, että siitä voi valita useampia kohtia (valitessa näppäimistön Ctrl-näppäimen tulee olla pohjassa).
<select size="3" multiple="multiple">
<option>Vaihtoehto 1</option>
<option>Vaihtoehto 2</option>
<option>Vaihtoehto 3</option>
<option>Vaihtoehto 4</option>
<option>Vaihtoehto 5</option>
</select>
Dropdown-valikosta on mahdollista myös linkittää siten, että kun jokin valikon kohta valitaan, päädytään johonkin tiettyyn osoitteeseen. Tämä on kuitenkin javascript-koodia. Katso javascript-osio.
Button on nimensä mukaisesti nappi, painike, mutta se poikkeaa input-elementillä toteutetusta painikkeesta siten, että sillä on aloitus- ja loptustagit. Buttonin sisälle voi vaikka kirjoittaa tekstiä tai laittaa kuvan.
Buttonia voidaan tyypillisesti käyttää lomakkeen lähettämiseen tai tyhjentämiseen. Elementillä voikin olla tyyppinä vain submit, reset tai button.
<button type="submit"> <img src="hymy.png" alt="Painike" /> </button>
Label on elementti, jonka avulla voi yhdistää selitteitä eri lomakkeen elementeille. Tämä helpottaa sivujen käytettävyyttä.
Selite sijoitetaan label-tagien väliin. For-tagin sisään kirjoitetaan sen elementin id, johon selite yhdistetään.
<label for="salasana">Syötä salasanasi:</label>
Label sijoitetaan ennen selitettävää elementtiä:
<label for="nimi">Nimi:</label> <input type="text" size="20" id="nimi" /> <label for="salasana">Syötä salasanasi:</label> <input type="password" size="10" id="salasana" />
Yllä esitelty lomake näyttää käytössä tältä:
Accesskey-attribuutin avulla voidaan määritellä tietylle lomakekohdalle pikanäppäin. Painamalla accesskeyssä määritettyä pikanäppäintä (Internet Explorerissa alt + määritetty näppäin, muissa selaimissa ei tietoa) päätyy siis sen lomakkeen kohdalle, johon accesskeyn sisältävä label viittaa.
<label for="nimi" accesskey="n">Nimi:</label> <input type="text" size="20" id="nimi" /> <label for="salasana" accesskey="s">Syötä salasanasi:</label> <input type="password" size="10" id="salasana" />
Fieldsetin avulla lomakkeen kohtia voidaan ryhmitellä sopiviksi ryhmiksi. Esimerkiksi käyttäjätiedot ja käytettävät asetukset voi erotella toisistaan.
<fieldset> <label for="kayttajatunnus">Käyttäjätunnus:</label> <input type="text" name="kayttajatunnus" id="kayttajatunnus" size="20" /> <label for="salasana8">Salasana:</label> <input type="password" name="salasana" id="salasana8" size="10" /> </fieldset> <fieldset> <label for="allekirjoitus">Allekirjoitus:</label> <input type="text" name="allekirjoitus" id="allekirjoitus" size="40" /> </fieldset>
Ryhmien otsikot merkitään kirjoittamalle ne legend-tagien väliin.
<fieldset> <legend>Käyttäjätiedot</legend> <label for="kayttajatunnus">Käyttäjätunnus:</label> <input type="text" name="kayttajatunnus" id="kayttajatunnus" size="20" /> <label for="salasana8">Salasana:</label> <input type="password" name="salasana" id="salasana8" size="10" /> </fieldset> <fieldset> <legend>Asetukset</legend> <label for="allekirjoitus">Allekirjoitus:</label> <input type="text" name="allekirjoitus" id="allekirjoitus" size="40" /> </fieldset>
Yllä esitetty lomake käytännössä:
Name on attribuutti, joka kertoo, minkä niminen kenttä on. Mikäli lomake lähetetään esimerkiksi sähköpostiisi, näkyvät lomakkeen tiedot muodossa kentän nimi: kentän sisältö. Tässä kentän nimi on namen arvo (name="SISÄLTÖ TÄSSÄ").
Name eli nimi myös erottaa - tai tarvittaessa liittää - radio- tai checbox -tyyppiset ruksittavat kohdat toisiinsa. Namen ansiosta radio-tyypin kohdista ei voi valita kuin yhden (asiasta enemmän ylempänä tällä sivulla).
Namen eli nimen voi määrittää mille tahansa lomakkeen osalle.
Javascriptin avulla voi toteuttaa lomakkeen, jossa valmiina lukevat tekstit katoavat, kun lomaketta alkaa täyttää itse. Tämä täytyy kuitenkin toteuttaa javascriptillä.