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

<

value?屬性

value?屬性規定輸入字段的初始值：

readonly?屬性

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

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

實例

disabled?屬性

disabled?屬性規定輸入字段是禁用的。

被禁用的元素是不可用和不可點擊的。

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

實例

size?屬性

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

實例

maxlength?屬性

maxlength?屬性規定輸入字段允許的最大長度：

如設置?maxlength?屬性，則輸入控件不會接受超過所允許數的字符。

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

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

實例

HTML5?屬性

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

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height?和?width

list

min?和?max

multiple

pattern?(regexp)

placeholder

required

step

autocomplete?屬性

autocomplete?屬性規定表單或輸入字段是否應該自動完成。

當自動完成開啟，瀏覽器會基于用戶之前的輸入值自動填寫值。

提示：

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

實例

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

并為?

?增加如需屬性：

autocomplete

novalidate

novalidate?屬性

novalidate?屬性屬于?

?屬性。

如果設置，則?novalidate?規定在提交表單時不對表單數據進行驗證。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

指示表單在被提交時不進行驗證：

E-mail:?

autofocus?屬性

autofocus?屬性是布爾屬性。

如果設置，則規定當頁面加載時??元素應該自動獲得焦點。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

使?"First?name"?輸入字段在頁面加載時自動獲得焦點：

form?屬性

form?屬性規定??元素所屬的一個或多個表單。

提示：如需引用一個以上的表單，請使用空格分隔的表單?id?列表。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

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

formaction?屬性

formaction?屬性規定當提交表單時處理該輸入控件的文件的?URL。

formaction?屬性覆蓋?

?元素的?action?屬性。

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

擁有兩個兩個提交按鈕并對于不同動作的?HTML?表單：

formenctype?屬性

formenctype?屬性規定當把表單數據(form-data)提交至服務器時如何對其進行編碼(僅針對?method="post"?的表單)。

formenctype?屬性覆蓋?

?元素的?enctype?屬性。

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

發送默認編碼以及編碼為?"multipart/form-data"(第二個提交按鈕)的表單數據(form-data)：

First?name:?

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

formmethod?屬性

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

formmethod?屬性覆蓋?

?元素的?method?屬性。

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

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

First?name:?

Last?name:?

value="Submit?using?POST">

formnovalidate?屬性

novalidate?屬性是布爾屬性。

如果設置，則規定在提交表單時不對??元素進行驗證。

formnovalidate?屬性覆蓋?

?元素的?novalidate?屬性。

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

擁有兩個提交按鈕的表單(驗證和不驗證)：

formtarget?屬性

formtarget?屬性規定的名稱或關鍵詞指示提交表單后在何處顯示接收到的響應。

formtarget?屬性會覆蓋?

?元素的?target?屬性。

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

這個表單有兩個提交按鈕，對應不同的目標窗口：

height?和?width?屬性

height?和?width?屬性規定??元素的高度和寬度。

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

注釋：請始終規定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

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

list?屬性

list?屬性引用的??元素中包含了??元素的預定義選項。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

使用??設置預定義值的??元素：

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

select：5個值里面選擇1個；

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

min?和?max?屬性

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

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

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

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

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

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

multiple?屬性

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

如果設置，則規定允許用戶在??元素中輸入一個以上的值。

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

接受多個值的文件上傳字段：

pattern?屬性

pattern?屬性規定用于檢查??元素值的正則表達式。

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

提示：請使用全局的?title?屬性對模式進行描述以幫助用戶。

提示：請在我們的?JavaScript?教程中學習更多有關正則表達式的知識。

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

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

placeholder?屬性

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

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

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

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

required?屬性

required?屬性是布爾屬性。

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

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

實例

必填的輸入字段：

step?屬性

step?屬性規定??元素的合法數字間隔。

示例：如果?step="3"，則合法數字應該是?-3、0、3、6、等等。

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

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

Opera?Safari?Chrome?Firefox?Internet?Explorer

示例

擁有具體的合法數字間隔的輸入字段：

練習的代碼：

html>

Insert?title?here

注冊及用戶登錄頁面

男生
女生
用戶名：
密碼：

美國

中國

韓國

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

---

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

本文由職坐標整理并發布，希望對同學們有所幫助。了解更多詳情請關注職坐標WEB前端HTML5/CSS3頻道！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。