form(表单)
说明
Form (表单)是页面与 WEB 服务器交互过程中最重要的信息来源。
<form>标签用于创建 HTML 表单。表单能够包含 input 元素，比如文本字段，复选框，单选框，提交按钮等。还可以包含 menus , textarea , fieldset 和 label 元素等。
属性
action {URL} : 一个 URL 地址；指定 form 表单向何处发送数据。
enctype {string} :规定在发送表单数据之前，如何对表单数据进行编码。
method {get/post} :指定表单以何种方式发送到指定的页面。
指定的值有：get ，form 表单里所填的值，附加在 action 指定的 URL后面，作为 URL 链接而传递。
post ，form 表单里所填的值，附加在 HTML headers 上。
应用场景
表单主要用于向服务器传输数据，登陆注册等。
input 标签
input name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 javascript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
text：默认。定义一个单行的文本字段。（默认宽度为20）
password：定义密码字段。（字符会被遮盖）
checkbox：复选框（checked属性：是否选中）
radio：单选框（name属性：指定多个单选框的在一个区域里进行单选操作）
button:定义普通按钮。常用于与JS一起启动脚本。（value属性：button按钮显示的文本）
reset：定义重置按钮(清除文本区域内容，重置所有表单值为默认值)
submit：定义提交按钮。
hide：定义隐藏输入字段。（存放仅用于自己使用的信息）
file：定义输入字段和 "浏览"按钮，供文件上传。
image：定义图像形式的提交按钮。
HTML 5 新增类型
email：在提交表单时会自动验证email的格式是否正确,格式不正确浏览器是不允许提交的。opera浏览器中必须有name属性，否则不起作用。
<input type="email" name="email">
url：在提交表单时会自动验证url的格式。Opera中会自动在开始处添加http://
<input type="url" />
number：可以限制输入的数字，若未输入则会抛出一个错误。（step为上一个数字与下一个数字的间隔）
<input type="number" max="12" min="0" step="1"/>
range：此类型将显示一个可拖动的滑块条，能够选择性的对限制范围内的数值进行设置。拖动时会反馈给value一个值.
<input type="range" min="1" max="10" />
search：此类型表示输入的将是一个搜索关键字。
<input type="search" />
color： 此类型表单可让选择颜色值,并反馈到value中.
<input type="color"/>
telephone：此类型可输入一个电话号码。
<input type="telephone" />
post 和 get 方式的区别
查询字符串（名称/值对）是在 GET 请求的 URL 中发送的。
get 请求：
-
可以被缓存
-
保留在浏览器历史纪录里
-
可被收藏为书签
-
不加密
-
有长度限制
-
用于从服务器取回数据
POST 请求
查询字符串（名称和值对）是在 POST 请求的 HTTP 消息主体中发送的：
-
不会被缓存
-
不会保留在浏览器历史记录里
-
不能被收藏为书签
-
对数据长度没有要求
-
可以用于处理敏感数据
-
对数据类型没有限制
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。
对于 GET 方式的请求，浏览器会把 HTTP header 和 data 一并发送出去，服务器响应 200 （返回数据）；
对于 POST 请求，浏览器先发送 header ，服务器响应 100 continue ，浏览器再发送 data ，服务器
响应 200 ok (返回数据)；
POST 需要两步。
-
GET与POST都有自己的语义，不能随便混用。
-
在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。
-
并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
radio 分组
name 属性相同的就是一组。
placeholder 属性的作用
placehloder 属性能够让你在文本框里显示提示信息，一旦你在文本框里输入信息， placeholder就会隐藏。HTML 5 原生支持。
type = hidden 隐藏域有什么作用？
input type = hidden 作用是用了储存一些表单消息，却不想要直接显示在表单上，例如一些特定的参数等。
value 也会传递给后端，每一个表单可以赋予不同名称的隐藏域，传递各种表单消息。
基本语法：
<input type="hidden" name="隐藏域名称" value = "">
type="hidden" 就是说明这是一个隐藏域，一般还有 name 和 value 两个参数。
<form action = "index.html" method = "post">
<input type="hidden" name = "age" value = "23">
<input type="submit" name = "send" value = "送出表单">
</form>
效果图：
type="hidden"
网友评论