HTML5：表单

时间：2016-02-05 19:27:15 阅读：344 评论：0 收藏：0 [点我收藏+]

表单是HTML中获取用户输入的手段，HTML5对表单系统做了彻底的改造，以适应当前的应用。在HTML5中增加了从用户收集特定类型数据的新方法和在浏览器中检查数据的能力，但在使用有些新增特性前最好先检查一下它是否已经得到了广泛支持。

表单基本元素介绍

构建表单需要三个元素：form、input和button元素。下面是一个简单的表单：

<form method="post" action="http://titan:8080/form">
	<input name="fave"/>
	<button>Submit Vote</button>
</form>

该表单非常简单，就是一个输入框和一个提交按钮，但给了我们一个大概的轮廓，在此基础上进行扩充，就能构造出更有意义、更有用处的表单。下面是对这些表单元素及其属性的一个简单介绍。

1）form元素
form元素告诉浏览器它处理的是HTML表单。支持的属性包括：
1）action：规定提交表单时发送表单数据的目标URL；
2）method：规定用于发送form-data的HTTP方法；
3）enctype：规定在发送表单数据之前如何对其进行编码；
4）name：表单的名称；
5）accept-charset：服务器可处理的表单数据字符集；
6）novalidate：提交表单时不进行验证；
7）target：表单反馈信息的目标显示位置；
8）autocomplete：是否启用表单的自动完成功能。
2）input元素
input元素用于收集输入数据。属性包括：
1）name：元素的名称；
2）disabled：加载时禁用此元素；
3）form：输入字段所属的一个或多个表单；
4）type：元素的类型；
5）其它取决于type属性值的其他一些属性。
3）button元素
button元素用于将输入的数据发给服务器。属性包括：
1）name：元素的名称；
2）disabled：禁用该按钮；
3）form：按钮属于的一个或多个表单；
4）type：按钮的类型；
5）value：按钮的初始值，可以通过脚本修改；
6）autofocus：页面加载时按钮应该自动地获取焦点；
7）其它取决于type属性值的其他一些属性。

配置表单

配置action属性

action属性说明提交表单时浏览器应该把从用户收集到的数据发送到什么地方，即发送给哪个URL处理。如果不设置form元素的action属性，浏览器默认将表单数据发送到用以加载该HTML文档的URL。如果action是一个相对URL，那么该值会被嫁接在当前页的URL的后面（可以使用base元素指定基础URL）。

配置HTTP方法属性

method属性指定了用来将表单数据发送到服务器的HTTP方法，值包括：get和post，默认值为get。

配置数据编码

enctype属性指定了浏览器对发送给服务器的数据采用的编码方式，该属性值包括：
1）application/x-www-form-urlencoded：默认编码方式，不能用来将文件上传到服务器；
2）multipart/form-data：用于将文件上传到服务器；
3）text/plain：各种浏览器对该编码方式存在差异，不建议使用。
下面通过一个例子看看各种编码方式的差异：

<form method="post" action="http://titan:8080/form">
	<input name="fave">
	<input name="name"/>
	<button>Submit Vote</button>
</form>

下面，我们可以为该表单指定不同的编码方式，不同的编码方式导致不同的数据组织方式，如下：

application/x-www-form-urlencoded（默认）

该编码格式是用于各种类型的表单，除了上传文件到服务器，在chrome中的编码结果如下：

fave:type
name:name

multipart/form-data

该编码方式为了适用了上传文件到服务器，更为冗长，处理起来更加复杂。在chrome中的编码结果如下：

------WebKitFormBoundary1A6ksXdtYBD9IqPJ
Content-Disposition: form-data; name="fave"

type
------WebKitFormBoundary1A6ksXdtYBD9IqPJ
Content-Disposition: form-data; name="name"

name
------WebKitFormBoundary1A6ksXdtYBD9IqPJ--

text/plain

该编码方式对于如何编码并没有正式的规范，主流浏览器各有各的数据编码方式，因此不推荐使用。

控制表单的自动完成

该元素用于控制表单的自动完成功能，允许值包括on和off，on为默认，表示允许浏览器填写表单。看下面的例子：

<form autocomplete="off" method="post" action="http://titan:8080/form">
	<input name="fave"/>
	<input name="name"/>
	<button>Submit Vote</button>
</form>

autocomplete属性也可用于input元素，控制单个元素的自动完成功能，例如：

<form autocomplete="off" method="post" action="http://titan:8080/form">
	<input autocomplete="on" name="fave"/>
	<input name="name"/>
	<button>Submit Vote</button>
</form>

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

target属性用于指定表单反馈信息的目标显示位置。通常浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面，使用target属性可以改变这一点，该属性的工作机制和a元素的target属性一样，可选值包括：
1）_blank：将浏览器反馈信息显示在新窗口（或标签页）中；
2）_parent：将浏览器反馈信息显示在父窗口组中；
3）_self：将浏览器反馈信息显示在当前窗口中（默认）；
4）_top：将浏览器反馈信息显示在顶层窗口中；
5）<frame>：将浏览器反馈信息显示在指定窗框中。

<form target="_blank" method="post" action="http://titan:8080/form">
	<input autocomplete="on" name="fave"/>
	<input name="name"/>
	<button>Submit Vote</button>
</form>

设置表单名称

该属性用于为表单设置一个独一无二的标识符，以便使用DOM时区分各个表单。name属性和id属性的区别在于，id属性通常用于CSS选择器。

<form name="fruitvote" id="fruitvote" method="post" action="http://titan:8080/form">
	<input autocomplete="on" name="fave"/>
	<input name="name"/>
	<button>Submit Vote</button>
</form>

在表单中添加说明标签

表单是用于用户输入数据的，有时需要给用户一些指示信息，表明每个表单的用途，这时可以使用label元素。label元素的属性包括：
1）for：关联的input元素的id值，用于将input元素和label元素关联起来，同时帮助屏幕阅读器和其他残障辅助技术对表单的处理；
2）form：label字段所属的一个或多个表单，值为表单的id，多个id使用空格分隔。

<form method="post" action="http://titan:8080/form">
	<p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
	<p><label for="name">Name: <input id="name" name="name"/></label></p>
	<button>Submit Vote</button>
</form>

获取焦点

autofocus属性用于指定是否获取焦点。

<form method="post" action="http://titan:8080/form">
	<p><label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label></p>
	<p><label for="name">Name: <input id="name" name="name"/></label></p>
	<button>Submit Vote</button>
</form>

浏览器显示页面时就会将焦点放到fave输入框上，如果一个页面有几个元素都设置了该属性，浏览器会自动聚焦于其中的最后一个元素。

禁用单个输入框

禁用input元素，可以设置其disabled属性。

<form method="post" action="http://titan:8080/form">
	<p><label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label></p>
	<p><label for="name">Name: <input disabled id="name" name="name"/></label></p>
	<button>Submit Vote</button>
</form>

对表单元素编组

使用fieldset元素可以将一些元素组织起来。该元素包含属性：
1）name：名称；
2）form：指定所属的一个或多个表单，值为所属表单的id，多个表单id以空格分隔；
3）disabled：是否禁用该fieldset。

<form method="post" action="http://titan:8080/form">
	<fieldset>
		<p><label for="name">Name: <input id="name" name="name"/></label></p>
		<p><label for="city">City: <input id="city" name="city"/></label></p>
	</fieldset>
	<fieldset>
		<p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
		<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
		<p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
	</fieldset>
	<button>Submit Vote</button>
</form>

添加说明标签

在每个fieldset元素中添加legend元素提供向用户的相关说明。legend元素必须是fieldset元素的第一个子元素。

<form method="post" action="http://titan:8080/form">
	<fieldset>
		<legend>Enter Your Details</legend>
		<p><label for="name">Name: <input id="name" name="name"/></label></p>
		<p><label for="city">City: <input id="city" name="city"/></label></p>
	</fieldset>
	<fieldset>
		<legend>Vote For Your Three Favorite Fruits</legend>
		<p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
		<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
		<p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
	</fieldset>
	<button>Submit Vote</button>
</form>

禁用整组input元素

如果你想要禁用整组input元素，只需要设置fieldset元素的disabled属性。

<form method="post" action="http://titan:8080/form">
	<fieldset>
		<legend>Enter Your Details</legend>
		<p><label for="name">Name: <input id="name" name="name"/></label></p>
		<p><label for="city">City: <input id="city" name="city"/></label></p>
	</fieldset>
	<fieldset disabled>
		<legend>Vote For Your Three Favorite Fruits</legend>
		<p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
		<p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
		<p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
	</fieldset>
	<button>Submit Vote</button>
</form>

button元素

有三种类型的button，通过button的type属性设定：
1）submit：表示按钮的用途是提交表单（默认）；
2）reset：表示按钮的用途是重设表单；
3）button：表示按钮没有具体语义。

提交表单

将button的type属性设置为submit（默认行为），按下按钮就会提交包含它的表单，采用这种方式时，还可以设置一下的一些属性：
1）form：指定按钮关联的表单；
2）formaction：覆盖form元素的action属性，另行指定表单将要提交到的URL；
3）formenctype：覆盖form元素的enctype属性，另行指定表单的编码方式；
4）formmethod：覆盖form元素的method属性；
5）formtarget：覆盖form元素的target属性；
6）formnovalidate：覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查。
这些属性是HTML5中新增的，主要是用来覆盖或补充form元素上的设置。

<form>
	<p>
		<label for="fave">Fruit:<input autofocus id="fave" name="fave"/></label>
	</p>
	<p>
		<label for="name">Name:<input id="name" name="name"/></label>
	</p>
	<button type="submit" formaction="http://titan:8080/form" formmethod="post">Submit Vote</button>
</form>

重设菜单

将button的type属性设置为reset，那么按下按钮将会将表单中所有input元素重置为初始状态。

<form method="post" action="http://titan:8080/form">
	<p><label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label></p>
	<p><label for="name">Name: <input disabled id="name" name="name"/></label></p>
	<button type="submit">Submit Vote</button>
	<button type="reset">Reset</button>
</form>

作为普通按钮

将button的type属性设置为button，button元素就作为普通按钮，在按下时不会做任何事情。

<form method="post" action="http://titan:8080/form">
	<p><label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label></p>
	<p><label for="name">Name: <input disabled id="name" name="name"/></label></p>
	<button type="submit">Submit Vote</button>
	<button type="reset">Reset</button>
	<button type="button">Do <strong>NOT</strong> press this button</button>
</form>

你可以写一些JavaScript脚本，在按下按钮使执行。

使用form属性

在HTML5中，你可以将表单元素放在任何地方，然后与某个表单挂钩，挂钩的方法就是使用表单元素的form元素。

<form method="post" action="http://titan:8080/form">
	<p><label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label></p>
</form>
<p><label for="name">Name: <input form="voteform" id="name" name="name"/></label></p>
<button form="voteform" type="submit">Submit Vote</button>

form属性中的值为对应form的id，可以指定多个id，使用空格分隔。

HTML5：表单

原文：http://blog.csdn.net/tomato__/article/details/50637764

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)