HTMLInput屬性-3.4HTML表單

value 屬性

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

成都創(chuàng)新互聯(lián)公司堅(jiān)信：善待客戶，將會成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨嚒Ｎ覀儚牟缓鲇瞥踉L客戶，我們用心做好本職工作，不忘初心，方得始終。10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)成都創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營銷服務(wù)商,為您提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)、H5場景定制、網(wǎng)站制作、品牌網(wǎng)站建設(shè)、小程序設(shè)計(jì)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

實(shí)例 <form action=""> First name:<br><input type="text" name="firstname" value="John"><br> Last name:<br><input type="text" name="lastname"></form>

readonly 屬性

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

實(shí)例 <form action=""> First name:<br><input type="text" name="firstname" value="John" readonly><br> Last name:<br><input type="text" name="lastname"></form>

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

disabled 屬性

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

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

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

實(shí)例 <form action=""> First name:<br><input type="text" name="firstname" value="John" disabled><br> Last name:<br><input type="text" name="lastname"></form>

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

size 屬性

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

實(shí)例 <form action=""> First name:<br><input type="text" name="firstname" value="John" size="40"><br> Last name:<br><input type="text" name="lastname"></form>

maxlength 屬性

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

實(shí)例 <form action=""> First name:<br><input type="text" name="firstname" maxlength="10"><br> Last name:<br><input type="text" name="lastname"></form>

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

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

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

HTML5 屬性

HTML5 為 <input> 增加了如下屬性：

autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight 和 widthlistmin 和 maxmultiplepattern (regexp)placeholderrequiredstep

并為 <form> 增加如需屬性：

autocompletenovalidate

autocomplete 屬性

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

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

提示：您可以把表單的 autocomplete 設(shè)置為 on，同時(shí)把特定的輸入字段設(shè)置為 off，反之亦然。

autocomplete 屬性適用于 <form> 以及如下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。

實(shí)例

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

<form action="action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"></form>

提示：在某些瀏覽器中，您也許需要手動啟用自動完成功能。

novalidate 屬性

novalidate 屬性屬于 <form> 屬性。

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

實(shí)例

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

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

autofocus 屬性

autofocus 屬性是布爾屬性。

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

實(shí)例

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

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

form 屬性

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

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

實(shí)例

輸入字段位于 HTML 表單之外（但仍屬表單）：

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

formaction 屬性

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

formaction 屬性覆蓋 <form> 元素的 action 屬性。

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

實(shí)例

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

<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"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"></form>

formenctype 屬性

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

formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。

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

實(shí)例

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

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

formmethod 屬性

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

formmethod 屬性覆蓋 <form> 元素的 method 屬性。

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

實(shí)例

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

<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="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"></form>

formnovalidate 屬性

novalidate 屬性是布爾屬性。

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

formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

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

實(shí)例

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

<form action="action_page.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"></form>

formtarget 屬性

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

formtarget 屬性會覆蓋 <form> 元素的 target 屬性。

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

實(shí)例

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

<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 和 width 屬性

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

height 和 width 屬性僅用于 <input type="image">。

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

實(shí)例

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

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

list 屬性

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

實(shí)例

使用 <datalist> 設(shè)置預(yù)定義值的 <input> 元素：

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

min 和 max 屬性

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

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

實(shí)例

具有最小和最大值的 <input> 元素：

Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

multiple 屬性

multiple 屬性是布爾屬性。

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

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

實(shí)例

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

Select images: <input type="file" name="img" multiple>

pattern 屬性

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

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

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

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

實(shí)例

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

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder 屬性

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

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

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

實(shí)例

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

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

required 屬性

required 屬性是布爾屬性。

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

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

實(shí)例

必填的輸入字段：

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

step 屬性

step 屬性規(guī)定 <input> 元素的合法數(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。

示例

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

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