html表單：
<form> 元素
HTML 表單（<form> 元素）用于收集用戶輸入。
表單元素指的是不同類型的 input 元素传黄、復(fù)選框、單選按鈕刀诬、提交按鈕等等膘掰。
<input> 元素是最重要的表單元素倔约。
<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性奸鸯。
文本輸入類型：
<input type="text"> 定義用于文本輸入的單行輸入字段：
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>請(qǐng)注意表單本身是不可見的咪笑。</p>
<p>同時(shí)請(qǐng)注意文本字段的默認(rèn)寬度是 20 個(gè)字符。</p>
</body>
單選輸入按鈕類型：
<input type="radio"> 定義單選按鈕府喳。
單選按鈕允許用戶在有限數(shù)量的選項(xiàng)中選擇其中之一：
<body>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</body>
提交類型：
<input type="submit"> 定義用于向表單處理程序（form-handler）提交表單的按鈕蒲肋。
表單處理程序通常是包含用來處理輸入數(shù)據(jù)的腳本的服務(wù)器頁面蘑拯。
表單處理程序在表單的 action 屬性中指定：
<body>
<form action="/demo/demo_form.asp">
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>
<p>如果您點(diǎn)擊提交钝满，表單數(shù)據(jù)會(huì)被發(fā)送到名為 demo_form.asp 的頁面。</p>
</body>
action 屬性
action 屬性定義在提交表單時(shí)執(zhí)行的動(dòng)作申窘。向服務(wù)器提交表單的通常做法是使用提交按鈕弯蚜。通常，表單會(huì)被提交到 web 服務(wù)器上的網(wǎng)頁剃法。如果省略 action 屬性碎捺，則 action 會(huì)被設(shè)置為當(dāng)前頁面。
在上面的例子中，指定了某個(gè)服務(wù)器腳本來處理被提交表單：
<form action="/demo/demo_form.asp">
Method 屬性
method 屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET 或 POST）收厨。
<form action="action_page.php" method="GET">或者<form action="action_page.php" method="POST">
何時(shí)使用 GET晋柱？
如果表單提交是被動(dòng)的（比如搜索引擎查詢），并且沒有敏感信息诵叁。當(dāng)您使用 GET 時(shí)雁竞，表單數(shù)據(jù)在頁面地址欄中是可見的。GET 最適合少量數(shù)據(jù)的提交拧额。瀏覽器會(huì)設(shè)定容量限制碑诉。
何時(shí)使用 POST？
如果表單正在更新數(shù)據(jù)侥锦，或者包含敏感信息（例如密碼）进栽。
POST 的安全性更高，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的恭垦。
Name 屬性
如果要正確地被提交快毛，每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性。
<body>
<form action="/demo/demo_form.asp">
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>
<p>如果您點(diǎn)擊提交番挺，表單數(shù)據(jù)會(huì)被發(fā)送到名為 demo_form.asp 的頁面祸泪。</p>
<p>first name 不會(huì)被提交，因?yàn)榇?input 元素沒有 name 屬性建芙。</p>
</body>
用 <fieldset> 組合表單數(shù)據(jù)
fieldset 標(biāo)簽 -- 對(duì)表單進(jìn)行分組
在form表單中没隘，我們可以對(duì)form中的信息進(jìn)行分組歸類，如注冊(cè)表單的form禁荸，我們可以將注冊(cè)信息分組成
基本信息（一般為必填）
詳細(xì)信息（一般為可選）
那我們?nèi)绾胃玫膩韺?shí)現(xiàn)呢右蒲？我們可考慮在表單form中加入下面兩個(gè)標(biāo)簽：
fieldset：對(duì)表單進(jìn)行分組，一個(gè)表單可以有多個(gè)fieldset赶熟。
legend：說明每組的內(nèi)容描述瑰妄。
<body>
<form action="http://www.dreamdu.com/dreamdu.php" method="post" enctype="multipart/form-data" id="dreamduform">
<fieldset>
<legend>用戶名與密碼:</legend>
<input name="hiddenField" type="hidden" value="hiddenvalue" />
<label for="username">用戶名:</label>
<input type="text" id="username" value="www.dreamdu.com" />
<label for="pass">密碼:</label>
<input type="password" id="pass" />
</fieldset>
<fieldset>
<legend>性別:</legend>
<label for="boy">男</label>
<input type="radio" value="1" id="sex" />
<label for="girl">女</label>
<input type="radio" value="2" id="sex" />
<label for="sex">保密</label>
<input type="radio" value="3" id="sex" />
</fieldset>
<fieldset>
<legend>我最喜愛的:</legend>
<label for="computer">計(jì)算機(jī)</label>
<input type="checkbox" value="1" id="fav" />
<label for="trval">旅游</label>
<input type="checkbox" value="2" id="fav" />
<label for="buy">購物</label>
<input type="checkbox" value="3" id="fav" />
</fieldset>
</form>
</body>
HTML Form 屬性
HTML <form> 元素，已設(shè)置所有可能的屬性映砖，是這樣的：
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
form所有屬性：
accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）间坐。
action 規(guī)定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開啟）邑退。
enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）竹宋。
method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。
name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）地技。
novalidate 規(guī)定瀏覽器不驗(yàn)證表單蜈七。
target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。
html表單元素：
<input> 元素
最重要的表單元素是 <input> 元素莫矗。<input> 元素根據(jù)不同的 type 屬性飒硅，可以變化為多種形態(tài)砂缩。
<option> 元素
<option> 元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)三娩。您能夠通過添加 selected 屬性來定義預(yù)定義選項(xiàng)庵芭。
<select> 元素（下拉列表）
<select> 元素定義下拉列表：
<body>
<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>
</body>
<textarea> 元素
<textarea> 元素定義多行輸入字段（文本域）：
<body>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
<button> 元素
<button> 元素定義可點(diǎn)擊的按鈕：
<button type="button" onclick="alert('Hello World!')">按鈕</button>
HTML5 表單元素
HTML5 增加了如下表單元素：
<datalist>
<keygen>
<output>
HTML5 <datalist> 元素
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表。
用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表雀监。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性喳挑。
<body>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>注釋：</b>Safari 或 IE9（以及更早的版本）不支持 datalist 標(biāo)簽。</p>
</body>
html輸入類型
輸入類型：text
<input type="text"> 定義供文本輸入的單行輸入字段滔悉。
輸入類型：password
<input type="password"> 定義密碼字段伊诵。
輸入類型：submit
<input type="submit"> 定義提交表單數(shù)據(jù)至表單處理程序的按鈕.。
輸入類型: radio
<input type="radio"> 定義單選按鈕回官。
輸入類型: checkbox
<input type="checkbox"> 定義復(fù)選框曹宴。
復(fù)選框允許用戶在有限數(shù)量的選項(xiàng)中選擇零個(gè)或多個(gè)選項(xiàng)。
輸入類型: button
<input type="button> 定義按鈕歉提。
HTML5 輸入類型
HTML5 增加了多個(gè)新的輸入類型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
輸入類型：number
<input type="number"> 用于應(yīng)該包含數(shù)字值的輸入字段笛坦。您能夠?qū)?shù)字做出限制。
<body>
<form action="">
User name:<br>
<input type="text" name="username" value="Mickey">
<br>
User password:<br>
<input type="password" name="psw" value="123456">
<br><br>
<input type="submit" value="提交">
</form>
<p>密碼字段中的字符被掩碼（顯示為星號(hào)或圓點(diǎn)）苔巨。</p>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br>
<input type="button" onclick="alert('Hello World!')" value="定義按鈕">
<p>html5 number元素</p>
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
<input type="submit">
</body>
輸入類型：date
<input type="date"> 用于應(yīng)該包含日期的輸入字段版扩。
根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中侄泽。
輸入類型：color
<input type="color"> 用于應(yīng)該包含顏色的輸入字段礁芦。
根據(jù)瀏覽器支持，顏色選擇器會(huì)出現(xiàn)輸入字段中悼尾。
輸入類型：range
<input type="range"> 用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段柿扣。
根據(jù)瀏覽器支持，輸入字段能夠顯示為滑塊控件闺魏。
輸入類型：month
<input type="month"> 允許用戶選擇月份和年份未状。
根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中析桥。
輸入類型：week
<input type="week"> 允許用戶選擇周和年司草。
根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中泡仗。
<body>
<p>
當(dāng)您填寫輸入字段時(shí)會(huì)彈出日期選擇器埋虹。
</p>
<form action="/demo/demo_form.asp">
生日：
<input type="date" name="bday">
<input type="submit">
</form>
<br>
<p>點(diǎn)擊會(huì)彈出取色器</p>
<form action="action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
<br>
<p>
輸入類型 "range" 可顯示為滑動(dòng)控件。
</p>
<form action="/demo/demo_form.asp" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
<br>
<p>
當(dāng)您填寫輸入字段時(shí)會(huì)彈出日期選擇器沮焕。
</p>
<form action="/demo/demo_form.asp">
生日（月和年）：
<input type="month" name="bdaymonth">
<input type="submit">
</form>
<br>
<form action="action_page.php">
第幾周:
<input type="week" name="year_week">
<input type="submit">
</form>
</body>
輸入類型：time
<input type="time"> 允許用戶選擇時(shí)間（無時(shí)區(qū)）吨岭。
根據(jù)瀏覽器支持，時(shí)間選擇器會(huì)出現(xiàn)輸入字段中峦树。
輸入類型：datetime
<input type="datetime"> 允許用戶選擇日期和時(shí)間（有時(shí)區(qū)）辣辫。
根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中魁巩。
輸入類型：datetime-local
<input type="datetime-local"> 允許用戶選擇日期和時(shí)間（無時(shí)區(qū)）急灭。
根據(jù)瀏覽器支持，日期選擇器會(huì)出現(xiàn)輸入字段中谷遂。
輸入類型：email
<input type="email"> 用于應(yīng)該包含電子郵件地址的輸入字段葬馋。
根據(jù)瀏覽器支持，能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證肾扰。
某些智能手機(jī)會(huì)識(shí)別 email 類型畴嘶，并在鍵盤增加 ".com" 以匹配電子郵件輸入。
輸入類型：search
<input type="search"> 用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）集晚。
輸入類型：url
<input type="url"> 用于應(yīng)該包含 URL 地址的輸入字段窗悯。
根據(jù)瀏覽器支持，在提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段偷拔。
<body>
<p>
當(dāng)您填寫輸入字段時(shí)會(huì)彈出日期選擇器蒋院。
</p>
<form action="/demo/demo_form.asp">
請(qǐng)選取一個(gè)時(shí)間：
<input type="time" name="usr_time">
<input type="submit">
</form>
<br>
輸入類型：datetime-local
<input type="datetime-local"> 《br>
允許用戶選擇日期和時(shí)間（無時(shí)區(qū)）。
根據(jù)瀏覽器支持莲绰，日期選擇器會(huì)出現(xiàn)輸入字段中
<br>
<form action="/demo/demo_form.asp">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
<br>
<form action="/demo/demo_form.asp">
搜索谷歌：
<input type="search" name="googlesearch">
<input type="submit">
</form>
<br>
<form action="action_page.php">
請(qǐng)?zhí)砑幽氖醉摚? <input type="url" name="homepage">
<input type="submit">
</form>
</body>
