MDN表單指南（詳細參考）
<input>是內聯塊狀元素，既可以和其他元素放在同一行（內聯），也可以設置寬高等屬性（塊狀）
<form>標籤用於爲用戶輸入創建HTML表單
<form method="post"（規定如何發送表單數據 常用值：get|post）
action="result.html">（表示向何處發送表單數據）
</form>
經驗：在實際網頁開發中通常採用post方式提交表單數據
1.label
<label>標籤爲 input 元素定義標註（標記）。
（1）for屬性
“for” 屬性可把 label 綁定到另外一個元素，所以把 “for” 屬性的值設置爲相關元素的 id 屬性的值
<form>
<label for="male">Male</label> //與下一行的表單元素綁定
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
1.增強鼠標的可用性
2.自動將焦點轉移到與該標註相關的表單元素上
如果不使用label，則用戶對某內容進行勾選時，必須要用鼠標點到勾選框內才能進行選擇，有時會比較麻煩，對用戶不友好；使用label則可以讓整條內容連同前面的勾選框一起作爲一個大的勾選框，用戶只需要點擊文字，就可以勾選內容，方便用戶使用。
（2）form
規定 label 字段所屬的一個或多個表單。
具體看：https://www.w3school.com.cn/tags/att_label_form.asp
2.input
<input type=" " name="fname" value="初始值"/>
| 屬性 | 說明 |
|---|---|
| type | 指定元素類型：text（默認)、 password、checkbox（複選框）、radio（單選框）、submit、reset（重置按鈕）、file、hidden、image、button |
| name | 元素名稱 |
| value | 初始值，type 爲 radio時必須指定一個值 |
| size | 指定表單元素的初始寬度。當 type 爲 text 或 password時，表單元素的大小以字符爲單位。對於其他類型，寬度以像素爲單位 |
| maxlength | 輸入最大字符 |
| checked | 元素是否被選中 |
選擇的時候注意語義信息
文件域
<form action="" method="post" enctype="multipart/form-data"（表單編碼屬性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>
郵箱：會自動驗證email格式是否正確
<p>郵箱:<input type="email"（郵箱） name="email"/></p>
<input type="submit"/>
網址：自動驗證
<p>請輸入你的網址:<input type="url"（網址） name="userUrl"/></p>
<input type="submit"/>
數字
<p>請輸入數字:<input type="number"(數字) name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數字間隔)="10"/></p>
<input type="submit"/>
滑塊
<p>請輸入數字:<input type="range"(滑塊) name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數字間隔)="2"/></p>
<input type="submit"/>
搜索框
<p>請輸入搜索的關鍵詞:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>
隱藏域
<input type="hidden"(隱藏域) value="666" name="userid">
只讀和禁用
<input name="name" type="text" value="張三" readonly(只讀文本框)>
<input type="submit " disabled （禁用） value="保存" >
3.表單的初級驗證
減輕服務器的壓力，保證數據的可行性和安全性
驗證方法：placeholder、required、pattern
（1）placeholder
- input類型的文本框提供一種提示（hint）
- 可以描述文本框期待用戶輸入何種內容
- 提示語默認顯示，當文本框中輸入內容時提示語消失
- 適合於input標籤：text、search、url、email和password等類型
<input type="search" name="sousuo" placeholder(文本框輸入內容提示)="請輸入要搜索的關鍵字"/>
（2）required
- 規定文本框填寫內容不能爲空，否則不允許用戶提交表單
- 適合於input標籤：text、search、url、email、password、number、checkbox、radio、file等類型
<input type="text" name="username" required/(必填項)>
（3）pattern
用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單
<input type="text" name="tel" required pattern（驗證規則，正則表達式）="^1[358]\d{9}" />
（4）驗證輸入中文時字符長度爲2
- 英文字符長度爲1，中文字符長度爲2
- 通過ADCII碼判斷是中文還是英文
var inputLength = 0;
//給一個變量來記錄長度
for (var i = 0; i < str.length; i++) {
var countCode = str.charCodeAt(i);
//返回指定位置的字符的Unicode編碼
//判斷是不是ASCII碼,Unicode碼前128個字符是ASCII碼
if (countCode >= 0 && countCode <= 128) {
inputLength ++;
}else{
inputLength +=2;
//如果是擴展碼，則一次+2
}
}
（5）值允許輸入中文、數字和英文
function checkUsername()
{
//正則表達式
var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
//獲取輸入框中的值
var username = document.getElementById("username").value.trim();
//判斷輸入框中有內容
if(!reg.test(username))
{
alert("請輸入中文、數字和英文！");
//輸入非法字符，清空輸入框
$("#username").val("");
}
}
4.select
<select(列表框) name="列表名稱" size="行數">
<option value="選項的值" selected="selected"(默認選中項)>…</option >
<option(選項) value="選項的值">…</option >
</select>
5.textarea
<textarea rows="3" cols="20">
用行列確定大小
</textarea>
<textarea height="" width="">
用css定義大小
</textarea>
可以通過 wrap 屬性設置文本輸入區內的換行模式
6.fieldset
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>
7.menu
參考：https://blog.csdn.net/nanjinzhu/article/details/82251110