资源简介

(共50张PPT)
03表单标签的使用任务 1 制作网易邮箱注册网页任务 2 制作电子产品调查问卷网页制作网易邮箱注册网页任务 1● 1. 了解表单的组成及作用。● 2. 了解创建表单的基本语法格式。● 3. 掌握表单相关标签的用法。● 4. 熟练运用表单控件制作网页。本任务主要利用 form 表单的文本输入框、密码框等控件来制作完成网易邮箱注册网页，如图所示。网易邮箱注册网页效果步骤一：分析上图，网易邮箱注册网页分为四个板块，对应为四组表格标签，其中第三个表格需要嵌套子表格。首先写第一个表格，表格的宽度为 962 像素，居于浏览器中间，表格包含 1 行 2 列，第一列的内容是一张宽 392 像素、高 38 像素的图片，第二列的内容为文字信息“帮助”。代码如图所示。此时网页效果如图所示。第一个表格网页效果第一个表格代码步骤二：接着写第二个表格，表格的宽度为 962 像素，居于浏览器中间，表格包含 1 行 1 列，唯 一列的内容为一张宽 962 像素、高 53 像素的图片。第二个表格网页效果第二个表格代码此时网页的效果如图所示。步骤三：接着写第三个表格，表格的宽度为 962 像素，居于浏览器中间，表格包含 1 行 1 列，唯一列嵌入一个 form 表单，表单中嵌入一个子表格，子表格的宽度也为 962 像素，子表格包含 4 行 1 列，第一行、第三行、第四行的单元格填入相应的文字信息，第二行的单元格保持为空。代码如图所示。第三个表格整体框架代码第三个表格整体框架代码此时整体框架页面效果如图所示。整体框架页面效果步骤四：找到在步骤三中创建的子表格，分别在第二行、第四行、第六行、第八行的空单元格中编写对应的标签代码。代码如图所示。标签代码a）第二行代码 b）第四行代码 c）第六行代码 d）第八行代码标签代码a）第二行代码 b）第四行代码 c）第六行代码 d）第八行代码标签代码a）第二行代码 b）第四行代码 c）第六行代码 d）第八行代码标签代码a）第二行代码 b）第四行代码 c）第六行代码 d）第八行代码此时网页效果如图所示。创建账号代码步骤五：最后写第四个表格，表格的宽度为 962 像素，居于浏览器中间，单元格内容与单元格边沿距离为 8，单元格间距为 0。表格包含 1 行 1 列，唯一列居中，代码如图所示。第四个表格代码一、认识表单对于表单，读者可能比较陌生，其实它们在互联网上随处可见。在 html 中，一个完整的表单通常由表单控件（也被称为表单元素）、提示信息和表单域三个部分构成，通常看到的登录注册页面都是由表单完成的。表单用于搜集不同类型的用户输入。为了更好地理解表单的构成，下面来创建一个完整的表单，表单结构代码如图所示。表单结构代码表单结构效果运行图 中的代码，此时网页效果如图所示。二、创建表单在 html 中，<form></form> 被用于定义表单域，即 <form> 为表单开始，</form> 为表单结束。所有的表单元素都要放置在其中。创建表单的基本语法代码如图所示。创建表单的基本语法代码在上面的语法中，action、method 和 name 为表单标签 form 的常用属性，具体见表。form 标签的属性及含义三、认识表单控件1. input 控件input 控件是表单元素中用得最多的一种元素，通常网页中的单行文本输入框、单选框、复选框、提交按钮、重置按钮等都是通过 input 控件定义的，其基本语法格式如下。input 控件的 type 属性为其最基本的属性，根据其 type 属性的取值不同，可输入不同形式的数据，达到客户端与服务器之间真正交互、沟通的目的。除了 type 属性之外，input 控件还可以定义很多其他的属性，具体见表 。input 控件的属性、属性值及描述表中所列出的为 input 控件的常用属性，下面通过一个案例来演示它们的使用方法和效果，如图所示。input 控件代码 1运行图中的代码，效果如图所示。input 控件效果为了使初学者更好地理解不同的 input 控件类型，下面对它们做一个简单的介绍。（1）单行文本输入框 <input type="text"/>单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。（2）密码输入框 <input type="password"/>密码输入框用来输入密码，其内容将以“*”的形式显示。（3）单选框 <input type="radio"/>单选框用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选框时，必须为同一组中的选项指定相同的 name 值，这样“单选”才会生效。此外，可以对单选框应用 checked 属性，指定默认选中项。（4）普通按钮 <input type="button"/>普通按钮常常配合 JavaScript 脚本语言使用，初学者了解即可。（5）复选框 <input type="checkbox">复选框允许用户在一定数目的选择中选取一个或多个选项。复选框能够进行内容的多项选择，显示形式一般为一个方框。（6）提交按钮 <input type="submit"/>提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value 属性，改变提交按钮上的默认文本。（7）重置按钮 <input type="reset"/>当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value 属性，改变重置按钮上的默认文本。（8）图片按钮 <input type="image"/>图片按钮与普通按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义 src 属性，以指定图像的 URL 路径。（9）隐藏域 <input type="hidden"/>隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。（10）文件域 <input type=" le"/>当单击文件域时，页面中将出现一个文本框和一个“浏览”按钮，用户可以通过填写文件路径或直接浏览选择文件的方式，将文件提交给后台服务器。2. textarea 控件当定义 input 控件的 type 属性值为 text 时，可以创建一个单行文本输入框。但是，如果需要输入大量的信息，单行文本输入框就不再适用，为此 html 语言提供了 textarea 控件。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下。在上面的语法格式中，cols 和 rows 为 textarea 控件必须设置的属性，其中 cols 用来定义多行文本输入框中每行的字符数，rows 用来定义多行文本输入框中显示的行数，它们的取值均为正整数。下面通过一个案例来学习 textarea 控件的用法，如图所示。textarea 控件代码在上图中，通过 textarea 控件定义了一个多行文本输入框，并对其应用 cols 和 rows属性来设置多行文本输入框每行中的字符数和显示的行数。在多行文本输入框下面，通过将input 控件的 type 属性值设置为“submit”，定义了一个提交按钮。运行上图中的代码，效果如图所示。textarea 控件效果制作电子产品调查问卷网页任务2● 1. 熟悉 select 控件的应用。● 2. 熟练使用表单控件制作多项选择表单网页。表单控件为表单的核心内容，它允许用户在表单中输入内容。不同的表单控件具有不同的功能，如密码输入框、文本输入框、下拉列表、复选框等，只有掌握了这些控件的使用方法，才能正确地创建表单。本任务主要利用表单控件的文本输入框、下拉列表框、单选框、复选框等控件，将多种控件组合在一起，制作出电子产品调查问卷网页，如图所示。电子产品调查问卷网页步骤一：根据分析，制作电子产品调查问卷网页分为两步，首先插入左侧的问题信息，然后插入右侧的表单控件。在 p 标签中先放入文字内容，代码如图所示。左侧问题信息代码效果如图所示。左侧问题信息效果步骤二：在上图中，前三个表单输入框（如姓名、购买日期、电子邮件地址）是用了文本框和下拉列表框表单控件，每年有 12 个月，所以第一个下拉列表框中设置了 12 个 option 选项，每月最多有 31 天，所以第二个下拉列表框中设置了 31 个 option 选项，代码如图所示。前三个表单输入框源码前三个表单输入框源码此时网页效果如图所示。前三个表单输入框网页效果步骤三：在上图中，后三个表单输入框所用的是单选框、复选框、多行文本输入框表单控件，这里要注意，两个单选框 radio 的 name 属性要设置为相同的值，否则单选功能效果会失效。多个复选框 checkbox 的 name 属性也要设置为相同的值，否则提交到服务器的数据会出现异常，代码如图所示。后三个表单输入框代码浏览网页时，经常会看到包含多个选项的下拉列表，例如，选择所在的城市、出生年月、兴趣爱好等。图所示即为一个下拉列表，当单击下拉箭头时，会出现一个选择列表。在 html 中，要想制作出图 所示的下拉列表，就需要使用 select 下拉列表控件，如图所示。下列列表下拉列表控件使用 select 控件定义下拉列表的基本语法格式如下。在 html 中，可以为 <select> 和 <option> 应用属性，以改变下拉列表的外观显示效果和选中项，具体见表。select 控件和 option 标签的常用属性及描述下面通过一个案例来演示几种不同的下拉列表效果，如图所示。select.html运行上图中的代码，效果如图所示。下拉列表效果

展开更多......

收起↑