一、表單概述

1、作用：

1. 用于為用戶創(chuàng)建 HTML 表單,用于向服務(wù)器傳輸數(shù)據(jù)。
2. 表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
3. 表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

2、格式

<form action="login.action" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

3、說(shuō)明

1. 所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面
2. form標(biāo)簽中有兩個(gè)比較重要的屬性action和method以及enctype
   • action 提交地址（一般是服務(wù)器后臺(tái)地址）
   • method 提交方式
   • enctype 設(shè)置采用什么樣的形式提交數(shù)據(jù)

二 、標(biāo)簽

1、作用

標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單

2、格式

<form 
    name="test" 
    action="form_action.action" 
    method="get">
</form>

3、常用屬性：

1. name：表單提交時(shí)的名稱
2. action：提交到的地址
3. method：規(guī)定用于發(fā)送 form-data 的 HTTP 方法，提交方式：get和post
4. enctype：規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼
   • application/x-www-form-urlencoded：在發(fā)送前編碼所有字符（默認(rèn)）
   • text/plain：空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼
   • multipart/form-data：使用包含文件上傳控件的表單時(shí)，必須使用該值

4、總結(jié)

1. html form是表單區(qū)域標(biāo)簽，通常此標(biāo)簽內(nèi)放輸入框、單選、多選、多行文本框、下拉選項(xiàng)菜單等表單內(nèi)容
2. form的action的值填寫(xiě)為將表單提交內(nèi)容到后臺(tái)控制層。

三 、input標(biāo)簽

1、作用

input標(biāo)簽用于搜集用戶信息。根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

！??！如果說(shuō)td是表格最核心的標(biāo)簽，那么input就是表單最核心的標(biāo)簽。 input標(biāo)簽有一個(gè)type屬性，這個(gè)屬性有很多類型的取值，取值的不同就決定了input標(biāo)簽的功能和外觀不同。

2、格式

<input 
    name="username" 
    type="text" 
    placeholder="用戶名" 
    maxlength=10 
    value=123 
/>

3、HTML4 Input 類型

3.1、明文輸入框

1. 作用：
   用戶可以在輸入框內(nèi)輸入內(nèi)容
2. 輸入明文文本內(nèi)容

   <p>
     賬號(hào):<input type="text"/>
   </p>
   

3. 給輸入框設(shè)置默認(rèn)值

   <p>
     賬號(hào):<input type="text" value="xxx"/>
   </p>
   <p>
     密碼:<input type="password" value="xxx"/>
   </p>
   

4. 規(guī)定輸入字段中的字符的最大長(zhǎng)度

   <p>
     密碼:<input type="password" maxlength="15"/>
   </p>
   

3.2、暗文輸入框

1. 作用：
   用戶可以在輸入框內(nèi)輸入內(nèi)容
2. 示例代碼

   <p>
     密碼:<input type="password"/>
   </p>
   也可以指定默認(rèn)值，也可以指定最大長(zhǎng)度。
   

3.3、 單選框(radio)

1. 作用：
   用戶只能從眾多選項(xiàng)中選擇其中一個(gè)
2. 單選按鈕，
   天生是不互斥的，如果想互斥，必須要有相同的name屬性
3. 示例

   籃球<input type="radio" name="a" value="basketball">
   足球<input type="radio" name="a" value="">
   皮球<input type="radio" name="a" value="">
   排球<input type="radio" name="a" value="">
   鉛球<input type="radio" name="a" value="">
   

>說(shuō)明：value屬性后期服務(wù)器獲取值時(shí)才會(huì)用到

3.4、多選框(checkbox)

1. 作用：
   用戶只能從眾多選項(xiàng)中選擇多個(gè)
2. 復(fù)選框，
   最好也是有相同的name（雖然他不需要互斥）
3. 示例

   籃球<input type="checkbox" name="a">
   足球<input type="checkbox" name="a">
   皮球<input type="checkbox" name="a">
   排球<input type="checkbox" name="a">
   鉛球<input type="checkbox" name="a">
   

3.5、按鈕(button)

1. 作用：
   定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過(guò) JavaScript 啟動(dòng)腳本，觸發(fā)js事件）
2. 格式：

   <input type="button" value="按鈕" />
   

3.6、 圖片按鈕(image)

1. 作用：
   定義圖像形式的提交按鈕
2. 格式

   <input type="image" src="cancel.png" />
   

3.7、 重置按鈕(reset)

1. 作用：
   定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)
2. 格式：

   <input type="reset" value ="重置"/>
   

3. 說(shuō)明：
   • 這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“重置”文字
   • reset只對(duì)form表單中表單項(xiàng)有效果

