HTML表單
HTML 表單用于搜集不同類型的用戶輸入品抽。
1. 形式<form>...</ form>
2. 元素
1. input
- text
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
- radio
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
- submit
<form action="action_page.php"> //action 屬性定義在提交表單時執(zhí)行的
動作。action 屬性定義在提交表單時執(zhí)行的動作清笨。
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>
附：method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
或：
<form action="action_page.php" method="POST">
GET 最適合少量數(shù)據(jù)的提交器腋。瀏覽器會設定容量限制溪猿。
如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）纫塌。POST 的安全性更加诊县，因為在頁面地址欄中被提交的數(shù)據(jù)是不可見的。
- password
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
- checkbox:復選框允許用戶在有限數(shù)量的選項中選擇零個或多個選項措左。
<form action="/demo/demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br><br>
<input type="submit">
</form>
- HTML5 增加了多個新的輸入類型：
- color
<form action="action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
- date
<form action="/demo/demo_form.asp">
生日：
<input type="date" name="bday">
<input type="submit">
</form>
限制日期
請輸入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
- datetime
- datetime-local
- month
- number
<form action="/demo/demo_form.asp">
數(shù)量（1 到 5 之間）：
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
固定步長
<form action="action_page.php">
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
<input type="submit">
</form>
- range滑塊控件
<form>
<input type="range" name="points" min="0" max="10">
</form>
- search
- tel
- time
- url
- week
2. 屬性
- 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> 組合表單數(shù)據(jù)
<fieldset> 元素組合表單中的相關(guān)數(shù)據(jù)
<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>
服務器接收到的用戶輸入為：
firstname=Mickey&lastname=Mouse
HTML <form> 元素胸嘁，已設置所有可能的屬性，是這樣的：
<form action="action_page.php" method="GET" target="_blank"
accept-charset="UTF-8" ectype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
...
</form>
- readonly 屬性
<input type="text" name="firstname" value="John" readonly> - disabled 屬性
<input type="text" name="firstname" value="John" disabled> - size 屬性:輸入字段的尺寸（以字符計）
<input type="text" name="firstname" value="John" size="40"> - maxlength 屬性:輸入字段允許的最大長度
<input type="text" name="firstname" maxlength="10">
3. <select> 元素（下拉列表）
<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
您能夠通過添加 selected 屬性來定義預定義選項凉逛。
<option value="fiat" selected>Fiat</option>
4. <textarea> 元素:多行輸入字段（文本域）：
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
5. <button> 元素定義可點擊的按鈕
<button type="button" onclick="alert('Hello World!')">點擊我性宏！</button>
