【JQuery學習筆記day12】HTML 表單

表單

表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容。
表單使用表單標籤 <form> 來設置。

標籤	描述
<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個多行的輸入控件)
<label>	定義了 元素的標籤，一般爲輸入標題
<fieldset>	定義了一組相關的表單元素，並使用外框包含起來
<legend>	定義了 元素的標題
<select>	定義了下拉選項列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個點擊按鈕
<datalist>New	指定一個預先定義的輸入控件選項列表
<keygen>New	定義了表單的密鑰對生成器字段
<output>New	定義一個計算結果

New : HTML5新標籤

輸入元素

多數情況下被用到的表單標籤是<input>輸入標籤。

<form>
Username: <input  name="username">
</form>

顯示效果

文本域（Text Fields）

文本域通過<input type="text">標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
表單本身並不可見。同時，在大多數瀏覽器中，文本域的默認寬度是 20 個字符。

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

顯示效果

密碼字段

密碼字段通過標籤<input type="password"> 來定義:
密碼字段字符不會明文顯示，而是以星號或圓點替代。

<form>
Password: <input type="password" name="pwd">
</form>

顯示效果

單選按鈕（Radio Buttons）

<input type="radio">標籤定義了表單單選框選項

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

顯示效果

複選框（Checkboxes）

<input type="checkbox"> 定義了複選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

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

顯示效果

提交按鈕(Submit Button)

<input type="submit">定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

顯示效果

下拉列表

<select> 元素用來創建下拉列表。
<select>元素中的 <option> 標籤定義了列表中的可用選項。
下拉列表默認選擇排在第一位的選項，如果要預設選項可以使用selected

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

顯示效果

創建一個簡單的帶有預選值的下拉列表

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

顯示效果

表單標題邊框

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

顯示效果