3.8、 提交按鈕(submit)

1. 作用：
   定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到action屬性指定的頁(yè)面
2. 格式：

   <input type="submit" value="提交"/>
   

3. 說(shuō)明：
   • 這個(gè)按鈕不需要寫(xiě)value自動(dòng)就有“提交”文字
   • 要想通過(guò)submit提交數(shù)據(jù)到服務(wù)器, 被提交的表單項(xiàng)都必須設(shè)置name屬性
   • 默認(rèn)明文傳輸(GET)不安全，可以將method屬性設(shè)置為POST改為非明文傳輸(學(xué)到Ajax再理解)
4. 示例代碼：

   <form action="http://www.baidu.com" method="get">
       賬號(hào): <input type="text" name="user"/><br>
       密碼: <input type="text" name="psw"/><br>
       <input type="submit"/>
   </form>
   

3.9、 圖片按鈕(image)

1. 作用
   定義圖像形式的提交按鈕
2. 格式：

   <input type="image" src="icon.png" />
   

3. 說(shuō)明
   與submit效果類似，只不過(guò)是圖片按鈕。

3.10、多行文本框(textarea)

1. 作用:
   textarea標(biāo)簽用于在表單中定義多行的文本輸入控件
2. 格式：

   <textarea rows="10" cols="30"></textarea>
   <!--cols屬性表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見(jiàn)寬度 -->
   <!-- rows屬性表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見(jiàn)行數(shù)-->
   

3.11、隱藏域(hidden)

1. 作用：
   定義隱藏的輸入字段（一般用于傳遞隱藏?cái)?shù)據(jù)，用的不多）
2. 格式：

   <input type="hidden">
   

3.12、下拉框(select)

1、屬性disable：禁止選中
2、屬性select=“selected”：默認(rèn)選中

<select id="cars">
    <option value="benz">奔馳</option>
    <option value="bmw">寶馬</option>
    <option value="audi">奧迪</option>
    <option value="landrover">路虎</option>
    <option value="maserati">瑪莎拉蒂</option>
    <option value="bentley">賓利</option>
     <option value="lamborghini">蘭博基尼</option>
</select>
請(qǐng)輸入你的車型: <input type="text" list="cars">

說(shuō)明：

在js代碼中,清除option的操作：
1、直接使用Dom操作的remove刪除
var select_ele = document.getElementByid("select_id");
var children = select_ele.children;
for(var i = 0;i<children.length; ){
 children[i].remove;
}
2、直接獲取所有options,然后通過(guò)改變他的長(zhǎng)度進(jìn)行刪除，從后面開(kāi)始刪。
var select_ele = document.getElementByid("select_id");
select_ele.options.length=0;

3.13、文件上傳（file）

1、用于文件上傳，默認(rèn)是單文件，如果想上傳多個(gè)文件 加上multiple屬性
2、格式：

單文件上傳<input type="file"/>
多文件上傳<input type="file" multiple/>
只上傳圖片<input type="file" accept="image/*"> <!--accept屬性指定上傳文件的類型-->

4、HTML5智能表單

1. type = "email" 限制用戶輸入必須為Email類型
2. type="url" 限制用戶輸入必須為URL類型
3. type="date" 限制用戶輸入必須為日期類型
4. type="datetime" 顯示完整日期 含時(shí)區(qū)
5. type="datetime-local" 顯示完整日期 不含時(shí)區(qū)
6. type="time" 限制用戶輸入必須為時(shí)間類型
7. type="month" 限制用戶輸入必須為月類型
8. type="week" 限制用戶輸入必須為周類型
9. type="number" 限制用戶輸入必須為數(shù)字類型
10. type="range" 生成一個(gè)滑動(dòng)條
11. type="search" 具有搜索意義的表單results="n"屬性
12. type="color" 生成一個(gè)顏色選擇表單
13. type="tel" 顯示電話號(hào)碼

5、HTML5新增表單屬性

1. required:內(nèi)容不能為空
2. placeholder 表單提示信息

   <input type="text" placeholder="請(qǐng)輸入用戶名"/>
   

3. autofocus:自動(dòng)聚焦
4. pattern: 正則表達(dá)式 輸入的內(nèi)容必須匹配到指定正則范圍
5. autocomplete:是否保存用戶輸入值
   • 默認(rèn)為on，
   • 關(guān)閉提示選擇off
6. formaction: 在submit里定義提交地址
7. datalist: 輸入框選擇列表配合list使用 list值為datalist的id值
8. output: 計(jì)算或腳本輸出