大家好，我是IT修真院北京分院第23期學員。今天小課堂的主要內容是，input表單的應用，還有在html5中新增的屬性。

表單元素是允許用戶在表單中(比如:文本域,下拉列表,單選框,復選框等等)輸入信息的元素，最主要的作用就是收集信息。表單元素是頁面中不可缺少的元素，在最新的H5中，表單元素也新增了一些屬性，在頁面構建中發揮了重要的作用。一般來說，表單包含如下幾個部分：

1. 提示信息：表單中包含的說明性文字

2. 表單控件：包含了具體的表單功能項

3. 表單域：容納所有表單控件和提示信息

常用的表單元素，包括：

1. form: 定義供用戶輸入的表單。

2. fieldset: 定義域。即輸入區加有文字的邊框。

3. legend：定義域的標題，即邊框上的文字。

4. label：定義一個控制的標簽。如輸入框前的文字，用以關聯用戶的選擇。

5. input: 定義輸入域，常用。可設置type屬性，從而具有不同功能。

6. textarea: 定義文本域(一個多行的輸入控件)，默認可通過鼠標拖動調整大小。

7. button: 定義一個按鈕。

8. select: 定義一個選擇列表，即下拉列表。

9. option: 定義下拉列表中的選項。

接下來是對這些表單元素的具體分析。

<form name="" action="" method="get">……</form>

name : 表單名稱；action : 用來指定表單處理程序的位置（url）；method : 定義表單結果從瀏覽器傳送到服務器的方式，默認為"get"（也可以是post）

<input type="" name="" value="" size="">

name:控件名稱；value:input控件默認文本值；size:input控件在頁面中的顯示寬度（必須是正整數）

input常用type屬性如下：

1. text：單行文本輸入框，可以通過正整數的size控制框長度。

2. password：密碼輸入框。

3. radio：單選按鈕，同一組的單選按鈕必須要有相同的name。

4. checkbox：復選框，同一組的單選按鈕必須要有相同的name。

5. button：普通按鈕。

6. submit：提交按鈕，每出現一次，一個 Submit 對象就會被創建。

7. reset：重置按鈕，會重置當前表單中全部的內容。

8. image：圖像形式的提交按鈕，寫法是“”。

9. hidden：隱藏域，隱藏字段對于用戶是不可見的。

10. file：文件域，用于文件上傳。

<select size="" multiple="multiple">

<option hidden>選項1</option>

……

</select>

size：下拉菜單的可見選項數；multiple：多選。

在最新的html5中，有一些表單的新增屬性，多用于js，如

datalist : 定義填寫一個input時，提示幾個option用于提示。可通過input的list特性與此元素作關聯。

output : 表示計算的結果。可通過for特性與其它能夠影響運算的元素（如input）作關聯。

還有一些新增的type屬性：

1. search：input會呈現為搜索框（與text類型的唯一區別在于當鼠標覆蓋時尾部出現叉號可快速清除輸入的內容）。

2. tel：編輯電話號碼的控件，提交時換行符會自動從輸入框中去掉。

3. url：編輯url的控件，提交時換行符與首位的空格都將自動去除。

4. email：可輸入一個郵件地址。

5. color : 選擇顏色的控件。

6. date : 選擇年月日的控件。

此外，還有time、datetime、datetime-local、month、week、number、range類型。

html5中input新增的一些較常用的特性：

1. list：關聯datalist所用的該datalist的id（即datalistform外建立，通過list關聯即可）。

2. pattern：一個正則表達式，用于檢查控件的值，可作用于text、search、tel、url、email類型的input。

3. form：一個字符串(為關聯的form表單的id)，用于表明該input屬于哪個form表單（作用類似list）。

4. formmethod：表明使用GET還是POST，能覆蓋form表單的method。僅在type為image或submit，且上面的form特性被設置的情況下才能使用。相似的有formtarget特性。

5. readonly：一個boolean值，表明該input值是否能被用戶修改，可用于信息展示等頁面。作用于type為hidden、range、color、checkbox、radio、file、button的input將被忽略。

6. maxlength：type為text、emal、search、password、tel或url（都為文本）時允許輸入的最大字符個數。

7. autocomplete：瀏覽器是否根據之前提交的輸入情況對此input自動填值（即以option形式匹配之前的輸入值），取值on或off，默認on。如在登陸頁面不想顯示上一個登陸的用戶名等時，可設置為off。

參考文獻

1. html元素-表單元素及實用屬性：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

相關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上傳文件或圖片應該怎么辦

涉及到angularjs，可參考插件https://github.com/nervgh/angular-file-upload

2. input為什么不使用閉合標簽

input為自閉和標簽，詳見W3C標準

3. type="number"在輸入框右側有上下箭頭可以加減數字，怎么去掉箭頭？

使用type="tel"時沒有右側上下箭頭。