HTML Input屬性

該value屬性

所述value屬性指定的輸入字段的初始值：

該readonly屬性

的readonly屬性指定輸入字段是只讀(cannot be changed) ：

該readonly屬性不需要值。 這是一樣的書寫只讀=“只讀”。

該disabled屬性

所述disabled屬性指定輸入字段被禁用。

禁用的元件是未使用的和未點擊。

禁用的元素不會被提交。

該disabled屬性不需要值。 這是一樣的不可寫入=“已禁用”。

在size屬性

的size屬性指定的大小(in characters)輸入字段：

該maxlength屬性

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

用maxlength屬性，輸入控制將不接受除字符的所允許的數量更多。

該屬性不提供任何反饋。 如果你想提醒用戶，您必須編寫JavaScript代碼。

HTML5屬性

HTML5加入following的屬性<input> ：

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

和following的屬性<form>

• autocomplete
• novalidate

該autocomplete屬性

該autocomplete屬性指定形式或輸入字段是否應autocomplete或關閉。

當autocomplete的，瀏覽器自動完成值基於用戶以前輸入的值。

Tip:它可以具有autocomplete "on"的形式，而"off"特定的輸入字段，或者反之亦然。

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

例

HTML表單與autocomplete上(and off for one input field) ：

<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>

試一試»

提示：在某些瀏覽器中，您可能需要激活autocomplete功能，這個工作。

該novalidate屬性

所述novalidate屬性是一個<form>屬性。

如果存在， novalidate指定當提交表單數據不應該被驗證。

例

指示形式並不要在提交驗證：

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

試一試»

該autofocus屬性

該autofocus屬性是一個布爾屬性。

當存在時，它指定一個<input>元件自動地獲得聚焦頁面加載時。

例

讓"First name"輸入欄自動獲得焦點的頁面加載時：

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

試一試»

該form屬性

的form屬性指定的一個或多個形式<input>元素屬於。

Tip:要引用不止一種形式，使用的空格分隔的列表form ids 。

例

一個input field位於HTML表單外(but still a part of the form) ：

<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屬性指定表單提交時，將處理輸入控制文件的URL。

所述formaction屬性重寫action的屬性<form>元素。

所述formaction屬性用於類型=“提交”和type =“圖像”。

例

有兩個一個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屬性指定如何形式數據應該將它提交給服務器時進行編碼(only for forms with method="post" ) 。

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

所述formenctype屬性用於type="submit"和type="image" 。

例

發送form-data是默認編碼(the first submit button) ，並編碼為"multipart/form-data" (the second submit button) ：

<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屬性定義用於發送所述HTTP方法form-data到動作URL。

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

所述formmethod屬性可以與使用type="submit"和type="image" 。

例

第二提交按鈕覆蓋形式的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屬性是一個布爾屬性。

當存在時，它指定了<input>提交時元件不應該被驗證。

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

所述formnovalidate屬性可以與使用type="submit" 。

例

表單有兩個提交按鈕(with and without validation) ：

<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屬性指定的名稱或指示在哪裡顯示被提交表單之後接收到的響應中的關鍵字。

所述formtarget屬性重寫target的屬性<form>元素。

所述formtarget屬性可以與類型被用來=“提交”和type =“圖像”。

例

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

<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和寬度的屬性指定的高度和寬度<input>元素。

的height和width的屬性僅與使用<input type="image"> 。

例

定義圖像作為提交按鈕時，以高度和寬度屬性：

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

試一試»

該list屬性

的list屬性指的是<datalist>包含預先定義的選項的元素<input>元素。

例

一個<input>在一個元件與預定義值<datalist> ：

<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屬性指定的最小和最大值<input>元素。

在min和max屬性工作，下面的輸入類型： number, range, date, datetime, datetime-local, month, time and week 。

例

<輸入>與最小和最大值元素：

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 Attribute

在multiple屬性是一個布爾屬性。

當存在時，它指定允許用戶在輸入一個以上的值<input>元素。

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

例

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

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

試一試»

該pattern屬性

的pattern屬性指定正則表達式<input>元素的值與檢查。

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

提示：使用全球標題屬性描述的圖案，以幫助用戶。

Tip:了解更多關於正則表達式我們的JavaScript教程。

例

輸入字段只能包含三個字母(no numbers or special characters) ：

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

試一試»

該placeholder屬性

該placeholder屬性指定描述輸入域的預期值的提示(a sample value or a short description of the format) 。

用戶輸入值之前的提示被顯示在輸入字段中。

該placeholder屬性適用於以下輸入類型： text, search, url, tel, email, and password 。

例

與佔位符文本輸入字段：

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

試一試»

將required屬性

該required屬性是一個布爾屬性。

當存在時，它指定一個輸入字段必須提交表單之前填寫。

將required屬性適用於以下輸入類型： text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file 。

例

一個必需的輸入字段：

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

試一試»

在step屬性

在step屬性規定的合法的數字間隔<input>元素。

例如：如果步驟=“3”，合法的數是-3，0，3，6，等

Tip:該step屬性可以連同被用於max和min屬性來創建範圍合法值。

在step屬性適用於以下輸入類型： number, range, date, datetime, datetime-local, month, time and week 。

例

與指定的合法的數字間隔輸入字段：

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

試一試»

測試自己與練習！

練習1» 練習2» 練習3» 練習4»