表单是一个包含表单元素的区域
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
表单元素必须包含在form标签内 才能被提交至服务器
hidden的作用：
<input type="hidden" value="xxx" />
1.传递数据 但不让用户看到
2.安全策略 防止伪造页面 ，可以用hidden值做校验 阻止csrf攻击
form标签是表单的外壳，有以下属性
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.....
</form>
| 属性 | 描述 |
|---|---|
| accept-charset | 被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 表单提交的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 被提交数据的编码（默认：url-encoded）。 |
| method | 提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 浏览器不验证表单。 |
| target | action 属性中地址的目标（默认：_self）。 |
method：提交保单时所用的 HTTP 方法（GET 或 POST）
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">
- GET（默认方法）：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，适合用GET方法。get方法时，输入值会以name=value的形式更新在url的后面，安全性差，输入的内容量受到限制。
- POST：如果表单正在更新数据，或者包含敏感信息（例如密码），适合用POST方法。使用 POST方法，输入值不会更新在url中显示，安全性高，输入的内容量受限制小。
- 表象不同，get把提交的数据url可以看到，post看不到
- 原理不同，get 是拼接 url， post 是放入http 请求体中
- 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
- get提交的数据在浏览器历史记录中，安全性不好
- 场景不同，get 重在 "要", post 重在"给"
常用input标签的type及作用：
text 单行文本框
password 密码框
checkbox 多选组件
radio 单选组件
file 上传文件
hidden 隐藏组件
submit 提交数据按钮
button 普通按钮
reset 重置按钮
image image 按钮
label标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。
demo
name 属性以name=value的形式对提交到服务器后的表单数据进行标识。check和radio靠相同的name值分组；
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
<form action="xxx.php" method="post">
<h3>输入框</h3>
<label for="input_username">用户名：</label> <input id="input_username" name="username" type="text" placeholder="输入用户名" autofocus value="sss"/>
<br/>
<label for="input_pass">密码：</label> <input id="input_pass" name="password" type="password" placeholder="输入密码" />
<br/><br/>
<h3>单选框</h3>
<label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" />
<br/>
<label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" />
<br/>
<label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
<br/>
<label for="ra4">ra4：</label><input type="radio" id="ra4" name="ra" value="4" />
<br/><br/>
<label for="ck5">ra5：</label><input type="radio" id="ra5" name="radio" value="1" />
<br/>
<label for="ra6">ra6：</label><input type="radio" id="ra6" name="radio" value="2" />
<br/>
<label for="ra7">ra7：</label><input type="radio" id="ra7" name="radio" value="3" checked="checked" />
<br/>
<label for="ra8">ra8：</label><input type="radio" id="ra8" name="radio" value="4" />
<br/><br/>
<h3>复选框</h3>
<label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" />
<br/>
<label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
<br/>
<label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" />
<br/>
<label for="ck4">CK4：</label><input type="checkbox" id="ck4" name="ck" value="4" />
<br/><br/>
<h3>File</h3>
<input type="file" accept="image/gif, image/jpeg"/>
<br/><br/>
<h3>image 按钮</h3>
<input type="image" src="xxx.jpg" alt="Submit Form"/>
<br/><br/>
<h3>隐藏域</h3>
<input type="hidden" value="xxx" />
<br/><br/>
=
<h3>下拉菜单</h3>
<select id="input_select">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br/><br/>
<h3>多行文本</h3>
<textarea cols="60" rows="5">123</textarea>
<br/><br/>
<input type="button" value="Button" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
