实验六 表单.docVIP

实验六 表单 一、实验目的： 1、了解HTML中与表单、表单对象有关的标记。 2、掌握在Dreamweaver中制作表单的方法。 3、掌握在Dreamweaver中如何插入各种表单对象，并设置其属性。 4、用JavaScript/VBScript编写客户端脚本。 二、实验内容： 1、制作一个如下图所示的登陆界面，如下图所示： 2、用客户端脚本实现表单数据输入的有效性验证 3、各种类型表单的使用方法 三、实验原理 表单可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。 表单包括两个部分：一部分是HTML源代码用于描述表单（例如，域，标签和用户在页面上看见的按钮），另一部分是脚本或应用程序用于处理提交的信息（如CGI脚本）。不使用处理脚本就不能搜集表单数据。 表单由文本域、复选框、单选框、菜单、文件地址域、按钮等表单对象组成，所有的部分都包含在一个由标识符标志起来的表单结构中。 表单的种类有注册表、留言薄、站点导航条、搜索引擎等。表单标记符FORMFORM表单可以很简单，只有一个输入域，也可以很复杂，例如有按钮、检查框、滚动窗口的多区域等。最常使用的FORM表单元素标记有三种，即INPUT、SELECT和TEXTAREA。INPUT的作用是在表单中建立各种的输入域。其主要的属性有name、value、type等3个。name被用来表示不同的输入域，value被用来给输入域设定初值，type被用来确定可接受的输入域的类型。type属性可定义为text（单行文本域）、password（口令域）、radio（圆形单选域）、checkbox（复选框）、reset（复位钮）、submit（提交按钮）、range（范围域）、hidden（隐藏域）。 当需要使用滚动列表和下拉菜单时，可使用SELECT标记符。SELECT通过使用option标记符可以定义列表项，支持multiple、name、size这3种属性。当需要为用户提供一个较大的文本输入区域时，可用textarea标记符来建立一个多行文本区。textarea使用cols、rows和name这3种属性。cols用于定义文本区的列数，rows用于定义该文本区的行数，name为该区域的名字。 %@Language=VBScript% 或者 %@Language=JavaScript% 四、实验步骤 1、制作一个登陆界面 选择“文件--新建…创建HTML文件”，进入一个新建文件的工作窗口，在设计视图下，选择工具栏左端的黑色三角符号，单击，弹出选项菜单，选择“表单”栏目，可以看到工具栏上的图标随着更换成常见的表单选项。接下来根据需要选择插入所需的表单选项。完成登陆界面的制作。 2、用客户端脚本实现表单数据输入的有效性验证，验证规则是：用户名和密码不能为空，否则弹出警告对话框。 html head title表单数据校验/title meta http-equiv=content-type content=text/html;charset=gb2312 script language=Javascript function cheakform() { if (document.loginform.username.value==){ window.alert(请输入用户名！); document.loginform.username.focus(); return(false); } if(document.loginform.userpswd.value==){ alert(请输入密码！); document.loginform.userpswd.focus(); return(false); } document.loginform.submit(); } /script /head body bgcolor=#ffffff text=#000000 div align=centerh3用户登录/h3/div form name=loginform method=post action=login.asp table width=400 border=0 align=center cellspacing=10 tr td width=200用户名： input type=text name=username size=10 /td td width=200密码： input type=password name=userpswd size=10 /td /tr /table div align=center input type=button name=bu1 value=登录 onclick=cheakform() input