本篇教程探討了HTML5 Input屬性詳解，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML5+CSS3從入門到精通 。

<

value?屬性

value?屬性規(guī)定輸入字段的初始值：

readonly?屬性

readonly?屬性規(guī)定輸入字段為只讀(不能修改)：

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

實(shí)例

disabled?屬性

disabled?屬性規(guī)定輸入字段是禁用的。

被禁用的元素是不可用和不可點(diǎn)擊的。

被禁用的元素不會(huì)被提交。

實(shí)例

size?屬性

size?屬性規(guī)定輸入字段的尺寸(以字符計(jì))：

實(shí)例

maxlength?屬性

maxlength?屬性規(guī)定輸入字段允許的最大長(zhǎng)度：

如設(shè)置?maxlength?屬性，則輸入控件不會(huì)接受超過所允許數(shù)的字符。

該屬性不會(huì)提供任何反饋。如果需要提醒用戶，則必須編寫?JavaScript?代碼。

注釋：輸入限制并非萬無一失。JavaScript?提供了很多方法來增加非法輸入。如需安全地限制輸入，則接受者(服務(wù)器)必須同時(shí)對(duì)限制進(jìn)行檢查。

實(shí)例

HTML5?屬性

HTML5?為??增加了如下屬性：

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height?和?width

list

min?和?max

multiple

pattern?(regexp)

placeholder

required

step

autocomplete?屬性

autocomplete?屬性規(guī)定表單或輸入字段是否應(yīng)該自動(dòng)完成。

當(dāng)自動(dòng)完成開啟，瀏覽器會(huì)基于用戶之前的輸入值自動(dòng)填寫值。

提示：

Tip:?It?is?possible?to?have?autocomplete?"on"?for?the?form、and?"off"?for?specific?input?fields、or?vice?versa.

autocomplete?屬性適用于?

?以及如下??類型：text、search、url、tel、email、password、datepickers、range?以及?color。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

自動(dòng)完成開啟的?HTML?表單(某個(gè)輸入字段為?off)：

并為?

?增加如需屬性：

autocomplete

novalidate

novalidate?屬性

novalidate?屬性屬于?

?屬性。

如果設(shè)置，則?novalidate?規(guī)定在提交表單時(shí)不對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

指示表單在被提交時(shí)不進(jìn)行驗(yàn)證：

E-mail:?

autofocus?屬性

autofocus?屬性是布爾屬性。

如果設(shè)置，則規(guī)定當(dāng)頁面加載時(shí)??元素應(yīng)該自動(dòng)獲得焦點(diǎn)。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

使?"First?name"?輸入字段在頁面加載時(shí)自動(dòng)獲得焦點(diǎn)：

form?屬性

form?屬性規(guī)定??元素所屬的一個(gè)或多個(gè)表單。

提示：如需引用一個(gè)以上的表單，請(qǐng)使用空格分隔的表單?id?列表。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

輸入字段位于?HTML?表單之外(但仍屬表單)：

formaction?屬性

formaction?屬性規(guī)定當(dāng)提交表單時(shí)處理該輸入控件的文件的?URL。

formaction?屬性覆蓋?

?元素的?action?屬性。

formaction?屬性適用于?type="submit"?以及?type="image"。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

擁有兩個(gè)兩個(gè)提交按鈕并對(duì)于不同動(dòng)作的?HTML?表單：

formenctype?屬性

formenctype?屬性規(guī)定當(dāng)把表單數(shù)據(jù)(form-data)提交至服務(wù)器時(shí)如何對(duì)其進(jìn)行編碼(僅針對(duì)?method="post"?的表單)。

formenctype?屬性覆蓋?

?元素的?enctype?屬性。

formenctype?屬性適用于?type="submit"?以及?type="image"。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

發(fā)送默認(rèn)編碼以及編碼為?"multipart/form-data"(第二個(gè)提交按鈕)的表單數(shù)據(jù)(form-data)：

First?name:?

value="Submit?as?Multipart/form-data">

formmethod?屬性

formmethod?屬性定義用以向?action?URL?發(fā)送表單數(shù)據(jù)(form-data)的?HTTP?方法。

formmethod?屬性覆蓋?

?元素的?method?屬性。

formmethod?屬性適用于?type="submit"?以及?type="image"。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

第二個(gè)提交按鈕覆蓋表單的?HTTP?方法：

First?name:?

Last?name:?

value="Submit?using?POST">

formnovalidate?屬性

novalidate?屬性是布爾屬性。

如果設(shè)置，則規(guī)定在提交表單時(shí)不對(duì)??元素進(jìn)行驗(yàn)證。

