一、 form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form表单作用：收集不同类型的用户输入，里面的数据将被提交到服务器端
常用的input标签
- form标签，包裹提交数据
<form action='/url.php' method='get' autocomplete='on'></form>
- input 标签：text文本，password密码，radio单选，checkbox复选，image图像，file文件，hidden隐藏，submit提交，reset重置
<div>
<label for='username'>用户</label>
<input type='text' name='username' id='username'>
</div>
<div>
<label for='password'>密码</label>
<input type='password' name='password' id='password'>
</div>
<div>
<label for="male"><input type="radio" name='sex' id='male' value='male'>男</label>
<label for="female"><input type="radio" name='sex' id='female' value='female'>女</label>
</div>
<div>
<input type="image" src='http://www.w3school.com.cn/i/eg_submit.jpg'>
</div>
<div>
<input type="file" accept='image/png'>
</div>
<div>
<input type='hiiden' value='1234'>
<input type="submit" value='submit'>
<input type="reset" value='reset'>
</div>
- select标签，下拉列表
<div>
<select name="hobby" id="hobby">
<option value="food">food</option>
<option value="sing">sing</option>
<option value="book">book</option>
</select>
</div>
- img标签，图像
<div>
<img src="http://www.w3school.com.cn/i/eg_submit.jpg" alt="">
</div>
- textarea标签，多行输入
<div>
<textarea name="txt" id="" cols="30" rows="10"></textarea>
</div>
二、 post 和 get 方式的区别？
GET
- 数据会附在URL之后，以?分隔URL地址和提交数据，参数以&连接，如
login.html?username=abc&password=123 - 最多可提交1024字节
- 只允许ASCII字符
- 可被缓存（除非有Cache-ControllerHeader约束），保留在历史记录，被收藏为书签
- 从信息泄漏上看是不安全的，只应当用于取回数据，会遭CSRF攻击
- 点击后退或刷新无影响
- 语义是请求获取指定的资源，从对客户端服务器端来说是安全的，幂等，报文主体没有任何语义
POST
- 将提交数据放在HTTP请求报文中
- 没有大小限制
- 允许任何字符
- 不会被缓存，不会保留在历史记录，不被收藏
- 从信息泄漏上看是安全的
- 点击后退或刷新会重新提交数据
- 产生两个TCP数据包
- 浏览器先发送header，服务器响应100 continue 后再发送data，服务器响应200
- 语义是请求负荷（报文主体）对指定资源做出处理，具体的处理方式根据资源类型而不同，从对客户端服务器端来说是不安全的，不幂等
三、在input里，name 有什么作用？
- 作为与服务器交互数据的表单HTML元素的标示，提交数据以name=value展现，即name是键，value是值
- 在单选radio标签中，确定是否在同一组单选类中
- 建立页面中的锚点，可以被跳转
四、radio 如何分组?
同组的radio标签name属性设为一致
<div>
<label for="male"><input type="radio" name='sex' id='male' value='male'>男</label>
<label for="female"><input type="radio" name='sex' id='female' value='female'>女</label>
</div>
五、placeholder 属性有什么作用?
提供可描述输入字段预期值的提示信息（hint），该提示会在输入字段为空时显示，并会在字段获得焦点时消失
六、type=hidden隐藏域有什么作用? 举例说明
作用
- 隐藏域在页面中对于用户不可见
- 需要确定用户身份等附加信息，比cookie更简单，且长度没有限制
- javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里
举例
提交表单时需要确认用户权限，通过隐藏域就可以跟随表单一同告知给服务器，而不需要用户输入
<input type='hidden' value='admin' name='power'>
七、写一篇博客简单介绍 HTML 表单的用法，附上博客链接
八、实现如下表单,附上预览地址。其中性别和取向是单选，爱好是多选
表单
