单元6　网页表单元素与表单的美化与布局
表单是网站中常用的元素之一，主要实现数据的动态交互。表单是与用户交互信息的主要手段，完整的表单包括三个部分：表单域、表单控件和提示信息。
【知识预览】
手机上可以打html与css的app1．HTML5的表单及控件标签
（1）<form> 标签
<form> 标签用于为用户输入创建HTML表单，表单用于向服务器传输数据。表单能够包含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、value等属性。
【任务实施】
（1）创建一个名称为“单元6”的站点，在该站点中创建文件夹“6-1”。
（2）在该站点的文件夹“6-1”中创建网页0601.html。
（3）在网页0601.html中插入所需的标签以及表单、input单行文本框、button按钮。
（4）定义网页通用的CSS代码。
网页通用的CSS定义代码如表6-2所示。
（5）定义网页主体结构及表单的CSS代码。
网页主体结构及表单的CSS定义代码如表6-3所示。
（6）浏览网页0601.html的效果，如图6-1所示。
图6-1  网页0601.html的浏览效果
（7）然后按照任务描述的要求不断改变超链接的各个属性设置，重新浏览其效果。
【引导训练】
【任务6-2】创建酒店预订的表单网页0602.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0602.html，且链接外部样式文件base.css和main.css。
（3）在网页0602.html中添加必要的HTML标签和插入表单及表单控件。
（4）浏览网页0602.html的效果，如图6-2所示，其中“入住地区”的列表项如图6-3所示，“酒店星级”的列表项如图6-4所示。该表单网页主要用于实现酒店预订功能，包含表单以及多个表单控件。
图6-2  网页0602.html的浏览效果
               
图6-3  入住地区的列表项          图6-4  酒店星级的列表项
【任务实施】
（1）创建站点与文件夹
在站点“单元6”中创建文件夹“6-2”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。
（2）定义网页中表单及表单控件的CSS代码
编写表单及表单控件的CSS代码，如表6-4所示。
（3）定义网页主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构如表6-5所示。
（4）定义美化表单及表单控件的CSS代码
在样式文件main.css中添加样式代码美化表单及表单控件，CSS代码如表6-6所示。
（5）创建网页文档0602.html与链接外部样式表
在文件夹“6-2”中创建网页文档0602.html，切换到网页文档0602.html的【代码视图】，在标签“</head>”的前面输入链接外部样式表的代码，如下所示：
<link type="text/css" rel="stylesheet" href="css/base.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
（6）编写网页主体布局结构的HTML代码
网页0602.html主体布局结构的HTML代码如表6-7所示。
（7）在网页中添加必要的HTML标签与插入表单
在网页文档0602.html中标签“<div class="w-box">”与“</div>”之间，标签<h2></h2>之后添加必要的HTML标签与插入表单及表单控件，并设置各个表单控件的属性，对应的HTML代码如表6-8所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。