Home Web HTML

HTML 表單通常用於收集用戶輸入，用戶輸入會被蒐集到伺服器處理。
<form> 元素用於為用戶輸入創建 HTML 表單。

<form>
/* form elements */
</form>
# The <Input> Element
<form> 擁有各式各樣的輸入容器，例如：單選、複選或提交按鈕。
<input> 的使用樣式取決於我們設定的 type 屬性。
這裡是常用的樣式:
TypeDescription
<input type="text">Display a single-line text input field
<input type="radio">Displays a radio button (for selecting one of many choices)
<input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">Displays a submit button (for submitting the form)
<input type="button">Displays a clickable button
請參考這篇 HTML - Input
# HTML Form Attributes
# Action Attribute
<action> 屬性定義提交表單時要執行的操作。
通常，當使用者提交表單後，表單數據會被發送到伺服器上的一個文件中。
Examplelink
<form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</form>
NOTE: 如果省略 action 欄位，則預設為目前頁面。
# Target Attribute
target 屬性定義在何處顯示提交表單後收到的回應。
target has following values:
  • _blank - The response is displayed in a new window or tab.
  • _self - Default value, the response is displayed in the current window.
  • _parent - The response is displayed in the parent frame.
  • _top - The response is displayed in the full body of the window.
  • framename - The response is displayed in a named iframe.
Examplelink
<form action="/action_page.php" target="_blank">
# Method Attribute
method 屬性定義 HTTP 要用何種方式傳送表單資料。
  • method="get" - Sent data as URL variables.
  • method="post" - Sent data as HTTP post transaction.
The default value is GET.
GET Examplelink
<form action="/action_page.php" method="get">
表單資訊會跟隨在網址後面，安全性較差。
POST Examplelink
<form action="/action_page.php" method="post">
NOTE on GET:
  • 提交的表單資料會跟隨在 URL 後面，以 name/value 的形式。
  • 永遠不要用 GET 發送敏感信息！！！
  • URL 的長度限制為 2048 characters。
  • 對於用戶想要為結果添加書籤的表單提交很有用
  • GET 適用於非安全數據，例如 Google 中的查詢字符串
NOTE on POST:
  • 在 HTTP 請求的正文中附加表單數據（提交的表單數據未顯示在 URL 中）。
  • POST 沒有大小限制，可用於發送大量數據。
  • 使用 POST 提交的表單不能添加書籤。
# Autocomplete Attribute
autocomplete 屬性決定是否開啟表單自動完成功能。
啟用自動完成後，瀏覽器會根據用戶之前輸入的值自動完成。
Examplelink
<form action="/action_page.php" autocomplete="on">