HTML 表單元素、 輸入類型、Input 屬性

<input> 元素

最重要的表單元素是 <input> 元素。

<input> 元素根據不同的 type 屬性，可以變化為多種形態。

注釋：下一章講解所有 HTML 輸入類型。

<select> 元素（下拉列表）

<select> 元素定義下拉列表：

實例

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定義待選擇的選項。

列表通常會把首個選項顯示為被選選項。

您能夠通過添加 selected 屬性來定義預定義選項。

實例

<option value="fiat" selected>Fiat</option>

<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）：

實例

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

以上 HTML 代碼在瀏覽器中顯示為：

The cat was playing in the garden.

<button> 元素

<button> 元素定義可點擊的按鈕：

實例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

以上 HTML 代碼在瀏覽器中顯示為：

Click Me!

HTML5 表單元素

HTML5 增加了如下表單元素：

• <datalist>
• <keygen>
• <output>

注釋：默認地，瀏覽器不會顯示未知元素。新元素不會破壞您的頁面。

HTML5 <datalist> 元素

<datalist> 元素為 <input> 元素規定預定義選項列表。

用戶會在他們輸入數據時看到預定義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。

實例

通過 <datalist> 設置預定義值的 <input> 元素：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

輸入類型

本章描述 <input> 元素的輸入類型。

輸入類型：text

<input type="text"> 定義供文本輸入的單行輸入字段：

實例

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

以上 HTML 代碼在瀏覽器中看上去是這樣的：

First name: Last Name:

輸入類型：password

<input type="password"> 定義密碼字段：

實例

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form> 

以上 HTML 代碼在瀏覽器中看上去是這樣的：

First name: Password:

注釋：password 字段中的字符會被做掩碼處理（顯示為星號或實心圓）。

輸入類型：submit

<input type="submit"> 定義提交表單數據至表單處理程序的按鈕。

表單處理程序（form-handler）通常是包含處理輸入數據的腳本的服務器頁面。

在表單的 action 屬性中規定表單處理程序（form-handler）：

實例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

以上 HTML 代碼在瀏覽器中看上去是這樣的：

First name: Last name:

如果您省略了提交按鈕的 value 屬性，那么該按鈕將獲得默認文本：

實例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form> 

Input Type: radio

<input type="radio"> 定義單選按鈕。

Radio buttons let a user select ONLY ONE of a limited number of choices:

實例

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

以上 HTML 代碼在瀏覽器中看上去是這樣的：

Male Female

Input Type: checkbox

<input type="checkbox"> 定義復選框。

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

實例

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form> 

以上 HTML 代碼在瀏覽器中看上去是這樣的：

I have a bike I have a car

Input Type: button

<input type="button> 定義按鈕。

實例

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

以上 HTML 代碼在瀏覽器中看上去是這樣的：

HTML5 輸入類型

HTML5 增加了多個新的輸入類型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

注釋：老式 web 瀏覽器不支持的輸入類型，會被視為輸入類型 text。

輸入類型：number

<input type="number"> 用於應該包含數字值的輸入字段。

您能夠對數字做出限制。

根據瀏覽器支持，限制可應用到輸入字段。

實例

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

輸入限制

這里列出了一些常用的輸入限制（其中一些是 HTML5 中新增的）：

屬性	描述
disabled	規定輸入字段應該被禁用。
max	規定輸入字段的最大值。
maxlength	規定輸入字段的最大字符數。
min	規定輸入字段的最小值。
pattern	規定通過其檢查輸入值的正則表達式。
readonly	規定輸入字段為只讀（無法修改）。
required	規定輸入字段是必需的（必需填寫）。
size	規定輸入字段的寬度（以字符計）。
step	規定輸入字段的合法數字間隔。
value	規定輸入字段的默認值。

您將在下一章學到更多有關輸入限制的知識。

實例

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

輸入類型：date

<input type="date"> 用於應該包含日期的輸入字段。

根據瀏覽器支持，日期選擇器會出現輸入字段中。

實例

<form>
  Birthday:
  <input type="date" name="bday">
</form>

您可以向輸入添加限制：

實例

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

輸入類型：color

<input type="color"> 用於應該包含顏色的輸入字段。

根據瀏覽器支持，顏色選擇器會出現輸入字段中。

