Input-tagi
input-tagi luo erilaisia
HTML-lomakkeen elementtejä: tavallisen syöttökentän,
salasanakentän, valintaruudun (checkbox),
radiopainikkeet, painikkeen.
input-tagin tulee sijaita
form-tagin sisällä.
Tämä ei ole pakollista, mutta välttämätöntä tietojen
lähettämiseksi palvelimelle ja niiden seuraavaa käsittelyä
PHP:n kautta.
Ei vaadi sulkevaa tagia.
Attribuutit
| Attribuutti | Kuvaus |
|---|---|
type |
Määrittää syöttökentän tyypin. Vaihtoehdot alla. |
value |
Oletusarvo syöttökentässä. Painikkeen tapauksessa määrittää sen tekstin.
Lisätietoja katso attribuutti value.
|
placeholder |
Vihje syöttökentässä, lisätietoja katso
attribuutti placeholder.
|
name |
Syöttökentän nimi. Tarvitaan, jotta syöttökentän tiedot voidaan hakea PHP:ssä. Lomakkeen oikean toiminnan vuoksi syöttökenttien nimien ei saa olla samat keskenään (yhdessä lomakkeessa). Jos ne ovat samat - PHP:hen tulee tiedot siitä syöttökentästä, joka on alempana HTML-koodissa. |
disabled |
Estää lomakkeen elementin (ei vain inputin, vaan lähes minkä tahansa),
lisätietoja katso attribuutti disabled.
|
Attribuutin type arvot
| Arvo | Kuvaus |
|---|---|
text |
Luo tavallisen tekstisyöttökentän. |
password |
Luo tekstisyöttökentän salasanaa varten. Kokeile kirjoittaa siihen tekstiä - se näkyy tähteinä. |
checkbox |
Luo valintaruudun (checkbox).
Lisätietoja katso checkbox.
|
radio |
Luo radiopainikkeen.
Lisätietoja katso radio.
|
hidden |
Luo piilotetun inputin, joka ei näy näytöllä, mutta lähettää
value-attribuutissa olevat tiedot palvelimelle.
|
button |
Luo painikkeen. Tämän painikkeen painaminen
ei lähetä lomaketta palvelimelle. Sitä voidaan käyttää
linkin sisällä tai JavaScript:n kautta.
Oletuksena painikkeella ei ole tekstiä (esimerkki painikkeesta ilman tekstiä: ),
se asetetaan value:n avulla.
Katso myös button-tagi,
joka myös luo painikkeen.
|
submit |
Luo painikkeen, joka lähettää tiedot palvelimelle.
Painikkeen teksti riippuu selaimesta, sen voi vaihtaa
value:n avulla.
Katso myös button-tagi,
joka myös luo painikkeen.
|
reset |
Luo painikkeen, joka tyhjentää täytetyn lomakkeen.
Painikkeen teksti riippuu selaimesta, sen voi vaihtaa
value:n avulla.
|
file |
Luo tiedoston valintapainikkeen. Tämän painikkeen muotoilua ei saa muuttaa
CSS:n kautta (mutta on olemassa ovelia tapoja). Jos tarvitset tällaista kenttää lomakkeessa,
form-tagin tulee sisältää attribuutti
enctype arvolla multipart/form-data.
|
Uudet HTML5:n attribuutin type arvot
Nämä attribuutin arvot ovat uusia, ne ilmestyivät vasta HTML5:ssä, joten joissakin selaimissa ne eivät välttämättä toimi tai toimivat eri tavoin eri selaimissa.
Jos selain ei voi ymmärtää
type-attribuutin sisältöä
(esimerkiksi, jos sitä ei tueta tai se on virheellisesti syötetty),
se käsittelee elementin tavallisena tekstisyöttökenttänä,
kuin type-attribuutin arvona olisi
text.
Katso alla olevia esimerkkejä
eri selaimissa. Kokeile syöttää
input-kenttiin tekstiä ja painaa lähetyspainiketta.
Jos teksti on virheellinen tai kenttä on tyhjä -
selain antaa virheen. Esimerkiksi, jos
tyypin email omaavaan kenttään syötetään virheellinen
sähköpostiosoite - selain ei anna lomakkeen lähettämistä ja
antaa virheilmoituksen (virheen tekstiä
ja sen ulkoasua html css:llä ei voi muuttaa).
Jos kenttä on tyhjä - selain antaa myös virheen,
tämä saavutetaan required-attribuutin avulla:
| Arvo | Kuvaus |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
