HTML Input 属性

value 属性

value 属性规定输入字段的初始值:

Esimerkki

<form action="">
 Etu nimi:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Sukunimi:<br>
<input type="text" name="lastname">
</form> 

Kokeile itse

readonly 属性

readonly 属性规定输入字段为只读(不能修改):

Esimerkki

<form action="">
 Etu nimi:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Sukunimi:<br>
<input type="text" name="lastname">
</form> 

Kokeile itse

readonly 属性不需要值。它等同于 readonly="readonly"。

disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

Esimerkki

<form action="">
 Etu nimi:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Sukunimi:<br>
<input type="text" name="lastname">
</form> 

Kokeile itse

disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性

size 属性规定输入字段的尺寸(以字符计):

Esimerkki

<form action="">
 Etu nimi:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Sukunimi:<br>
<input type="text" name="lastname">
</form> 

Kokeile itse

maxlength 属性

maxlength 属性规定输入字段允许的最大长度:

Esimerkki

<form action="">
 Etu nimi:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Sukunimi:<br>
<input type="text" name="lastname">
</form> 

Kokeile itse

Jos asetat maxlength-ominaisuuden, syöte-elementti ei hyväksy yli sallitun määrän merkkejä.

Tämä ominaisuus ei tarjoa mitään palautetta. Jos haluat ilmoittaa käyttäjälle, sinun on kirjoitettava JavaScript-koodia.

Huomautus:Syöte rajoitukset eivät ole täydellisiä. JavaScript tarjoaa monia tapoja lisätä epäilyttäviä syötteitä. Jos haluat rajoittaa syötteitä turvallisesti, vastaanottaja (palvelin) on tarkistettava rajoitukset.

HTML5 ominaisuudet

HTML5 lisää seuraavat ominaisuudet <input>-elementille:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • korkeus ja leveys
  • list
  • min ja max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

ja lisää seuraavat ominaisuudet <form>-elementille:

  • autocomplete
  • novalidate

Autocomplete-ominaisuus

Autocomplete-ominaisuus määrittää, pitäisikö lomaketta tai syötteenkenttää täyttää automaattisesti.

Kun automaattinen täyttö on käytössä, selain täyttää kentät käyttäjän aikaisemmilla syötteillä.

Vinkki:Voit asettaa lomakkeen automaattisen täytön onksi ja tietyn syötteen offksi, tai päinvastoin.

Automaattinen täyttö ominaisuus soveltuu <form>-elementille sekä seuraaville <input>-tyypeille: text, search, url, tel, email, password, datepickers, range ja color。

Esimerkki

Ota automaattinen täyttö käyttöön HTML-lomakkeessa (jossakin syötteessä off):

<form action="action_page.php" autocomplete="on">
   Etu nimi:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   Sähköposti: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form> 

Kokeile itse

Vinkki:Joissakin selaimissa sinun saattaa tarvita käsin aktivoitavaa automaattisen täytön toimintoa.

novalidate-ominaisuus

novalidate-ominaisuus kuuluu <form>-ominaisuuksiin.

Jos asetettu, määrittelee, että lomakkeen lähetyksen yhteydessä lomakkeen tietoja ei tarkisteta.

Esimerkki

Merkitse, että lomaketta ei tarkisteta lähetettäessä:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form> 

Kokeile itse

autofocus-ominaisuus

autofocus-ominaisuus on totuusarvomäärittely.

Jos asetettu, määrittelee, että <input>-elementti saavuttaa automaattisesti fokuksen sivun latauksen yhteydessä.

Esimerkki

Näytä "First name" -syöttökenttä automaattisesti saavutettavana sivun latauksen yhteydessä:

First name:<input type="text" name="fname" autofocus>

Kokeile itse

form-ominaisuus

form-ominaisuus määrittelee yhden tai useamman lomakkeen, johon <input>-elementti kuuluu.

Vinkki:Jos viittaavat useisiin lomakkeisiin, käytä välilyöntejä erotettuna lomakkeiden id-lista.

Esimerkki

Syöttökenttä sijaitsee HTML-lomakkeen ulkopuolella (vaikka se kuuluu lomakkeeseen):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Lähetä">
</form>
 Last name: <input type="text" name="lname" form="form1">

Kokeile itse

formaction-ominaisuus

formaction-ominaisuus määrittelee, minkä URL:n kautta käsitellään kyseistä syöttöelementtiä lomakkeen lähetyksen yhteydessä.

formaction-ominaisuus korvaa <form>-elementin action-ominaisuuden.

formaction-ominaisuus soveltuu type="submit" ja type="image".

Esimerkki

HTML-lomakkeella, jolla on kaksi submit-painiketta ja eri toiminnot:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Lähetä"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form> 

Kokeile itse

formenctype-ominaisuus

formenctype-ominaisuus määrittelee, miten lomakkeen tiedot (form-data) koodataan palvelimelle (vain method="post" -lomakkeille).

formenctype-ominaisuus korvaa <form>-elementin enctype-ominaisuuden.

formenctype-ominaisuus soveltuu type="submit" ja type="image".

Esimerkki

Lähetä lomaketietoja (form-data) oletuskoodauksella ja "multipart/form-data"-koodauksella (toinen lähetyspainike):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Lähetä">
   <input type="submit" formenctype="multipart/form-data">
   value="Lähetä Multipart/form-data-tyyppisesti">
</form> 

Kokeile itse

formmethod-ominaisuus

formmethod-ominaisuus määrittää HTTP-metodin, jota käytetään lomaketiedon (form-data) lähettämiseen action-URL:lle.

formmethod-ominaisuus korvaa <form>-elementin method-ominaisuuden.

formmethod-ominaisuus soveltuu type="submit" ja type="image".