實例

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

輸入類型：range

<input type="range"> 用於應該包含一定范圍內的值的輸入字段。

根據瀏覽器支持，輸入字段能夠顯示為滑塊控件。

實例

<form>
  <input type="range" name="points" min="0" max="10">
</form>

您能夠使用如下屬性來規定限制：min、max、step、value。

輸入類型：month

<input type="month"> 允許用戶選擇月份和年份。

根據瀏覽器支持，日期選擇器會出現輸入字段中。

實例

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

輸入類型：week

<input type="week"> 允許用戶選擇周和年。

根據瀏覽器支持，日期選擇器會出現輸入字段中。

實例

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

輸入類型：time

<input type="time"> 允許用戶選擇時間（無時區）。

根據瀏覽器支持，時間選擇器會出現輸入字段中。

實例

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

輸入類型：datetime

<input type="datetime"> 允許用戶選擇日期和時間（有時區）。

根據瀏覽器支持，日期選擇器會出現輸入字段中。

實例

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

輸入類型：datetime-local

<input type="datetime-local"> 允許用戶選擇日期和時間（無時區）。

根據瀏覽器支持，日期選擇器會出現輸入字段中。

實例

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

輸入類型：email

<input type="email"> 用於應該包含電子郵件地址的輸入字段。

根據瀏覽器支持，能夠在被提交時自動對電子郵件地址進行驗證。

某些智能手機會識別 email 類型，並在鍵盤增加 ".com" 以匹配電子郵件輸入。

實例

<form>
  E-mail:
  <input type="email" name="email">
</form>

輸入類型：search

<input type="search"> 用於搜索字段（搜索字段的表現類似常規文本字段）。

實例

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

輸入類型：tel

<input type="tel"> 用於應該包含電話號碼的輸入字段。

目前只有 Safari 8 支持 tel 類型。

實例

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

輸入類型：url

<input type="url"> 用於應該包含 URL 地址的輸入字段。

根據瀏覽器支持，在提交時能夠自動驗證 url 字段。

某些智能手機識別 url 類型，並向鍵盤添加 ".com" 以匹配 url 輸入。

實例

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

value 屬性

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

實例

<form action="">
 First name:<br>
<input type="text" name="firstname" value="John">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

親自試一試

readonly 屬性

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

實例

<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 屬性規定輸入字段是禁用的。

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

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

實例

<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 屬性規定輸入字段的尺寸（以字符計）：

實例

<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 屬性規定輸入字段允許的最大長度：

實例

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

親自試一試

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

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

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

HTML5 屬性

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

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

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

• autocomplete
• novalidate

autocomplete 屬性

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

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

提示：

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

自動完成開啟的 HTML 表單（某個輸入字段為 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> 屬性。

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

autofocus 屬性

autofocus 屬性是布爾屬性。

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

form 屬性

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

輸入字段位於 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 屬性規定當提交表單時處理該輸入控件的文件的 URL。

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

擁有兩個兩個提交按鈕並對於不同動作的 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 屬性規定當把表單數據（form-data）提交至服務器時如何對其進行編碼（僅針對 method="post" 的表單）。

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

發送默認編碼以及編碼為 "multipart/form-data"（第二個提交按鈕）的表單數據（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 發送表單數據（form-data）的 HTTP 方法。

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

第二個提交按鈕覆蓋表單的 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 屬性覆蓋 <form> 元素的 novalidate 屬性。

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

<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 屬性會覆蓋 <form> 元素的 target 屬性。

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

list 屬性

list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預定義選項。

Opera Safari Chrome Firefox Internet Explorer

實例

使用 <datalist> 設置預定義值的 <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 屬性規定 <input> 元素的最小值和最大值。

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

Opera Safari Chrome Firefox Internet Explorer

實例

具有最小和最大值的 <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 屬性是布爾屬性。

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

pattern 屬性

pattern 屬性規定用於檢查 <input> 元素值的正則表達式。

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

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

只能包含三個字母的輸入字段（無數字或特殊字符）：

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

placeholder 屬性

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

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

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

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

required 屬性

required 屬性是布爾屬性。

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

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

Opera Safari Chrome Firefox Internet Explorer

實例

必填的輸入字段：

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

step 屬性

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

示例：如果 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

示例

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

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