一、form 表单有什么作用？有哪些常用的 input 标签，分别有什么作用？
<form>标签是 HTML 的原生标签，主要用来向服务器传输数据，一个 form 表单如下：
<form action="url" method="GET"></form>
其中
action代表该表单数据要提交到的服务器地址，method表示提交方式，一般有 GET、POST，两者的差别后面会讲。<form>只是包裹输入数据的标签而已，要有输入框才能提交啊，所以这时候需要有 input 。
<!-- 常用输入框，用于文本输入 -->
<input type="text" name="text" placeholder="请输入">
<!-- 密码输入，非明文显示 -->
<input type="password" name="text" placeholder="密码">
<!-- 单选框，往往两个以上出现 -->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!-- 多选框 -->
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">宠物
<input type="checkbox" name="hobby">游戏
<!-- 按钮 -->
<input type="button" value="点我">
表单里面可不仅有
<input>，还有<textarea><label><select>等标签呢。
二、POST 和 GET 方式的区别
不管其他更复杂的东西，单纯比较这两种方式的话：
| 对比 | GET | POST |
|---|---|---|
| 类型 | 用来获取资源（Read） | 用来新建或者更新资源（Create） |
| 传输方式 | URL 方式，如https://google.com?a=1&b=2，用户能直接看到 |
放入请求主体，不显式显示 |
| 服务端安全 | 安全，仅请求，无法改变服务器资源状态 | 不安全，请求失败后，只能等服务器响应才能重复请求，否则结果可能不一致 |
| 客户端安全 | 不安全，URL暴露数据内容 | 相对安全，数据在请求体中，但能在开发者工具 network 中看到 |
| 缓存 | 可缓存结果 | 不可缓存 |
| 请求限制 | 因为是URL方式，有长度限制，2K到4K左右 | 没有长度要求 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded, application/json, multipart/form-data, text/html |
我认为，GET 是更加安全的一种请求方式，因为它仅仅是一个获取资源的请求，对于服务器的资源没有修改，POST 是修改服务器资源的，两个动作决定了谁更加安全。至于说 GET 因为数据显示在 URL 中而不安全，本来 GET 就是获取信息的，你要加上重要信息为什么还用 GET ？加重要信息不是意味着告诉服务器“我很重要”吗？应该用 POST 啊。
注： 上述提到的资源均指服务器的资源，如 HTML、CSS、JS、数据库等。参考：
HTTP Methods for RESTful Services
理解RESTful架构 —— 阮一峰
HTTP 方法: GET 和 POST —— W3C
三、在 input 里， name 有什么用？
上面说了，input 是填写数据的框框，当你提交表单之后，这个 input 里面写的内容就提交到服务器了，那么我们假设一下现在是登录，有帐号名（a294465800）和密码（123456），所以我们提交的形式就是这样：
a294465800
123456
我们知道账户名是
a294465800，密码是123456，服务器：“？？？”。（黑人问号）服务器不知道啊！所以给他加个name，如下：
<form action="url" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">登录</button>
</form>
然后提交之后，数据就应该是这样了：
username: a294465800
password: 123456
服务器：“明白了！”。你明白了吗？
四、radio 如何分组？
radio 是
<input>标签的一个类型，叫单选框，和上面一样，name的作用是告诉服务器你这是啥数据，所以，同一个name的 radio 就是同一组内容了：
<!-- 一组性别 -->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!-- 一组爱好 -->
<input type="radio" name="hobby">宅
<input type="radio" name="hobby">不宅
五、placeholder 属性有什么用？
为了好看。
placeholder中文是：占位符。就是说，反正你还没输入，我占个位置先，这样看起来不会空荡荡，还能顺带告诉你这里输入啥，如下：
<input type="text" placeholder="这里输入帐号名啦！">
<input type="password" placeholder="这里输入密码，亲！">
六、 type = hidden 隐藏域有什么作用？举例说明
隐藏，代表着不想给你看到，或者暂时不想让你看到，所以：
- 做触发事件，比如点击一个按钮，这个
input就不再隐藏了，而显示了。 - 收集一下必须的，但又不想让用户知道的数据，例如：上传文件，用户选择之后文件会立即被上传，但后端要判断这个图片是谁上传的，所以会有个
baseurl返回来绑定这个用户，这样就知道是这个用户上传的了。 - 当全局变量用，而这个全部变量可能会根据访问的路由不同（链接），需要的全局变量也不同，所以干脆弄个隐藏的控件来保存这个数据。
七、HTML 表单的基本用法
HTML 提交数据用的最多的就是表单了，所以，除非用的是
AJAX来异步提交，否则你都是需要用到<form>标签的。<form>标签就像定义了一个域，里面的内容都是需要提交的信息，当你定义了一个提交按钮后type = submit，点击提交，页面就会把信息传到服务器，同时也刷新了页面，所以一个页面是要避免有两个表单的喔。可供输入的控件有：<input>、<textarea>、<button>、<select>，其中<input>还有相当多种类型供选择。
只要保证输入控件都在<form>里面，那么我们就可以用type=submit和type="reset"这两个原生的事件了，前一个是提交表单信息，后一个是重置表单信息（清空！）
讲了这么多，不如直接来张表单看看？预览地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 表单</title>
</head>
<body>
<form action="">
<div class="form-group">
<label for="username">姓名：</label>
<input type="text" placeholder="用户名" id="username">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" placeholder="密码" id="password">
</div>
<div class="form-group">
<span>性别：</span>
<label>
<input type="radio" name="sex" checked>男
</label>
<label>
<input type="radio" name="sex">女
</label>
</div>
<div class="form-group">
<span>取向：</span>
<label>
<input type="radio" name="love">男
</label>
<label>
<input type="radio" name="love" checked>女
</label>
</div>
<div class="form-group">
<span>爱好：</span>
<label>
<input type="checkbox" name="hobby">旅游
</label>
<label>
<input type="checkbox" name="hobby">游戏
</label>
<label>
<input type="checkbox" name="hobby">运动
</label>
<label>
<input type="checkbox" name="hobby">宠物
</label>
</div>
<div class="form-group">
<label for="comment">评论：</label>
<textarea name="comment" id="comment" cols="50" rows="10"></textarea>
</div>
<div class="form-group">
<span>我的car：</span>
<select name="car" id="car">
<option value="1">宝马</option>
<option value="2">奔驰</option>
<option value="3" selected>特斯拉</option>
</select>
</div>
<div class="form-group">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
</body>
</html>
