今日學習內容：

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屬性適用於以下輸入型別：submit 和 image。

例項

帶有兩個提交按鈕的 HTML 表單，它們具有不同的操作（action）：

<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屬性適用於以下輸入型別：submit 和 image。

例項

有兩個提交按鈕的表單。第一個傳送使用預設編碼的表單資料，第二個傳送編碼為 "multipart/form-data" 的表單資料：

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</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屬性適用於以下輸入型別：submit 和 image。

表單資料可以作為 URL 變數（method="get"）或作為 HTTP post 事務（method="post"）傳送。

關於 GET 的注意事項：

• 以名稱/值對的形式將表單資料追加到 URL
• 永遠不要使用 GET 傳送敏感資料！（提交的表單資料在 URL 中可見！）
• URL 的長度受到限制（2048 個字元）
• 對於使用者希望將結果新增為書籤的表單提交很有用
• GET 適用於非安全資料，例如 Google 中的查詢字串

關於 POST 的注意事項：

• 將表單資料附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單資料）
• POST 沒有大小限制，可用於傳送大量資料。
• 帶有 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屬性適用於以下輸入型別：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屬性適用於以下輸入型別：submit。

例項

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

<form action="/action_page.php">
  <label for="email">Enter your 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">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

HTML Form 和 Input 元素