项目三 表单标签的使用

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

186●1.熟悉select控件的应用。●2.熟练使用表单控件制作多项选择表单网页。187表单控件为表单的核心内容，它允许用户在表单中输入内容。不同的表单控件具有不同的功能，如密码输入框、文本输入框、下拉列表、复选框等，只有掌握了这些控件的使用方法，才能正确地创建表单。188189本任务主要利用表单控件的文本输入框、下拉列表框、单选框、复选框等控件，将多种控件组合在一起，制作出电子产品调查问卷网页，如图所示。电子产品调查问卷网页190步骤一：根据分析，制作电子产品调查问卷网页分为两步，首先插入左侧的问题信息，然后插入右侧的表单控件。在p标签中先放入文字内容，代码如图所示。191左侧问题信息代码192效果如图所示。左侧问题信息效果193步骤二：在上图中，前三个表单输入框（如姓名、购买日期、电子邮件地址）是用了文本框和下拉列表框表单控件，每年有12个月，所以第一个下拉列表框中设置了12个option选项，每月最多有31天，所以第二个下拉列表框中设置了31个option选项，代码如图所示。前三个表单输入框源码194前三个表单输入框源码195此时网页效果如图所示。前三个表单输入框网页效果196步骤三：在上图中，后三个表单输入框所用的是单选框、复选框、多行文本输入框表单控件，这里要注意，两个单选框radio的name属性要设置为相同的值，否则单选功能效果会失效。多个复选框checkbox的name属性也要设置为相同的值，否则提交到服务器的数据会出现异常，代码如图所示。197后三个表单输入框代码198浏览网页时，经常会看到包含多个选项的下拉列表，例如，选择所在的城市、出生年月、兴趣爱好等。图所示即为一个下拉列表，当单击下拉箭头时，会出现一个选择列表。在html中，要想制作出图所示的下拉列表，就需要使用select下拉列表控件，如图所示。下列列表下拉列表控件199使用select控件定义下拉列表的基本语法格式如下。在上面的语法中，<select></select>用于在表单中添加一个下拉列表，<option></option>嵌套在<select></select>中，用于定义下拉列表中的具