表单二
学习目标
- POST/GET请求
- HTML5表单新特性
GET/POST 请求
GET/POST 请求不同之处只在于字母不一 样？
Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，DELETE。一个推荐的实践是使用 restful api，详细可参考这里 URL全称是资源描述符，我们可以这样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。 到这里，大家应该有个大概的了解了，GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。
GET应该是安全的和幂等的
- 所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据，不会影响资源的状态。
- 幂等的意味着对同一URL的多个请求应该返回同样的结果。再解释一下幂等这个概念：
幂等（idempotent、idempotence）是一个数学或计算机学概念，常见于抽象代数中。 幂等有一下几种定义： 对于单目运算，如果一个运算对于在范围内的所有的一个数多次进行该运算所得的结果和进行一次该运算所得的结果是一样的，那么我们就称该运算是幂等的。比如绝对值运算就是一个例子，在实数集中，有abs(a)=abs(abs(a))。 对于双目运算，则要求当参与运算的两个值是等值的情况下，如果满足运算结果与参与运算的两个值相等，则称该运算幂等，如求两个数的最大值的函数，有在在实数集中幂等，即max(x,x) = x。
POST表示可能改变服务器上的资源的请求
比如我们注册用户一般使用 POST 提交，因为会在服务器上添加一个用户信息。
如何选择？
选择 GET
- 获取服务器上的资源
- 请求中的URL可以被手动输入
- 请求中的URL可以被存在书签里，或者历史里，或者快速拨号里面，或者分享给别人。
- 请求中的URL是可以被搜索引擎收录的。
- 请求中的URL可以被缓存。
选择 POST
- 希望修改（增加）服务器上的资源
- 不希望提交的信息被在 URL 中看到
- 提交的信息比较大
- 提交的有文件，或者二进制内容
一句话总结
可以重复的交互，比如取个数据，跳个页面，用GET；不可以重复的操作， 比如创建一个条目， 用POST。
POST 比 GET 安全？
注意，这里的安全，和上面的 GET 应该是安全的安全不是同一个安全
是的， POST要比GET安全一点点，注意，是一点点
GET的URL会被放在浏览器历史和WEB 服务器日志里面。 POST 请求发送的信息放在请求体里，发完就没有了。
HTML5表单新特性
HTML5 为标准的 Web 表单增添了一系列新功能。
Placeholder
上一节中已经用过，html5以前都是用javascript实现，
<input name="s" placeholder="Search">
Auto Focus
默认使光标聚焦于某一文本框，打开网页即可输入文本。
<input name="s" autofocus>
datalist
datalist 属性提供一个下拉列表，如下：
<input list="cars">
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
试试label属性
<option label="$43K" value="BMW">
Input types
HTML5新增了input标签的多种特性，email、url、number、range、date、 time、 datetime、 month、 week、search、color等，用法基本相同：
<input type="email">
表单验证
利用type进行验证
对input设定相应的type之后，会根据相应的type进行校验，例如type="email"和type="url"填错时会有提示效果：
利用max/min进行验证
对于<input type="number">通过设置min和max来限制数字的合理范围，校验效果如下：
pattern属性
pattern 是个强大的属性，根据正则表达式来判断用户输入的合理性，例如：
<form>
<input type="text" pattern="[A-Za-z]{3}" title="Just input three letters">
<input type="submit">
</form>
required属性
如果某个字段是必填的，则可以用required属性，如果用户没填，就会出现提醒且无法提交。
<input type="text" required>
防止自动验证
可利用novalidate属性使整个表单不会自动验证。
<form novalidate>
<input type="email" name="email">
<!-- ..other stuff.. -->
</form>
对单个input防止自动验证
<input type="text" formnovalidate>
表单验证与CSS
为了配合HTML5 强大的表单验证，CSS3 中同样有几个伪类被引入，来支持对不同验证状态的表单进行选择。你可以为它们添加样式。
required和optional伪类所有含有
required属性的表单元素可以被:required选取；其余元素可以被:optional选取。valid和invalid伪类当一个输入框的内容被浏览器认为是「有效的」时，它就可以被
valid伪类选取。相反，当一个输入框的内容被视为「无效的」时，既可被invalid伪类选取。- 任何不加
required限制的空input总是有效的。 - 一个输入了任何字符的
<input required>为有效的。 - 一个输入了合法 Email 地址的
<input type="email" required>是有效的。 - 一个输入数值在限定范围内的
<input type="number" min="0" max="100" required>是有效的。等等。
- 任何不加
in-range和out-of-range伪类这两个伪类主要针对含有「范围」含义的输入类型，例如
number。- 数值类型不合法算作
out-of-range。 - 没有规定
min和max也可能发生out-of-range（见上一种情况）。 - 数值在
min和max范围之外算作out-of-range。 - 属于
out-of-range则一定属于invalid，反之不成立（还需要是范围类的标签类型）。 - 属于
in-range则一定属于valid，反之也成立。 目前 Firefox 和 IE 不支持这两个伪类。
- 数值类型不合法算作