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