HTML Input 属性
- Edellinen sivu HTML syötteen tyyppi
- Seuraava sivu HTML Input-lomakkeen attribuutit
value 属性
value 属性规定输入字段的初始值:
Esimerkki
<form action=""> Etu nimi:<br> <input type="text" name="firstname" value="Bill"> <br> Sukunimi:<br> <input type="text" name="lastname"> </form>
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>
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>
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>
maxlength 属性
maxlength 属性规定输入字段允许的最大长度:
Esimerkki
<form action=""> Etu nimi:<br> <input type="text" name="firstname" maxlength="10"> <br> Sukunimi:<br> <input type="text" name="lastname"> </form>
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>
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>
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>
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">
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>
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>
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>
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>
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>
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">
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>
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">
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>
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">
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">
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>
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">
- Edellinen sivu HTML syötteen tyyppi
- Seuraava sivu HTML Input-lomakkeen attribuutit