HTML5权威指南——表单

复习以前写的文章发现一大段一大段的话我自己都不想读下去，从这一篇往后，我就将一些要点像无序列表的样子呈现了。

制作基本表单

制作基本表单就依靠三个元素form，input，button元素。form元素告诉浏览器现在是一个HTML表单了。input元素用来收集用户的输入数据。button元素的作用就是告诉浏览器输入完毕啦，该把我发到服务器了。
这样写就生成一个简单的表单了。

<form>
    <input placeholder="请输入···">
    <button>submit</button>
</form>

配置表单

就像上面那样一个简单的表单肯定什么都干不了，像是装装样子。下面来配置表单让他强大起来吧！
1.配置表单的action属性

• action属性告诉浏览器将表单提交到那个地方，权威指南上提交到的是自己编写的Node.js 脚本上。
• 如果不指定action属性那么浏览器会将表单数据发到用以加载该HTML文档的URL上（这有什么作用呢？我也不知道等我知道了我在回来写上嘿嘿。。）
• 若为action属性指定的是一个相对URL，那么该值会被嫁接到当前页的URL，若使用了base属性就是发送到base上的href加上该相对URL。
  2.配置HTTP方法属性
• method属性指定以何种HTTP方法将数据发送到服务器上，允许的值有两个get和post，分别对应于HTTP中的GET和POST，不写默认get，但大部分表单用到的都是post。
• GET请求用于安全交互，同一个请求可以发送多次而不会产生任何影响。一般而言应该用于获得只读信息
• POST请求则用于不安全交互，提交的数据的行为会导致一些状态的改变，大多数应用都是用这个方法，如果不确定用哪个好，就用这个吧一般而言POST请求用于会改变应用程序状态的各种操作。
  3.配置数据编码
• enctype属性指定浏览器对发送给服务器的数据采用何种编码方式。
• enctype属性允许的值：

值	说明
application/x-www-form-urlencode	未设置enctype属性时默认的值，注意他不能用来将文件上传到服务器上
multipart/form-data	用于将文件上传到服务器上
text/plain	这个要谨慎使用，因为各个浏览器对他的编码方式没有正式的规范

4.控制表单的自动完成功能

• 表单的自动完成功能就是浏览器记住用户输入表单的数据，并在此遇到类似的表单就可以自动填入这些数据。（这个我深有体会呀，在上传简历的时候，重复而繁杂的东西要一遍一遍填多累呀，有了这个功能能减少不少麻烦，但是也不是所有的简历填写页面都可以这样。）
• 浏览器通过判断input元素的name属性来判断是否可以重复使用数据。
• form元素的autocomplete属性可以完成以上的功能，他有两个值:on和off，默认值时on
• input元素也有autocomplete属性。用于单个元素的自动完成功能。

<form autocomplete="off" method="post" action="http://titan:8080/form">
	<input/>
</form>

5.指定表单反馈信息的目标显示位置

• 默认情况下浏览器会将提交表单后服务器的反馈信息替换表单所在的原页面，不过这可以用form元素中的target属性予以改变。
• 下面就是target属性的取值了，这与a元素中的target一样(由于自己没有整理这个target属性，那就在这里写一遍吧！希望自己记住)

值	说明
_blank	显示在新开的窗口或者标签页中
_parent	显示在父窗框组
_self	默认行为，显示在当前窗口
_top	显示在顶层窗口
<frame>	显示在指定窗框中

实验了一下这几个属性的效果，发现_blank和frame都是打开新的标签页，而其余的三个都是在原页面上显示。

6.设置表单名称

• name属性用来为表单设置一个独一无二的标识符，以便使用DOM时区分各个表单

<form name="fruitvote"></form>

在表单中添加说明标签

• 使用label元素给表单中的每个元素提供说明。
• label元素中的for属性的值是关联的元素的id值。

<form method="post" action="http://titan:8080/form">
    <p><label for="name">姓名： <input id="name"/> </label> </p>
    <p><label for="sex">性别： <input id="sex"/> </label> </p>
    <p><button>submit</button></p>
