html5学习16：表单
1、制作基本表单
制作一个基本的表单需要三个元素: form、input和button元素。
<form method="post" action="http://titan:8080/form">
<input name="fave"/>
<button>
Submit vote
</button>
</form>
1.1 定义表单
1）form元素
可以流元素的元素的子元素，但form元素不能是其他form元素的后代元素。
属性：acton,method,enctype,name,accept-charset,novalidate,target,autocomplete
2)input元素
其用途是收集用户输人数据。
任何可以包含短语的元素可以是她的父元素
属性：Name,disabled,form,type
input元素的属性多达29种，具体有哪些取决于type属性的值
3）button元素
用户需要有一种方法来告诉浏览器所有的数据已经输入完毕，该把他们发给服务器了。
属性：name,disabled,form,type,value,autofocus以及取决type属性值的其他一些属性
2、配置表单
2.1 配置表单的action属性
action属性说明，提交表单时浏览器应该把从用户收集的数据发送到什么地方。
如果不设置form元素的action属性，那么浏览器会将表单数据发到用以加载该HTML文档的URL。
这看似毫无意义，其实不然，好几个流行的Web应用系统开发框架都依赖于这个特性。
如果为action属性指定的是一个相对URL，那么该值会被嫁接在当前页的URL(base元素，则是该元素的href属性值）的后面。
如何用base元素设置表单数据的发送目的地。
<!DOCTYPE HTML>
<html>
<head>
<base href="http:titan:8080"/>
</head>
<form method="post" action="/form">
</form>
</html>
2.2 配置HTTP方法属性
method属性指定了用来将表单数据发送到服务器的HTTP方法。允许的值有get和post这两个，它们分别对应于HTTP的GET和POST方法。未设置method属性时使用的默认值为get。这有点令人遗憾，因为大多数表单都需要用POST方法。
GET请求用于安全交互( safe interaction ),同一个请求可以发起任意多次而不会产生额外作用。POST请求则用于不安全交互，提交数据的行为会导致一些状态的改变。对于Web应用程序多半采用后一种方式。这些规矩是W3C ( World Wide Web Consortium，万维网联盟）定的，参www.w3.org/Provider/Style/URI
一般而言，GET请求应该用于获取只读信息，而POST请求则应该用于会改变应用程序状态的各种操作。使用恰当的请求很重要。如果拿不准该用哪个，宁可谨慎一点，就用POST方法好了。
2.3 配置编码
enctype属性指定了浏览器对发送给服务器的数据采用的编码方式。该属性可用的值有三个：
| 值 | 说明 |
|---|---|
| application/x-www-form-urlencoded | 这是未设置enctype属性时使用的默认编码方式。它不能用来将文件上传到服务器 |
| multipart/form-data | 该编码方式用于将文件上传到服务器 |
| text/plain | 该编码方式因浏览器而异 |
1）application/x-www-form-urlencoded编码
这是默认的编码方式，除了不能用来上传文件到服务器外，它适用于各种类型的表单。每项数据的名称和值都与URL采用同样的编码方案(这是该编码方式名称中urlencoded这个部分的由来。
<form method="post" action="/form">
<input name="fave"/>
<input name="name"/>
</form>输入：apples和adam freeman
编码后为：
fave=apples&name=adam+freeman
2)multipart/form-data编码
multipart/form-data编码走的是另一条路子。它更为冗长，处理起来更加复杂。这也是它一般只用于需要上传文件到服务器的表单的原因——这个任务用默认编码方式无法办到。
3)text/plain编码
这种编码要谨慎使用。对于在这种方案中数据应该如何编码并没有正式的规范，主流浏览器各有各的数据编码方法。例如，Chrome使用与application/x-www-form-urlencoded方案一样的数据编码方法，而Firefox则将数据编码成如下形式:
fave=apple
name=adam freeman
在这个结果中,每个数据项占据一行,特殊字符并未进行编码。建议不要使用这种编码方案，各种浏览器实现它的方式各不相同，因此其结果难以预料。
2.4 控制表单的自动完成功能
浏览器可以记住用户输人表单的数据,并在再次遇到类似表单的时候自动使用这些数据帮用户填写。这种技术可以让用户免于反复输入同样的数据之苦。这方面的一个典型例子是用户在线购买商品或服务的时候输入的姓名和送货信息。每个网站都有自己的购物车和注册程序，但是浏览器可以使用用户在其他表单中输入过的数据加快结账过程。用以判断哪些数据可以重复使用的技术因浏览器而异，不过一种常用的方法是查看input元素的name属性。
一般来说，表单的自动完成功能有益于用户，对Web应用系统也有一点帮助。不过有时网页作者并不想让浏览器自动填写表单。使用form元素的autocomplete属性达到这个目的。
<form autocomplete="off" method="post" action="/form">
<input name="fave"/>
<input name="name"/>
<button>
submit vote
</button>
</form>
autocomplete属性允许的值有两个: on和loff。如果不设置这个属性的话，其默认值为on，表示允许浏览器填写表单。
input元素也有autocomplete属性，可以用于单个元素的自动完成功能,
form元素的autocomplete属性设置的是表单中的input元素默认的行为方式。而各个input元素在该属性上的设置可以覆盖这个默认行为方式。上面的代码清单正是这样做的。此例在form元素上禁用了自动完成功能,但在第一个input元素上——仅仅是在这个元素上,又重新开启了该功能。至于第二个input元素，因为没有设置autocomplete属性，所以采用的是form层面的设置。
一般来说，最好让自动完成功能保持开启状态。用户习惯让浏览器自动填写表单，而且在网上办理任何一种业务时往往都会用到好几个表单。关闭这个功能干涉了用户的偏好和工作习惯。根据我自己的体会，在禁用了自动完成功能的网站上购物有点折磨人，尤其是需要在表单中填写姓名和地址等非常基本的信息的时候。有些网站对信用卡数据禁用自动完成功能，这个更有意义一点。不过即便如此，这种做法也要谨慎使用,要充分考虑各种理由。
2.5 指定表单反馈信息的目标显示位置
默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面。这可以用form元素的target属性予以改变。该属性的工作机制与a元素的target属性一样。
| 值 | 说明 |
|---|---|
| _blank | 将浏览器反馈信息显示在新窗口(或标签页)中 |
| _parent | 将浏览器反馈信息显示在父窗框组中 |
| _self | 将浏览器反馈信息显示在当前窗口中（这是默认行为) |
| _top | 将浏览器反馈信息显示在顶层窗口中 |
| <frame> | 将浏览器反馈信息显示在指定窗框中 |
2.6 设置表单名称
name属性可以用来为表单设置一个独一无二的标识符，以便使用DOM ( Document ObjectModel，文档对象模型）时区分各个表单。name属性与全局属性id不是一回事。后者在HTML文档中多半用于CSS选择器。
3、表单中添加说明标签
label元素弥补,该元素的用途是为表单中的每一个元素提供说明。
label元素，属性for,form
<form>
<p><label for="fave">Fruit:<input id="fave" name="fave"/></label></p>
<p><label for="name">Name:<input id="name" name="fave"/></label></p>
</form>
为input元素设置了id属性，并将相关label元素的for属性设置为这个id值。这样做即可将input元素和label元素关联起来,有助于屏幕阅读器和其他残障辅助技术对表单的处理。
4、自动聚焦到某个Input
设计者可以让表单显示出来的时候即聚焦于某个input元素。这样用户就能直接在其中输入数据而不必先动手选择它。autofocus属性的用途就是指定这种元素。
<input autofocus id="fave"/>
autofocus属性只能用在一个input元素上。要是有几个元素都设置了这个属性，那么浏览器将会自动聚焦于其中的最后一个元素。
5、禁用单个Input元素
如果不想让用户在某个input元素中输人数据，可以禁用它。这方面的一个常见例子是:在用户选择将货物发到账单地址之外的地址时，启用一组用来收集新地址信息的input元素。
要禁用input元素，需要设置其disabled属性。
<input disabled/>
6、对表单元素编组
对于更复杂的表单，有时需要将一些元素组织在一起。为此可以使用fieldset元素。
fieldset元素属性：name,form,disabled
<form>
<fieldset>
<p><label for="fave">Fruit:<input id="fave" name="fave"/></label></p>
<p><label for="name">Name:<input id="name" name="fave"/></label></p>
</fieldset>
<fieldset>
<p><label for="fave">Fruit:<input id="fave" name="fave"/></label></p>
<p><label for="name">Name:<input id="name" name="fave"/></label></p>
</fieldset>
</form>
6.1 为fieldset元素
用legend元素对用fieldset元素分的组提供说明。必须是fieldset元素的第一个子元素。
<form>
<fieldset>
<legend>
enter your details
</legend>
<p><label for="fave">Fruit:<input id="fave" name="fave"/></label></p>
<p><label for="name">Name:<input id="name" name="fave"/></label></p>
</fieldset>
</form>
6.2 用fieldset禁用整组Input元素
<fieldset disabled>
<legend>
enter your details
</legend>
<p><label for="fave">Fruit:<input id="fave" name="fave"/></label></p>
<p><label for="name">Name:<input id="name" name="fave"/></label></p>
</fieldset>
7、使用button元素
button元素的type属性值
| 值 | 说明 |
|---|---|
| submit | 表示按钮的用途是提交表单 |
| reset | 表示按钮的用途是重置表单 |
| button | 表示按钮没有具体语 义 |
7.1 用button元素提交表单
如果将button元素的type属性设置为submit，那么按下该按钮会提交包含它的表单。这是未设置type属性的button元素的默认行为。采用这种方法使用该元素时，它还有额外的一些属性可用。
| 属性 | 说明 |
|---|---|
| form | 指定按钮关联的表单 |
| formaction | 覆盖form元素的action属性，另行指定表单将要提交到的URL。 |
| formenctype | 覆盖form元素的enctype属性,另行指定表单的编码方式。 |
| formmethod | 覆盖form元素的method属性。 |
| formtarget | 覆盖form元素的target属性。 |
| formnovalidate | 覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查。 |
这些属性主要是用来覆盖或补充form元素上的设置，指定表单提交的URL、使用的HTTP方法、编码方式、表单反馈信息的显示地点，以及控制客户端数据检查。
7.2 用button元素重置表单
如果将button元素的type属性设置为reset，那么按下按钮会将表单中所有input元素重置为初始状态。这样使用该元素时，没有额外的属性可用。
<button type="reset">
reset
</button>
7.3 把button作为一般元素使用
如果将button元素的type属性设置为button，那么该button元素就仅仅是一个按钮。它没有特别的含义，在按下时也不会做任何事情。
8、使用表单外的元素
在HTML4中，input、button和其他与表单相关的元素必须放在form元素中。本章前面所有例子都是这样做的。在HTML5中，这条限制不复存在。现在可以将这类元素与文档中任何地方的表单挂钩。input、 button元素以及与表单相关的元素都定义了一个form属性，该属性正是用于这个目的。要将某个这类元素与并非其祖先元素的form元素挂钩，只将其form属性设置为相关form元素的id属性值即可。
<form id="voteform">
<fieldset>
<legend>
enter your details
</legend>
<p><label for="fave">Fruit:<input id="fave" name="fave"/></label></p>
<p><label for="name">Name:<input id="name" name="fave"/></label></p>
</fieldset>
</form>
<button form="voteform" type="submit">
submit
</button>