Form表单

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

作用：可以收集用户的信息和反馈意见，提交给服务器数据，是网站管理者与浏览者之间沟通的桥梁。

常用input标签

标签	作用
<input type = "text">	输入单行文本框
<input type = "radio">	单选框，用name分组
<input type = "checkbox">	多选框
<input type = "password">	输入密码，密码为小圆点
<input type = "submit">	提交表单数据至服务器的提交按钮
<input type = "botton">	按钮
<input type = "hidden">	隐藏域，用户看不见
<input type = "textarea">	多行文本输入框
<input type = "select">	下拉选择
<input type = "reset">	重置按钮，重置表单数据
<input type = "file">	上传文件
<input type = "date">	日期

post 和 get 方式的区别？

方式	get	post
点击返回/刷新按钮	没有影响	数据会重新发送（浏览器将会提示用户“数据被从新提交”）
添加书签	可以	不可以
缓存	可以	不可以
编码类型(Encoding type)	application/x-www-form-urlencoded	application/x-www-form-urlencoded or multipart/form-data. 请为二进制数据使用multipart编码
历史记录	有	没有
长度限制	有	没有
数据类型限制	只允许ASCII字符类型	没有限制。允许二进制数据
安全性	查询字符串会显示在地址栏的URL中，不安全，请不要使用GET请求提交敏感数据	因为数据不会显示在地址栏中，也不会缓存下来或保存在浏览记录中，所以看起来POST请求比GET请求安全，但也不是最安全的方式。如需要传送敏感数据，请使用加密方式传输
可见性	查询字符串显示在地址栏的URL中，可见	查询字符串不会显示在地址栏中，不可见

在input里，name 有什么作用？

name用于表单提交,只有加了name属性的标签元素才会提交到服务器 。

radio 如何 分组?

radio 根据name 属性分组，相同name的分到一组。

placeholder 属性有什么作用?

placeholder属性能够让你在文本框里显示提示信息（比如请输入密码），一旦你在文本框里输入了，提示信息就会消失。

type=hidden隐藏域有什么作用? 举例说明

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
举例：有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
参考文章

写一篇博客简单介绍 HTML 表单的用法，附上博客链接

简介
HTML表单是一个包含表单元素的区域，用来收集用户输入的内容并提交。
action ：表单提交的地址
method ：提交表单的方法，有get和post两种。

常用表单元素

• 单选框，相同name为一组

<form action="/getInfo" method="get">
    <input type="radio" name="width" value="70"> 70
    <input type="radio" name="width" value="80"> 80
</form>

• 复选框，可通过checked属性默认选中

<form action="/getInfo" method="get">
    <input type="checkbox" name="width" value="70"> 70
    <input type="checkbox" name="width" value="80"> 80
</form>

• 文本框，包括单行文本和多行文本

<form action="/getInfo" method="get">
    <input type="text"> 
    <textarea></textarea>
</form>

• 密码框

<form action="/getInfo" method="get">
    <input type="password"> 
</form>

• 文件上传

<form action="/getInfo" method="get">
    <input type="file"> 
</form>

• 下拉框

<form action="/getInfo" method="get">
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
    </select>
</form>

• 按钮

<form action="/getInfo" method="get">
    <input type="buttom" value="按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

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

预览