HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
下面介绍表单常见元素的简单用法。
1.form元素
HTML 表单用于收集用户输入。
<form> 元素定义 HTML 表单，是表单的外壳
常用属性：
action:表单提交的地址
method:提交表单的方法，一般有get和post两种方式，
区别:
1.表象不同，get把提交的数据url可以看到，post看不到
2.原理不同，get 是拼接 url， post 是放入http 请求体中
3.提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
4.get提交的数据在浏览器历史记录中，安全性不好
5.场景不同，get 重在 "要", post 重在"给"
target:在何处打开action
enctype:
- application/x-www-form-urlencoded：在发送前编码所有字符（默认）
- text/plain：空格转换为"+"加号，但不对特殊字符编码
- multipart/form-data：使用包含文件上传控件的表单时，必须使用该值
2.input元素
input 元素通过 type 属性来设置不同的input 类型。<input> 元素是最重要的表单元素。
2.1文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
效果：
placeholder的参数可以作为输入的提示（提示用户输入内容和格式），与value不同，placeholder并不是input中真的内容，在输入时placeholder会消失而不是代替。
2.2 密码域
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="请输入密码">
</div>
效果：
密码域的输入框会对输入信息做掩码处理。
2.3 复选框
<div class="hobby">
<label for="hobby">爱好</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>
效果：
name 属性为相同的复选框元素会被分到同一个分组。复选框的 value 值是必须有的，否则后台接收到数据无法识别究竟勾选了什么值。可以对 input 标签增加 checked 属性实现预选。
2.4 单选按钮
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
效果：
单选按钮和复选框一样，通过相同的name 属性值来识别同一组按钮，value 属性是必需的。可以对 input 标签增加 checked 属性实现预选。value 属性为 input 元素设定值。
对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。
2.5 下拉列表
<div class="section">
<lable for="mycar">我的car：</lable>
<select id="mycar" name="mycar">
<option value="audi">奥迪</option>
<option value="benz">奔驰</option>
<option value="saab" selected>萨博</option>
</select>
</div>
效果：
option 的 value 属性是必需的，可以对 option 设置 selected 属性实现预选择。
2.6 提交按钮
<input type="submit" value="提交">
效果：
2.8 重置按钮
<input type="reset" />
效果：
重置按钮会清空表单中填写的内容
2.9 打开文件
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
效果：
accept="image/png"，只接受png格式文件，可设置选择的文件格式
3.label 元素
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用户名">
</div>
label 元素为 input 元素定义标注，当鼠标选择该标签时，关联的元素控件会获得焦点，for 属性与关联元素的 id 属性要相同。
4. textarea 元素
<div class="textarea">
<textarea name="article">
ddd
</textarea>
</div>
效果：
展示输入框，可以拉选大小
