HTML表單

<form> 元素

HTML 表單用於蒐集不同類型的用戶輸入。

<form>
.
form elements
.
</form>

<input> 元素

<input>是form元素最重要的元素。

<input>根據type屬性的不同有很多種類型。

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

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

<input type="radio"> 定義單選按鈕。 單選按鈕允許用戶在有限數量的選項中選擇其中之一：

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

<input type="submit">定義用於向表單處理程序提交表單的按鈕。 表單處理程序通常是包含用來處理輸入數據的腳本的服務器頁面。 表單處理程序在表單的action屬性中指定：

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

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

<button> 元素

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

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

Action 屬性

action屬性定義在提交表單時執行的動作。 向服務器提交表單的通常做法是使用提交按鈕。 通常，表單會被提交到Web 服務器上的網頁。 在上面的例子中，指定了某個服務器腳本來處理被提交表單：

<form action="action_page.php">

Method 屬性

method屬性規定在提交表單時所用的HTTP方法( GET或 POST )：

<form action="action_page.php" method="get">

<form action="action_page.php" method="post">

Name 屬性

如果要正確地被提交，每個輸入字段必須設置一個name 屬性。 本例只會提交"Last name" 輸入字段：

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

用<fieldset> 組合表單數據

<fieldset>元素組合表單中的相關數據。

<legend>元素為<fieldset>元素定義標題。

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    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">
  </fieldset>
</form>

HTML Form 屬性

HTML <form> 元素，已設置所有可能的屬性，是這樣的：

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>