大家好，我是IT修真院北京分院第23期學(xué)員。今天小課堂的主要內(nèi)容是，input表單的應(yīng)用，還有在html5中新增的屬性。
表單元素是允許用戶在表單中(比如:文本域,下拉列表,單選框,復(fù)選框等等)輸入信息的元素，最主要的作用就是收集信息。表單元素是頁(yè)面中不可缺少的元素，在最新的H5中，表單元素也新增了一些屬性，在頁(yè)面構(gòu)建中發(fā)揮了重要的作用。一般來說，表單包含如下幾個(gè)部分：
1. 提示信息：表單中包含的說明性文字
2. 表單控件：包含了具體的表單功能項(xiàng)
3. 表單域：容納所有表單控件和提示信息
常用的表單元素，包括：
1. form: 定義供用戶輸入的表單。
2. fieldset: 定義域。即輸入?yún)^(qū)加有文字的邊框。
3. legend：定義域的標(biāo)題，即邊框上的文字。
4. label：定義一個(gè)控制的標(biāo)簽。如輸入框前的文字，用以關(guān)聯(lián)用戶的選擇。
5. input: 定義輸入域，常用。可設(shè)置type屬性，從而具有不同功能。
6. textarea: 定義文本域(一個(gè)多行的輸入控件)，默認(rèn)可通過鼠標(biāo)拖動(dòng)調(diào)整大小。
7. button: 定義一個(gè)按鈕。
8. select: 定義一個(gè)選擇列表，即下拉列表。
9. option: 定義下拉列表中的選項(xiàng)。
接下來是對(duì)這些表單元素的具體分析。
<form name="" action="" method="get">……</form>
name : 表單名稱；action : 用來指定表單處理程序的位置（url）；method : 定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方式，默認(rèn)為"get"（也可以是post）
<input type="" name="" value="" size="">
name:控件名稱；value:input控件默認(rèn)文本值；size:input控件在頁(yè)面中的顯示寬度（必須是正整數(shù)）
input常用type屬性如下：
1. text：?jiǎn)涡形谋据斎肟?，可以通過正整數(shù)的size控制框長(zhǎng)度。
2. password：密碼輸入框。
3. radio：?jiǎn)芜x按鈕，同一組的單選按鈕必須要有相同的name。
4. checkbox：復(fù)選框，同一組的單選按鈕必須要有相同的name。
5. button：普通按鈕。
6. submit：提交按鈕，每出現(xiàn)一次，一個(gè) Submit 對(duì)象就會(huì)被創(chuàng)建。
7. reset：重置按鈕，會(huì)重置當(dāng)前表單中全部的內(nèi)容。
8. image：圖像形式的提交按鈕，寫法是“”。
9. hidden：隱藏域，隱藏字段對(duì)于用戶是不可見的。
10. file：文件域，用于文件上傳。
<select size="" multiple="multiple">
<option hidden>選項(xiàng)1</option>
……
</select>
size：下拉菜單的可見選項(xiàng)數(shù)；multiple：多選。
在最新的html5中，有一些表單的新增屬性，多用于js，如
datalist : 定義填寫一個(gè)input時(shí)，提示幾個(gè)option用于提示?？赏ㄟ^input的list特性與此元素作關(guān)聯(lián)。
output : 表示計(jì)算的結(jié)果。可通過for特性與其它能夠影響運(yùn)算的元素（如input）作關(guān)聯(lián)。
還有一些新增的type屬性：
1. search：input會(huì)呈現(xiàn)為搜索框（與text類型的唯一區(qū)別在于當(dāng)鼠標(biāo)覆蓋時(shí)尾部出現(xiàn)叉號(hào)可快速清除輸入的內(nèi)容）。
2. tel：編輯電話號(hào)碼的控件，提交時(shí)換行符會(huì)自動(dòng)從輸入框中去掉。
3. url：編輯url的控件，提交時(shí)換行符與首位的空格都將自動(dòng)去除。
4. email：可輸入一個(gè)郵件地址。
5. color : 選擇顏色的控件。
6. date : 選擇年月日的控件。
此外，還有time、datetime、datetime-local、month、week、number、range類型。
html5中input新增的一些較常用的特性：
1. list：關(guān)聯(lián)datalist所用的該datalist的id（即datalistform外建立，通過list關(guān)聯(lián)即可）。
2. pattern：一個(gè)正則表達(dá)式，用于檢查控件的值，可作用于text、search、tel、url、email類型的input。
3. form：一個(gè)字符串(為關(guān)聯(lián)的form表單的id)，用于表明該input屬于哪個(gè)form表單（作用類似list）。
4. formmethod：表明使用GET還是POST，能覆蓋form表單的method。僅在type為image或submit，且上面的form特性被設(shè)置的情況下才能使用。相似的有formtarget特性。
5. readonly：一個(gè)boolean值，表明該input值是否能被用戶修改，可用于信息展示等頁(yè)面。作用于type為hidden、range、color、checkbox、radio、file、button的input將被忽略。
6. maxlength：type為text、emal、search、password、tel或url（都為文本）時(shí)允許輸入的最大字符個(gè)數(shù)。
7. autocomplete：瀏覽器是否根據(jù)之前提交的輸入情況對(duì)此input自動(dòng)填值（即以option形式匹配之前的輸入值），取值on或off，默認(rèn)on。如在登陸頁(yè)面不想顯示上一個(gè)登陸的用戶名等時(shí)，可設(shè)置為off。
參考文獻(xiàn)
1. html元素-表單元素及實(shí)用屬性：http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"
2. W3School HTML 表單 ： http://www.w3school.com.cn/html/html_forms.asp" target="_blank"
3. HTML5-input元素新特性 ：http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date
相關(guān)ppt見：https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/
騰訊視頻：https://v.qq.com/x/page/o05246f2ah7.html
問題整理
1. 使用input上傳文件或圖片應(yīng)該怎么辦
涉及到angularjs，可參考插件https://github.com/nervgh/angular-file-upload
2. input為什么不使用閉合標(biāo)簽
input為自閉和標(biāo)簽，詳見W3C標(biāo)準(zhǔn)
3. type="number"在輸入框右側(cè)有上下箭頭可以加減數(shù)字，怎么去掉箭頭？
使用type="tel"時(shí)沒有右側(cè)上下箭頭。
