2015年网页美化与布局电子教案06单元6　网页表单元素与表单的美化与布局.docVIP

HTML5+CSS3网页美化与布局 单元6　网页表单元素与表单的美化与布局 PAGE 2 PAGE 3 单元6　网页表单元素与表单的美化与布局 表单是网站中常用的元素之一，主要实现数据的动态交互。表单是与用户交互信息的主要手段，完整的表单包括三个部分：表单域、表单控件和提示信息。 【知识预览】 1．HTML5的表单及控件标签 （1）form 标签 form 标签用于为用户输入创建HTML表单，表单用于向服务器传输数据。表单能够包含 \o HTML input 标签 input元素，例如文本字段、复选框、单选框、提交按钮等。 （2）input标签 input标签用于搜集用户信息，表单中使用input 标签插入输入控件，通过type属性指定控件的类型。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是单行文本框、密码输入框、复选框、单选按钮、重置按钮、普通按钮、图像域和文件域等。 （3）label标签 label标签为input元素定义标注（标记），label元素不会向用户呈现任何特殊效果。 要将label元素绑定到其他的表单控件上，可以将label元素的for属性设置为该控件的id属性值相同，而将label元素的for属性设置为该控件的name属性值则无效。 （4）select标签 表单中使用select标签插入一个列表或菜单，select标签要与option标签联合使用，每个列表项或下拉菜单项都要使用option标签来定义。 （5）button 标签 button标签定义一个按钮，在button元素内部，可以放置文本或图像等内容，这是该元素与使用input元素创建的按钮之间的不同之处。 button控件与input type=button相比，提供了更为强大的功能和更丰富的内容。button与/button标签之间的所有内容都是按钮的内容，其中包括任何可接受的本或多媒体等多种形式的正文内容。 （6）menu标签 menu标签定义命令的列表或菜单，用于上下文菜单、工具栏以及用于列出表单控件和命令。 （7）textarea标签 textarea标签定义多行的文本输入控件，表单中使用textarea/textarea标签插入文本区域，这是一个建立多行文本输入框的专用标签。 （8）fieldset标签和legend标签 fieldset标签将表单内的相关元素分组，当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子表单来处理这些元素。fieldset/fieldset标签可以嵌套使用。 （9）datalist标签 datalist标签用于定义输入域的选项列表，列表是通过datalist内的option元素创建的。该标签与input元素配合使用该元素，用来定义input可能的值。 2．HTML5新的form属性 （1）autocomplete属性 autocomplete属性规定form或input域应该拥有自动完成功能。autocomplete适用于form标签以及以下类型的input标签：text、search、url、telephone、email、password、datepickers、range以及color。 （2）novalidate属性 novalidate属性规定在提交表单时不应该验证form或input域。novalidate 属性适用于form以及以下类型的input 标签：text、search、url、telephone、email、password、date pickers、range以及color。 【验证训练】 【任务6-1】验证表单及表单控件各种类型的属性设置 【任务描述】 在网页中输入以下HTML标签及文字： div class=nav-menu form action= method=get i class=w-search input name=key class=input id=searchKey type=text size=28 placeholder=目的地 | 信息 button class=buttonGray type=submit搜索/button /i /form /div 针对上述表单及表单控件验证各种类型的属性设置。 （1）为表单的action、method、name、id、target等属性设置不同的属性值。 （2）尝试设置input标签的type、name、value、align、size、disabled、alt等属性。 （3）尝试设置button标签的disabled、name、type、