大家好皱碘，我是IT修真院北京分院第23期學(xué)員询一。今天小課堂的主要內(nèi)容是，input表單的應(yīng)用，還有在html5中新增的屬性健蕊。
表單元素是允許用戶在表單中(比如:文本域,下拉列表,單選框,復(fù)選框等等)輸入信息的元素菱阵，最主要的作用就是收集信息。表單元素是頁面中不可缺少的元素缩功，在最新的H5中晴及，表單元素也新增了一些屬性，在頁面構(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控件在頁面中的顯示寬度（必須是正整數(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值是否能被用戶修改村砂，可用于信息展示等頁面。作用于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。如在登陸頁面不想顯示上一個(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è)上下箭頭。
