admin 管理员组

文章数量: 1086019


2024年3月26日发(作者：虚拟机安装eclipse)

单元6 网页表单元素与表单的美化与布

局

表单是网站中常用的元素之一，主要实现数据的动态交互。表单是与用户交互信息的

主要手段，完整的表单包括三个部分：表单域、表单控件和提示信息。

【知识预览】

1．HTML5的表单及控件标签

（1）

标签

标签用于为用户输入创建HTML表单，表单用于向服务器传输数据。表单能

够包含input元素，例如文本字段、复选框、单选框、提交按钮等。

（2）标签

标签用于搜集用户信息，表单中使用标签插入输入控件，通过type属

性指定控件的类型。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是

单行文本框、密码输入框、复选框、单选按钮、重置按钮、普通按钮、图像域和文件域等。

（3）

要将label元素绑定到其他的表单控件上，可以将label元素的for属性设置为该控件

的id属性值相同，而将label元素的for属性设置为该控件的name属性值则无效。

（4）标签插入一个列表或菜单，相比，提供了更为强大的功能和更丰富的内容。

标签之间的所有内容都是按钮的内容，其中包括任何可接受的本或多

媒体等多种形式的正文内容。

（6）

标签

标签定义命令的列表或菜单，用于上下文菜单、工具栏以及用于列出表单控件

和命令。

（7）标签插入文

本区域，这是一个建立多行文本输入框的专用标签。

（8）

标签和标签

标签将表单内的相关元素分组，当一组表单元素放到
标签内时，浏

览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子

表单来处理这些元素。

标签可以嵌套使用。

（9）标签

HTML5+CSS3网页美化与布局

标签用于定义输入域的选项列表，列表是通过datalist内的option元素创建的。

该标签与input元素配合使用该元素，用来定义input可能的值。

2．HTML5新的form属性

（1）autocomplete属性

autocomplete属性规定form或input域应该拥有自动完成功能。autocomplete适用于

标签以及以下类型的标签：text、search、url、telephone、email、password、

datepickers、range以及color。

（2）novalidate属性

novalidate属性规定在提交表单时不应该验证form或input域。novalidate 属性适用于

以及以下类型的 标签：text、search、url、telephone、email、password、date

pickers、range以及color。

【验证训练】

【任务6-1】验证表单及表单控件各种类型的属性设置

【任务描述】

在网页中输入以下HTML标签及文字：

size="28" placeholder="目的地 | 信息">

针对上述表单及表单控件验证各种类型的属性设置。

（1）为表单的action、method、name、id、target等属性设置不同的属性值。

（2）尝试设置标签的type、name、value、align、size、disabled、alt等属性。

（3）尝试设置


本文标签： 表单 元素 标签 定义 控件

版权声明：本文标题：HTML5+CSS3网页美化与布局单元6 网页表单元素与表单的美化与布局 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1711463852a595489.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。