什么是HTML表单
表单是实现用户和网站或者应用程序实现交互的方式之一。它允许用户将数据发送到网站。
HTML表单的结构
所有的表单都是由<form>元素开始如下：
<form action="/my-handling-form-page" method="post">
</form>
<form>元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。而且可以通过设置属性来设置它的行为，以下是常用的两个属性。
-
actiong方法设定表单最后提交到的位置（一个URL） -
method属性定义使用哪种HTTP方法发送数据（可以是“get”或“post”）
post和get方式区别
- get提交的信息会组成键值信息显示在URL中，可以通过历史纪录查看，降低了安全性。
post不会显示在URL中，安全性较好 - get提交的信息有限，根据不同浏览器对URL长度有限制
post则不涉及URL显示，所以没有长度限制。 - post需要两个阶段发送数据，降低了传输的可靠性以及速度。
get只需要一个阶段，速度更快。
可以在<form>中加入组件，如下：
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="mail"/>
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="msg"></textarea>
</div>
</form>
<div>元素可以帮助内容更好的定位（通过css），<label>标签用for属性和相同ID的组件进行绑定。这样做有一个好处就是用户点击一个<label>标签就可以激活相应的组件
其中<input>的type属性非常重要，因为type属性的设定，决定了该<input>最终的功能。
常用的type有如下几种
<input type="text">:定义用于文本输入的单行输入字段（默认宽度为20个字符）
<input type="password">:定义密码字段
<input type="radio">:定义单选按钮，允许用户在有限数量的选项中选择一个
<input type="checkbox">:定义复选框
<input type="submit">:定义用于向表单处理程序提交表单的按钮。
<input type="button">:定义按钮
<input type="number">:用于应该包含数字值的输入字段
<input type="date">:用于应该包含日期的输入字段
<input type="color">:用于应该包含颜色的输入字段，根据浏览器支持，颜色选择器会出现输入字段中。
隐藏域
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
一般被用于一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
另外还有几种特殊用法的组件
select定义下拉菜单
<select name="number">
<option value="123">1</option>
<option value="456">2</option>
<option value="879">3</option>
<option value="000">4</option>
</select>
textarea定义多行输入
<textarea name="msg" cols="30" rows="10" placeholder="请输入内容"></textarea>
name属性
最后还要强调一下组件的name属性，该不可缺省
- 它是最终提交请求所生成的键值中的键，如果一个组件没有设定
name属性那么相当于白写 - 它还为
type="checkbox"和type="radio"提供分组的依据，如下：
<form action="/my-handling-form-page" method="post" >
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</div>
<div class="hobby">
<label>兴趣</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="宠物">宠物
</div>
</form>
name属性相同才可以归为一组
