Form 表单

一、 form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

form表单作用：收集不同类型的用户输入，里面的数据将被提交到服务器端

常用的input标签

1. form标签，包裹提交数据

<form action='/url.php' method='get' autocomplete='on'></form>

2. 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>

3. select标签，下拉列表

<div>
    <select name="hobby" id="hobby">
        <option value="food">food</option>
        <option value="sing">sing</option>
        <option value="book">book</option>
    </select>
</div>

4. img标签，图像

<div>
    <img src="http://www.w3school.com.cn/i/eg_submit.jpg" alt="">
</div>

5. 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 表单的用法，附上博客链接

HTML 表单的简单介绍

八、实现如下表单,附上预览地址。其中性别和取向是单选，爱好是多选

表单

实现链接