Esimerkki

Toinen lähetyspainike korvaa lomakkeen HTTP-metodin:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Lähetä">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Lähetä POST-tyyppisesti">
</form> 

Kokeile itse

formnovalidate-ominaisuus

novalidate-ominaisuus on boolean-ominaisuus.

Jos asetettu, määrää, että lomakkeen lähettäessä <input>-elementtejä ei validoida.

formnovalidate-ominaisuus korvaa <form>-elementin novalidate-ominaisuuden.

formnovalidate-ominaisuus voidaan käyttää type="submit".

Esimerkki

Lomake, jossa on kaksi lähetyspainiketta (validointi ja ei-validointi):

<form action="action_page.php">
   Sähköposti: <input type="email" name="userid"><br>
   <input type="submit" value="Lähetä"><br>
   <input type="submit" formnovalidate value="Lähetä ilman validointia">
</form> 

Kokeile itse

formtarget ominaisuus

formtarget ominaisuus määrittelee nimen tai avainsanan, joka osoittaa, missä näytetään vastaanotettu vastaus lomakkeen lähettämisen jälkeen.

formtarget ominaisuus korvaa <form>-elementin target ominaisuuden.

formtarget ominaisuus voidaan käyttää yhdessä type="submit" ja type="image" kanssa.

Esimerkki

Tämä lomake sisältää kaksi lähetyspainiketta, jotka kohdistuvat eri tavoissa oleviin ikkunoihin:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form> 

Kokeile itse

height ja width ominaisuudet

height ja width ominaisuudet määrittelevät <input>-elementin korkeuden ja leveyden.

height ja width ominaisuudet käytetään vain <input type="image">.

Huomautus:Aina määritä kuvan mitat. Jos selain ei tiedä kuvan mittoja, sivu vilkkuu kuvan latauksen aikana.

Esimerkki

Määritä kuva lähetyspainikkeeksi ja aseta leveys ja korkeus ominaisuudet:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Kokeile itse

list-ominaisuus

list-ominaisuus viittaa <datalist>-elementtiin, joka sisältää <input>-elementin määritellyt vaihtoehdot.

Esimerkki

Käytä <datalist> asettaaksesi määritellyt arvot <input>-elementille:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 

Kokeile itse

min ja max -ominaisuus

min ja max -ominaisuudet määrittelevät <input>-elementin minimi- ja maksimiarvon.

min ja max -ominaisuudet soveltuivat seuraaviin syöttityyppeihin: number, range, date, datetime, datetime-local, month, time ja week.

Esimerkki

Minimi- ja maksimiarvoja sisältävä <input>-elementti:

Syötä päivämäärä ennen 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Syötä päivämäärä 2000-01-02 jälkeen:
<input type="date" name="bday" min="2000-01-02">
 Määrä (välillä 1 ja 5):
<input type="number" name="quantity" min="1" max="5">

Kokeile itse

multiple-ominaisuus

multiple-ominaisuus on boolean-ominaisuus.

Jos asetettu, määrää, että käyttäjä voi syöttää yhden tai useamman arvon <input>-elementtiin.

multiple-ominaisuus soveltuu seuraaviin syöttityyppeihin: email ja file.

Esimerkki

Useiden arvojen hyväksyvä tiedostolatauskenttä:

Valitse kuva:<input type="file" name="img" multiple>

Kokeile itse

pattern-ominaisuus

pattern-ominaisuus määrittää regex-kaavan, jota käytetään <input>-elementin arvon tarkistamiseen.

pattern-ominaisuus soveltuu seuraaviin syöttityyppeihin: text, search, url, tel, email ja password.

Vinkki:Käytä globaalia title-ominaisuutta kuvataksesi mallia auttaaksesi käyttäjää.

Vinkki:Lue lisää regexistä JavaScript-opastuksestamme.

Esimerkki

Vain kolmikirjaiminen syöttikenttä (ei numeroita tai erikoismerkkejä):

Maa-koodi: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Kolmikirjain maa-koodi">

Kokeile itse

placeholder-ominaisuus

placeholder-ominaisuus määrittää viitteen, joka kuvaa syöttikentän odotettua arvoa (esimerkkiarvo tai lyhyt muotoiludesc).

Tämä viesti näkyy syöttikentässä ennen käyttäjän syöttämää arvoa.

placeholder-ominaisuus soveltuu seuraaviin syötteen tyyppihin: text, search, url, tel, email ja password.

Esimerkki

Omalla paikannustekstillä varustetut syöttökentät:

<input type="text" name="fname" placeholder="First name">

Kokeile itse

required-ominaisuus

required-ominaisuus on totuusarvomäärittely.

Jos asetettu, määrätään, että syöttökenttä täytyy täyttää ennen lomakkeen lähettämistä.

required-ominaisuus soveltuu seuraaviin syötteen tyyppihin: text, search, url, tel, email, password, päivämäärävalitsimet, number, checkbox, radio ja file.

Esimerkki

Pakollinen syöttökenttä:

Username: <input type="text" name="usrname" required>

Kokeile itse

step-ominaisuus

step-ominaisuus määrittelee <input>-elementin laillisen lukuvälin.

Esimerkki: Jos step="3", lailliset luvut ovat -3, 0, 3, 6 ja niin edelleen.

Vinkki:step-ominaisuus voidaan käyttää yhdessä max- ja min-ominaisuuksien kanssa luodakseen laillisen arvojen alueen.

step-ominaisuus soveltuu seuraaviin syötteen tyyppihin: number, range, date, datetime, datetime-local, month, time ja week.

Esimerkki

Omalla lakisääteisellä lukuväliksiällä varustetut syöttökentät:

<input type="number" name="points" step="3">

Kokeile itse