formnovalidate?屬性覆蓋?

?元素的?novalidate?屬性。

formnovalidate?屬性可用于?type="submit"。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

擁有兩個(gè)提交按鈕的表單(驗(yàn)證和不驗(yàn)證)：

formtarget?屬性

formtarget?屬性規(guī)定的名稱或關(guān)鍵詞指示提交表單后在何處顯示接收到的響應(yīng)。

formtarget?屬性會(huì)覆蓋?

?元素的?target?屬性。

formtarget?屬性可與?type="submit"?和?type="image"?使用。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

這個(gè)表單有兩個(gè)提交按鈕，對(duì)應(yīng)不同的目標(biāo)窗口：

height?和?width?屬性

height?和?width?屬性規(guī)定??元素的高度和寬度。

height?和?width?屬性僅用于?。

注釋：請(qǐng)始終規(guī)定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會(huì)在圖像加載時(shí)閃爍。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

把圖像定義為提交按鈕，并設(shè)置?height?和?width?屬性：

list?屬性

list?屬性引用的??元素中包含了??元素的預(yù)定義選項(xiàng)。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

使用??設(shè)置預(yù)定義值的??元素：

datalist與select(下拉列表)的區(qū)別：

select：5個(gè)值里面選擇1個(gè)；

datalist：你可以在文本框里填值，也可以在下面5個(gè)值里選1個(gè)。

min?和?max?屬性

min?和?max?屬性規(guī)定??元素的最小值和最大值。

min?和?max?屬性適用于如需輸入類型：number、range、date、datetime、datetime-local、month、time?以及?week。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

具有最小和最大值的??元素：

Enter?a?date?before?1980-01-01:

Enter?a?date?after?2000-01-01:

Quantity?(between?1?and?5):

multiple?屬性

multiple?屬性是布爾屬性。可以選擇文件！

如果設(shè)置，則規(guī)定允許用戶在??元素中輸入一個(gè)以上的值。

multiple?屬性適用于以下輸入類型：email?和?file。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

接受多個(gè)值的文件上傳字段：

pattern?屬性

pattern?屬性規(guī)定用于檢查??元素值的正則表達(dá)式。

pattern?屬性適用于以下輸入類型：text、search、url、tel、email、and?password。

提示：請(qǐng)使用全局的?title?屬性對(duì)模式進(jìn)行描述以幫助用戶。

提示：請(qǐng)?jiān)谖覀兊?JavaScript?教程中學(xué)習(xí)更多有關(guān)正則表達(dá)式的知識(shí)。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

只能包含三個(gè)字母的輸入字段(無數(shù)字或特殊字符)

placeholder?屬性

placeholder?屬性規(guī)定用以描述輸入字段預(yù)期值的提示(樣本值或有關(guān)格式的簡(jiǎn)短描述)。

該提示會(huì)在用戶輸入值之前顯示在輸入字段中。

placeholder?屬性適用于以下輸入類型：text、search、url、tel、email?以及?password。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

擁有占位符文本的輸入字段：

required?屬性

required?屬性是布爾屬性。

如果設(shè)置，則規(guī)定在提交表單之前必須填寫輸入字段。

required?屬性適用于以下輸入類型：text、search、url、tel、email、password、date?pickers、number、checkbox、radio、and?file.

Opera?Safari?Chrome?Firefox?Internet?Explorer

實(shí)例

必填的輸入字段：

step?屬性

step?屬性規(guī)定??元素的合法數(shù)字間隔。

示例：如果?step="3"，則合法數(shù)字應(yīng)該是?-3、0、3、6、等等。

提示：step?屬性可與?max?以及?min?屬性一同使用，來創(chuàng)建合法值的范圍。

step?屬性適用于以下輸入類型：number、range、date、datetime、datetime-local、month、time?以及?week。

Opera?Safari?Chrome?Firefox?Internet?Explorer

示例

擁有具體的合法數(shù)字間隔的輸入字段：

練習(xí)的代碼：

html>

Insert?title?here

注冊(cè)及用戶登錄頁面

男生
女生
用戶名：
密碼：

美國(guó)

中國(guó)

韓國(guó)

The?cat?was?playing?in?the?garden.

---

Enter?a?date?after?1997-3-2:

本文由職坐標(biāo)整理并發(fā)布，希望對(duì)同學(xué)們有所幫助。了解更多詳情請(qǐng)關(guān)注職坐標(biāo)WEB前端HTML5/CSS3頻道！

總結(jié)

以上是生活随笔為你收集整理的html5 规定输入字段,HTML5 Input属性详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。