建立表單（form元素)
form元素可以指定下面的內(nèi)容:
(1)表單的布局。
(2)指定處理表單的服務(wù)嘴程序URI地址诱桂，該服務(wù)端程序應(yīng)該可以處理“名稱值”對
(3)數(shù)據(jù)傳送到服務(wù)器的方式帘瞭。(4)表單數(shù)據(jù)的字符編碼淑掌。
(5)除了包含表單控件外，form元素也可以包含其他的文本元素蝶念，如段落抛腕、列表等，form元素的屬性很多媒殉，下面幾個(gè)比較重要担敌，且較常使用:
- 其中action屬性用于設(shè)定處理表單數(shù)據(jù)程序URI的地址，如http:/ocalhost/test.asp廷蓉。
- 屬性method用來定義數(shù)據(jù)傳送到服務(wù)器的方式全封。有4種主要的方式:
當(dāng)method- "GET"時(shí)， 將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器桃犬，即將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的GET傳輸方式傳送到服務(wù)器刹悴。
當(dāng)method "POST"時(shí)，則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的POST傳輸方式傳送到服務(wù)器攒暇。
當(dāng)method "PUT"時(shí)土匀，則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的PUT傳輸方式傳送到服務(wù)器。
當(dāng)method "DELETE"時(shí)扯饶，則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的DELETE傳輸方式傳送到服務(wù)器恒削。 - 屬性name用于設(shè)定表單的名稱。
- 屬性target用來指定輸入數(shù)據(jù)結(jié)果顯示在哪個(gè)窗口尾序，某些情況下需要與frame元素配合使用钓丰。
- 屬性enetype用來設(shè)置表單數(shù)據(jù)的內(nèi)容類型。
- 屬性acept-charset 用來設(shè)置服務(wù)器端可以處理的字特編碼每币，這個(gè)屬性的值是個(gè)字符編碼列表携丁，使用空自或者退號分割，目的是揭承國覽器限制用戶輸入的數(shù)據(jù)，以免不能被服務(wù)器處理的數(shù)據(jù)被輸入梦鉴。如果不定義該屬性李茫，該屬性的默認(rèn)值是UNKNOWN,表示不會限制用戶的輸入。
- autocomplete屬性規(guī)定所有表單控件是香應(yīng)鎮(zhèn)相有自動完成功能肥橙。當(dāng)設(shè)置autocomplete="on"時(shí)表示執(zhí)行自動完成功能魄宏，當(dāng)設(shè)置autocomplete="off"時(shí)表示不執(zhí)行自動完成功能。在HTML5規(guī)定該屬性之前存筏，大部分測覽器都提供輸入文本框的自動完成功能宠互，即使HTML4沒有定義autocomplete屬性。但autocomplete屬性現(xiàn)在不但用于form元素定義表單的輸入文本框椭坚，而且還適用于很多其他元素予跌。
-
novalidate 屬性規(guī)定在提交表單時(shí)不再進(jìn)行有效性驗(yàn)證。
注意善茎，對于button和input 元素券册，可以定義屬性formnovalidate重寫form的novalidate屬性。 - onreset 和onsubmit是兩個(gè)全局屬性垂涯，是主要針對reset 按鈕和submit按鈕來說的烁焙，分別設(shè)定了在按下相應(yīng)按鈕之后要執(zhí)行的程序。
form表單中input元素的屬性及其功能描述：
| input屬性 | 屬性值 | 功能描述 |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | 規(guī)定通過文件上傳來提交的文件的類型集币。 (只針對type="file") |
| align | left right top middle bottom | HTML5已廢棄考阱，不贊成使用。規(guī)定圖像輸入的對齊方式鞠苟。 (只針對type="image") |
| alt | left right top middle bottom | 定義圖像輸入的替代文本乞榨。 (只針對type="image") |
| autocomplete(new) | on off | autocomplete 屬性規(guī)定 <input> 元素輸入字段是否應(yīng)該啟用自動完成功能。 |
| autofocus(new) | autofocus | 屬性規(guī)定當(dāng)頁面加載時(shí) <input> 元素應(yīng)該自動獲得焦點(diǎn)当娱。 |
| checked | checked | checked 屬性規(guī)定在頁面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素吃既。 (只針對 type="checkbox" 或者 type="radio") |
| disabled | disabled | disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。 |
| form(new) | form_id | form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單跨细。 |
| formaction(new) | URL | 屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL鹦倚。(只針對 type="submit" 和 type="image") |
| formenctype(new) | application/x-www-form-urlencoded multipart/form-data text/plain | 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(只適合 type="submit" 和 type="image")。 |
| formmethod(new) | get post | 定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法冀惭。 (只適合 type="submit" 和 type="image") |
| formnovalidate(new) | formnovalidate | formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性震叙。 |
| formtarget(new) | _blank _self _parent _top framename | 規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image") |
| height](new) | pixels | 規(guī)定 <input>元素的高度散休。(只針對type="image") |
| list(new) | datalist_id | 屬性引用 <datalist> 元素媒楼，其中包含 <input> 元素的預(yù)定義選項(xiàng)。 |
| max(new) | number date | 屬性規(guī)定 <input> 元素的最大值戚丸。 |
| maxlength | number | 屬性規(guī)定 <input> 元素中允許的最大字符數(shù)划址。 |
| min(new) | number date | 屬性規(guī)定 <input>元素的最小值。 |
| multiple(new) | multiple | 屬性規(guī)定允許用戶輸入到 <input> 元素的多個(gè)值。 |
| nam | text | name 屬性規(guī)定 <input> 元素的名稱夺颤。 |
| pattern(new) | regexp | pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的正則表達(dá)式痢缎。 |
| placeholder | text | placeholder 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡短的提示信息 。 |
| readonly | readonly | readonly 屬性規(guī)定輸入字段是只讀的世澜。 |
| required(new) | required | 屬性規(guī)定必需在提交表單之前填寫輸入字段独旷。 |
| size | number | size 屬性規(guī)定以字符數(shù)計(jì)的 <input> 元素的可見寬度。 |
| src | URL | src 屬性規(guī)定顯示為提交按鈕的圖像的 URL宜狐。 (只針對 type="image") |
| step(new) | number | step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔势告。 |
| type | button checkbox color(new) date(new) datetime(new) datetime-local(new) email(new) file hidden image month(new) number(new) password radio range(new) reset search(new) submit tel(new) text time(new) url(new) week(new) |
type 屬性規(guī)定要顯示的 <input> 元素的類型。 |
| value | text | 指定 <input> 元素 value 的值抚恒。 |
| width(new) | pixels | width 屬性規(guī)定 <input> 元素的寬度。 (只針對type="image") |
創(chuàng)建組合控件和列表框控件
組合框控件和列表框控件使用selet元素和option元素共同來完成络拌，它們必須配合使用才能完成一個(gè)組合框控件或列表框控件的功能: select元素用來指定一個(gè)表單的類型俭驮，且需要option 元素為該表單提供數(shù)值項(xiàng)〈好常基本語法格式如下:
<select name="select" size="size" multiple= "multiple">
<option selected="selected">Item 1</option>
<option selected="selected">Item 2</option>
<optionselected="selected">Item 3</option>
<option selected="se lected">Item 4</option>
</select>
當(dāng)select元素不包含屬性size 和屬性multiple時(shí)混萝，表單類型顯示為菜單(組合框),如果使用了屬性size和屬性mutiple中的任意個(gè)， 則表單類型顯示為列表框萍恕。
select元素
select元素用來創(chuàng)建列表框逸嘀，它包含下面的屬性:
- name屬性用來為該控件定義一個(gè)名稱標(biāo)識。
- size屬性允粤，如果select元素被呈現(xiàn)為列表框崭倘， 這個(gè)屬數(shù)量。如果可選項(xiàng)多于這個(gè)數(shù)量类垫，就會出現(xiàn)垂直滾動條司光。如果沒有定義這個(gè)屬性，select元素就被呈現(xiàn)為菜單悉患。
- multiple屬性残家，當(dāng)設(shè)定時(shí)，這個(gè)邏輯值允許同時(shí)選擇多個(gè)項(xiàng)售躁。 而在沒有設(shè)定時(shí)坞淮，select元素只允許選擇單個(gè)選項(xiàng)。典型地陪捷，可視用戶瀏覽器以列表框渲染多選元素回窘，而以下拉框渲染單選元素。
select元素建立一個(gè)可被用戶選擇的選項(xiàng)列表揩局，每個(gè)select元素必須包含至少一個(gè)選項(xiàng)毫玖，一個(gè)選項(xiàng)通過一個(gè)option元素來指定。
option 元素
option元素的使用類似于label 元素，但它可以有一個(gè) slected 屬性付枫，當(dāng)該屬性的值被設(shè)置為selected 時(shí)烹玉，表示該項(xiàng)被選中。
option元素的value 屬性定義控件的初始值阐滩，如果定義該屬性二打，初始值就是option元素的內(nèi)容。
<select name="select" size="size" multiple= "multiple">
<option selected="selected">Item 1</option>
<option selected="selected">Item 2</option>
<optionselected="selected">Item 3</option>
<option selected="se lected">Item 4</option>
</select>
成組選項(xiàng)
使用optgroup元素掂榔，可以將select 元素中的選項(xiàng)進(jìn)行邏輯分組继效。optgroup元素必須在select元素中直接指定，不允許嵌套装获，這意味著不能進(jìn)行二級分組瑞信。使用該元素的label 屬性可以定義分組顯示的標(biāo)簽名，但是標(biāo)簽名不能被當(dāng)作選擇項(xiàng)穴豫。
例如下面的代碼凡简，演示了如何在組合框和列表框中分組選項(xiàng):
<select>
<optgroup label=" 大洋">
<option>太平洋</option>
<option>大西洋</option>
<option>印度洋</option>
<option>北冰洋</option>
</optgroup>
<optgroup label=" 大海"> .
<option>東海</option>
<option>黃海</option>
<option>南海</option>
</optgroup>
</select>
創(chuàng)建多行文本框（textarea元素）
基本語法格式如下：
<textarea name="xxx" cols="n" rows="n" wrap="off|hard|soft">
...
</textarea>
textarea元素屬性及其功能描述：
| 屬性 | 屬性值 | 功能描述 |
|---|---|---|
| name | 字符串 | 定義控件名稱 |
| rows | 字符數(shù)字 | 定義控制可視化文本行數(shù) |
| cols | 字符數(shù)字 | 定義可視字符的寬度 |
| wrap | off soft hard |
定義是否自動換行 soft表示自動軟換行 hard表示自動硬換行 |
輸入框的選項(xiàng)列表
datalist元素定義輸入框的選項(xiàng)列表，列表是通過datalist內(nèi)的option元素創(chuàng)建的精肃。如需要把datalist綁定到輸入框秤涩，則用輸入框的list 屬性引用datalist 的id，例如：
<input type="url" list="url_list" name="link">
<datalist id="url_list">
<option label="A" value="http://www.a.com">
<option label="B" value="http://www.b.com">
<option label="C" value="http://www.c.com">
</datalist>
密鑰對生成器
keygen元素的作用是提供一種驗(yàn)證用戶的可靠方法司抱。keygen元素是密鑰對生成器筐眷，當(dāng)提交表單時(shí)，會生成兩個(gè)鍵习柠， 一個(gè)是私鑰匀谣，一個(gè)是公鑰。
私鑰(private key)存儲于客戶端津畸，公鑰(public key)則被發(fā)送到服務(wù)器振定。公鑰可用于之后驗(yàn)證用戶的客戶端證書。
<form action="myform.asp" method= "get">
用戶名: <input type="text" name="user_ name"><br>
加密: <keygen name= "security">
<input type="submit">
</form>
輸出結(jié)果控件
output元素用于不同類型的輸出肉拓，如計(jì)算結(jié)果或腳本輸出后频。
output的屬性及其功能描述：
| 屬性 | 值 | 描述 |
|---|---|---|
| for | element_id | 描述計(jì)算中使用的元素與計(jì)算結(jié)果之間的關(guān)系。 |
| form | form_id | 定義輸入字段所屬的一個(gè)或多個(gè)表單暖途。 |
| name | name | 定義對象的唯一名稱（表單提交時(shí)使用）卑惜。 |
例：
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
運(yùn)行進(jìn)度條控件
progress元素定義運(yùn)行中的進(jìn)度，例如下面代碼驻售，如果瀏覽器不能呈現(xiàn)該元素露久，就顯示元素內(nèi)部內(nèi)容：
<progress max="100" value="80">
<span id="objprogress">80</span>%
</progress>
等級標(biāo)量控件
meter元素用來表示范圍已知且可度量的等級標(biāo)量或分?jǐn)?shù)值，定義如下：欺栗。
<meter value="90" max="100" min="0" low="40" high="80" optimum="100"></meter>
meter的屬性及其功能描述：
| 屬性 | 值 | 描述 |
|---|---|---|
| form | form_id | 規(guī)定 <meter> 元素所屬的一個(gè)或多個(gè)表單毫痕。 |
| high | number | 規(guī)定被視作高的值的范圍征峦。 |
| low | number | 規(guī)定被視作低的值的范圍。 |
| max | number | 規(guī)定范圍的最大值消请。 |
| min | number | 規(guī)定范圍的最小值栏笆。 |
| optimum | number | 規(guī)定度量的優(yōu)化值。 |
| value | number | 必需臊泰。規(guī)定度量的當(dāng)前值蛉加。 |
為表單添加結(jié)構(gòu)(fieldset元素和legend元素）
fieldset元素和legend元素一般 是配合使用。fieldset 元素可以包含其他的表單控件缸逃，在這些表單控件周圍畫一一個(gè)方框针饥，而legend元素可以顯示-一個(gè)標(biāo)志標(biāo)簽說明被包含的這些表單控件。這兩個(gè)元素配合需频，也就是將一些表 單控件分組丁眼，從而可以更有效地顯示信息『爻剑基本語法格式如下:
<fieldset>
<legend>表單集說明標(biāo)簽</legend>
...其他表單控件元素...
</fieldset>
顯示結(jié)果如下：
并且户盯，一個(gè)表單內(nèi)可以使用多個(gè)fieldset元素(包含legend元素)來定義表單集。也可以單獨(dú)使用fieldset元素饲化，即在表單控件周圍畫一一個(gè)方框，而不顯示標(biāo)志標(biāo)簽吗伤。
