HTML Input 表單* 屬性
本章介紹 HTML <input> 元素的各種 form* 屬性。
form 屬性
input form 屬性指定了 <input> 元素所屬的表單。
此屬性的值必須等於其所屬的 <form> 元素的 id 屬性。
示例
位於 HTML 表單外部（但仍屬於表單一部分）的輸入欄位
<form action="/action_page.php" id="form1">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="提交">
</form>
<label for="lname">姓:</label>
<input type="text" id="lname" name="lname" form="form1">
自己動手試一試 »
formaction 屬性
input formaction 屬性指定了提交表單時將處理輸入的檔案的 URL。
注意：此屬性會覆蓋 <form> 元素的 action 屬性。
formaction 屬性適用於以下 input 型別：submit 和 image。
示例
具有兩個提交按鈕的 HTML 表單，具有不同的操作
<form action="/action_page.php">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="提交">
<input type="submit" formaction="/action_page2.php" value="以管理員身份提交">
</form>
自己動手試一試 »
formenctype 屬性
input formenctype 屬性指定了提交表單時應如何編碼表單資料（僅適用於 method="post" 的表單）。
注意：此屬性會覆蓋 <form> 元素的 enctype 屬性。
formenctype 屬性適用於以下 input 型別：submit 和 image。
示例
帶有兩個提交按鈕的表單。第一個以預設編碼傳送表單資料，第二個以 "multipart/form-data" 編碼傳送表單資料
<form action="/action_page_binary.asp" method="post">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 形式提交">
</form>
自己動手試一試 »
formmethod 屬性
input formmethod 屬性定義了將表單資料傳送到 action URL 的 HTTP 方法。
注意：此屬性會覆蓋 <form> 元素的 method 屬性。
formmethod 屬性適用於以下 input 型別：submit 和 image。
表單資料可以作為 URL 變數 (method="get") 或作為 HTTP POST 事務 (method="post") 傳送。
關於“get”方法的注意事項
- 此方法將表單資料以名稱/值對的形式附加到 URL
- 此方法對於使用者希望收藏結果的表單提交很有用
- URL 中可以放置的資料量有限（因瀏覽器而異），因此，您不能確定所有表單資料都能正確傳輸
- 切勿使用“get”方法傳遞敏感資訊！（密碼或其他敏感資訊將在瀏覽器的位址列中可見）
關於“post”方法的注意事項
- 此方法將表單資料作為 HTTP POST 事務傳送
- 使用“post”方法的表單提交無法被收藏
- 與 "get" 方法相比，"post" 方法更強大、更安全，並且 "post" 沒有大小限制
示例
帶有兩個提交按鈕的表單。第一個使用 method="get" 提交表單資料。第二個使用 method="post" 提交表單資料
<form action="/action_page.php" method="get">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="使用 GET 提交">
<input type="submit" formmethod="post" value="使用 POST 提交">
</form>
自己動手試一試 »
formtarget 屬性
input formtarget 屬性指定了名稱或關鍵字，用於指示提交表單後收到的響應的顯示位置。
注意：此屬性會覆蓋 <form> 元素的 target 屬性。
formtarget 屬性適用於以下 input 型別：submit 和 image。
示例
帶有兩個提交按鈕的表單，具有不同的目標視窗
<form action="/action_page.php">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="提交">
<input type="submit" formtarget="_blank" value="提交到新視窗/標籤頁">
</form>
自己動手試一試 »
formnovalidate 屬性
input formnovalidate 屬性指定在提交時，不應對 <input> 元素進行驗證。
注意：此屬性會覆蓋 <form> 元素的 novalidate 屬性。
formnovalidate 屬性適用於以下 input 型別：submit。
示例
帶有兩個提交按鈕的表單（有和無驗證）
<form action="/action_page.php">
<label for="email">輸入您的電子郵件:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
<input type="submit" formnovalidate="formnovalidate"
value="無驗證提交">
</form>
自己動手試一試 »
novalidate 屬性
novalidate 屬性是 <form> 屬性。
當存在時，novalidate 指定在提交時，所有表單資料均不應被驗證。
示例
指定提交時不對錶單資料進行驗證
<form action="/action_page.php" novalidate>
<label for="email">輸入您的電子郵件:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
自己動手試一試 »
HTML 表單和輸入元素
| 標籤 | 描述 |
|---|---|
| <form> | 定義一個用於使用者輸入的 HTML 表單 |
| <input> | 定義一個輸入控制元件 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