</form>

自动聚焦到某个input元素

• 使用input元素的autofocus属性使用户输入数据时自动聚焦，而不是手动选择。

<p><label for="name">姓名： <input autofocus id="name" /> </label> </p>

设置了autofocus属性后的跟上面一个图不一样了吧，第一个框自动聚焦了，边框就变成蓝色了。

禁用单个input元素

• 若不想用户在此输入框输入数据，就可以禁用它。用disabled属性。

<p><label for="sex">性别： <input disabled id="sex"/> </label> </p>

更上面两张图比一比是不是又不一样了，设置了disabled属性后框变成灰的了。

对表单元素编组

• 对于复杂的表单，可以使用编组的方式让他们看起来有分隔比较清晰（在填简历的时候有个人信息栏，也有教育经历一栏，这两个就是两个不同的组，需要用fieldset使他们看起来结构清晰一些。）
• 用fieldset属性来对表单进行分组。

<form>
    <fieldset>
        <p><label for="name">姓名： <input autofocus id="name" /> </label> </p>
        <p><label for="sex">性别： <input disabled id="sex"/> </label> </p>
    </fieldset>
    <fieldset>
        <p><label for="name">姓名： <input autofocus id="name" /> </label> </p>
        <p><label for="sex">性别： <input disabled id="sex"/> </label> </p>
        <p><button>submit</button></p>
    </fieldset>
</form>

fieldset不仅是让编写时表单结构更加清晰，还为每一个fieldset添加一个边框。

1.为fieldset元素添加说明标签

• 使用legend元素为每一个fieldset元素添加说明

        <form>
            <fieldset>
                <legend>Enter You Details</legend>
                <p><label for="name">姓名： <input autofocus id="name" /> </label> </p>
                <p><label for="sex">性别： <input disabled id="sex"/> </label> </p>
            </fieldset>
            <fieldset>
                <legend>Enter You Details</legend>
                <p><label for="name">姓名： <input autofocus id="name" /> </label> </p>
                <p><label for="sex">性别： <input disabled id="sex"/> </label> </p>
                <p><button>submit</button></p>
            </fieldset>
        </form>

2.用fieldset禁用整组input元素

• 在fieldset中使用disabled属性也可以禁用多个input元素。

<fieldset disabled>
    <legend>Enter You Details</legend>
    <p><label for="name">姓名： <input autofocus id="name" /> </label> </p>
    <p><label for="sex">性别： <input  id="sex"/> </label> </p>
    <p><button>submit</button></p>
</fieldset>

使用button元素

• button元素属性type的值有三个:submit(提交表单),reset（重置表单）,button（没有具体语义）
  1.用button元素提交表单
• 设置button的type值为submit或者不设置type，点击按钮都会提交表单。
• 它还有一些其他属性用来补充或者覆盖form元素上的设置，记住它们还是很简单的，就是form+需要覆盖的属性。除了一个formnovalidate没见过，没见过的更好记住呀，它最特殊！

属性	说明
form	用来指定关联的表单
formaction	覆盖form元素上的action属性，另行指定提交的URL
formenctype	覆盖form元素上的enctype属性，另行指定表单的编码方式
formmethod	覆盖form元素上的method属性
formtarget	覆盖form元素上的target属性
formnovalidate	覆盖form上的novalidate属性，表明是否应该执行客户端数据的有效性检查

<p><button type="submit" formaction="http://titan:8080/form"> submit</button></p>

2.用button元素重置表单

• 将button的type设置为reset就可以把表单中所有的input元素重置为初始状态。
  3.把button作为一般元素使用
• 把button的type设置为button就可以当一般的元素使用了。

使用表单外的元素

在HTML4中input，button，等与表单相关的元素都要放在form中，但在HTML5中他们放在哪里都来可以啦。要与form关联使用表单元素的form属性设置为要关联的form的id即可。