HTML <input> -elementti

Määrittely ja käyttö

<input> Tunniste määrittelee syöttikentän, johon käyttäjä voi syöttää tietoja.

<input> Elementti on tärkein lomakkeen elementti.

<input> Elementti voidaan näyttää monella tavalla, riippuen tyyppi-ominaisuus.

Tässä on erilaisia syötetyyppejä:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">（oletusarvo）
  • <input type="time">
  • <input type="url">
  • <input type="week">

Katso myös tyyppi-ominaisuus，katso esimerkkejä eri syötetyyppien toiminnasta!

Esimerkki

HTML-lomake, joka sisältää kolme syöttökenttää; kaksi tekstikenttää ja yhden lähetyspainikkeen:

<form action="/action_page.php">
  <label for="fname">Etunimi:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Sukunimi:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Lähetä">
</form>

Kokeile itse!

Vinkit ja huomiot

Vinkki:Aina käytä <label>-tagia määrittämään seuraavien elementtien selitteet:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Ominaisuus

Ominaisuus Arvo Kuvaus
accept
  • Tiedostopääte
  • audio/*
  • video/*
  • image/*
  • Median tyyppi

Määritellään tiedostotyyppi, jotka lähetetään tiedostouploksella.

Määritellään, mitkä tiedostotyypit käyttäjä voi valita tiedostovalitsimesta (tyypille "file").
alt Teksti Määritellään kuvan korvaava teksti (tyypille "image").
autocomplete
  • on
  • off
 Määritellään, tulisiko <input>-elementti käyttää automaattista täyttöä.
autofocus autofocus Määritellään, että <input>-elementti tulisi saada automaattisesti fokuksen sivun latautuessa.
checked checked Määritellään, että <input>-elementti tulisi olla valittuna sivun latautuessa (tyypille "checkbox" tai tyypille "radio").
dirname inputname.dir Määritellään lähetettävän tekstin suunta.
disabled disabled Määritellään, että <input>-elementti tulisi olla käytöstä poissa.
form Lomakkeen id Määritellään <input>-elementin kuuluva lomake.
formaction URL Määritellään URL, jota käytetään käsittämään liitetiedostoa syöttökenttää varten, kun lomaketta lähetetään (tyypille "submit" ja tyypille "image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Määritä, miten lomakkeen tiedot koodataan ennen palvelimelle lähettämistä (tyypille "submit" ja "image").
formmethod
  • get
  • post
 Määritä HTTP-metodi, jota käytetään lähettämään data action-URL:hen (tyypille "submit" ja "image").
formnovalidate formnovalidate Määritä, että lomakkeen lähettäessä sitä ei tulisi tarkistaa.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Runkon nimi 		Määritä, missä näytetään vastaus, jonka vastaanotetaan lomakkeen lähettämisen jälkeen (tyypille "submit" ja "image").
height Pixelit Määritä <input>-elementin korkeus (vain type="image").
list datalist_id Viittää <input>-elementtiin sisältävään <datalist>-elementtiin, joka sisältää ennakkovalintoja.
max
  • Numerot
  • Päivämäärä
 Määritä <input>-elementin enimmäisarvo.
maxlength Numerot Määritä <input>-elementissä sallittu enimmäismäärä merkkejä.
min
  • Numerot
  • Päivämäärä
 Määritä <input>-elementin vähimmäisarvo.
minlength Numerot Määritä <input>-elementissä vaadittava vähimmäismäärä merkkejä.
multiple multiple Määritä, että käyttäjä voi syöttää useita arvoja <input>-elementtiin.
name Teksti Määritä <input>-elementin nimi.
pattern Säännöllinen lauseke Määritä säännöllinen lauseke, joka tarkistaa <input>-elementin arvon.
placeholder Teksti Määritä lyhyt vihje, joka kuvaa <input>-elementin odotettua arvoa.
popovertarget Elementin id Määritä kutsuttava ponnahdusikkunaelementti (vain type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Määritä, mitä tapahtuu, kun painiketta napsautetaan (vain type="button").
readonly readonly Määritä, että syöttökenttä on lukuinen.
required required Määritä, että syöttökenttä täytyy täyttää ennen lomakkeen lähettämistä.
size Numerot Määritä <input>-elementin leveys (merkkien määrällä).
src URL Määritä URL-osoite, joka toimii palautuspainikkeen kuvana (vain type="image").
Step
  • Numerot
  • Any
 Määrittelee syöttökentässä sallitujen lukujen välinen välit.
Tyyppi
  • Button
  • Checkbox
  • Color
  • Date
  • Datetime-local
  • Email
  • File
  • Hidden
  • Image
  • Month
  • Number
  • Password
  • Radio
  • Range
  • Reset
  • Search
  • Submit
  • Tel
  • Text
  • Time
  • URL
  • Week
 Määrittelee näytettävän <input>-elementin tyyppin.
Arvo Teksti Määrittelee <input>-elementin arvon.
Leveys Pixelit Määrittelee <input>-elementin leveyden (vain type="image").

Globaalit ominaisuudet

<input> Tunniste tukee myös HTML:n globaalit ominaisuudet.

Tapahtumaoikeudet

<input> Tunniste tukee myös HTML:n tapahtumaoikeudet.

Oletusarvoinen CSS-asetus

Ei.

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki

Liittyvät sivut

HTML-opas:

HTML DOM -käyttöohje: