HTML5表单新增元素与属性

最新推荐文章于 2023-07-18 21:59:07 发布

COURAGE0316

最新推荐文章于 2023-07-18 21:59:07 发布

阅读量459

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签：表单内元素和属性

本文链接：https://blog.youkuaiyun.com/COURAGE0316/article/details/79255231

HTML5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML5中表单的一些新特性，包括表单元素的form属性、formaction属性、formtarget属性、autofocus属性、formenctype属性、formmethod属性、required属性、labels属性、autocomplete属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.表单内元素form属性：

在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把它们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。

例子：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单元素的form属性</title>
</head>
<body>
<form id="testform">
<input type="text">
</form>
<br><br><br>
<textarea form="testform"></textarea>
</body>
</html>

2.表单元素内的formaction属性：

在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为

增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。

<form id="testform">
<input type="submit" name="a1" value="b1" formaction="https://www.baidu.com/" />提交到百度页面
<input type="submit" name="a2" value="b2" formaction="https://www.so.com//" />提交到好搜页面
<input type="submit" name="a3" value="b3" formaction="http://blog.youkuaiyun.com//" />提交到优快云页面
</form>

3.表单内元素的formtarget属性：

在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。

在HTML5中，可以对多个按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

formtarget="_blank" 在新浏览器页面打开

formtarget="_parent" 在当前框架的父框架中打开

formtarget="_self" 在相同框架frame中打开

formtarget="_top" 在当前窗口中打开

formtarget="framename" 在指定框架中打开

例如：<form id="testform">
<input type="submit" name="a1" value="b1" formtarget="_blank" formaction="https://www.baidu.com//" />提交到百度页面
<input type="submit" name="a2" value="b2" formtarget="_parent" formaction="https://www.so.com//" />提交到好搜页面
<input type="submit" name="a3" value="b3" formtarget="_self" formaction="http://blog.youkuaiyun.com//" />提交到优快云页面
</form>

4.表单内元素的autofocus属性：

为文本框，选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

例如：<form>
<input type="text">
<input type="text" autofocus="">
</form>

5.表单内元素的formenctype属性：

在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单

内的数据进行编码。

在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

例如：<form>
<input type="text" formenctype="application/x-www-form-urlencoded"/>
<input type="text" formenctype="multipart/form-data"/>
<input type="text" formenctype="text/plain"/>
</form>

6.表单内元素的formmethod属性：
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内页只有一个method属性来统一指定提交方法。
在HTmL5中，可以使用formmethod属性对每一个表单元素分别指定不同的提交方法。
例如：<form>
<input type="submit" name="a1" value="b1" formmethod="get" formaction="https://www.baidu.com/" />提交到百度页面
<input type="submit" name="a2" value="b2" formmethod="post" formaction="https://www.so.com//" />提交到好搜页面
</form>
7.表单内元素的required属性：
HTML5中新增的required属性可以应用在大多数输入元素上，在提交时如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
例如：<form action="https://www.baidu.com/">
<input type="text" required="required">
<button type="submit">提交</button>

</form>
8.表单内元素的labels属性：
在HTML5中，为所有可使用标签的表单元素，button，select元素等，定义一个labels属性，属性值为一个NodeLis对象，

代表该元素所绑定的标签元素所构成的集合。

点击标签和框都可以聚焦到默认的框中：
用法一
<form method="get" id="register" name="reg" action="https://www.baidu.com/" target="_blank">
<label>
用户名：<input name="user" value="请输入用户名" autocomplete="off" />
</label>

<button>提交</button>
</form>
<label>电子邮件：<input name="email" form ="register"/></label>
用法二：
<form method="get" id="register" name="reg" action="https://www.baidu.com/" target="_blank">

<label for="user">用户名：</label>
<input id="user" value="hello wyj" name="user">
<br>

<button>提交</button>
</form>