什么是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属性，该不可缺省

1. 它是最终提交请求所生成的键值中的键，如果一个组件没有设定name属性那么相当于白写
2. 它还为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属性相同才可以归为一组