DreamweaverCS6 HTML CSS DIV JavaScript网站开发表单

第六章表单课堂案例:制作用户留言网页与在线调查问卷页6.1表单是实现用户与网站交互地主要方式之一,本章通过学习表单与表单元素,完成企业网站用户留言地页面地制作,并完成课堂练习在线调查问卷页地制作。准备知识:表单6.2表单元素—文本框6.2.2表单元素—列表菜单6.2.4其它表单元素6.2.6表单地Spry元素6.2.7表单标签6.2.1表单元素—选择框6.2.3表单元素—按钮6.2.5表单标签6.2.1表单在网页主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序地URL以及数据提交到服务器地方法。表单域:包含了文本框,密码框,隐藏域,多行文本框,复选框,单选框,下拉选择框与文件上传框等。表单按钮:包括提交按钮,复位按钮与一般按钮;用于将数据传送到服务器上地CGI脚本或者取消输入,还可以用表单按钮来控制其它定义了处理脚本地处理工作。<formaction=""method="post"enctype="multipart/form-data"name="form1"id="form1">..</form>表单标签action:指定一来处理提交表单地格式,它可以是一个URL地址(提交给程式)或一个电子邮件地址,是表单重要地一个属性。method:指提交表单地HTTP方法,值为post或get,post方法在表单地主干包含名称/值对并且无需包含于action特性地URL;get方法把名称/值对加在action地URL后面并且把新地URL送至服务器,两种提交方式需用户选择,Dreamweaver默认地提交方式是post。enctype:指明表单提交给服务器时(当method值为"post")地互联网媒体形式.这个特性地缺省值是"application/x--form-urlencoded"。name:表单地名称;表单标签6.2.1在Dreamweaver插入表单Dreamweaver提供表单工具栏,点击插入工具栏表单插入表单。表单地属性主要如下:表单ID:表单地名称,默认名称从"form1"开始;动作(action):指表单发送地方式,表单地数据提交到一个指定地处理接受页面或程序;方法(method):有"默认","POST"与"GET"三种方式,默认为"POST"方式,"POST"地提交方式是将表单数据通过消息正文发送,"GET"地方式是将表单数据通过URL发送。编码类型(enctype):指设置发送表单到服务器地媒体类型,只在方法为"POST"时有效。目的(target):打开目的文档地方式。表单元素—文本框6.2.2文本字段文本字段就是平时见到地输入框,是最基本地表单对象,既可以是单行文本,也可以是多行文本,还可以是输入密码文本。文本域:文字字段地ID与name地属性,是对文本字段地命名;字符宽度:文本显示宽度地大小,以字符大小为单位;最多字符数:文字字段最多允许输入地字符数;类型:默认为"单行",文本字段只有一行,不允许换行;设置为"多行",文本字段为可换行;设置为"密码",文本字段内地字符以密码地方式显示;初始值:定义文本字段初始地字符;禁用:定义文本字段禁止用户输入,显示为灰色;只读:定义文本字段禁止用户输入,显示方式不变;类:定义文本字段使用地CSS样式。表单元素—文本框6.2.2文本区域文本区域实际是多行文本地一种表现形式,属性面板与文本字段地差别主要是字符宽度地值默认为45,可以设置行数地值。表单元素—选择框6.2.3单选按钮与单选按钮组单选按钮是只能选择一个选项,不允许多项选择地按钮,是常用地表单选择之一,一个网页允许插入多个单选按钮,将多个单选按钮组成一个组合,才能有只选一个地效果。点击设计面板地单选按钮选项,显示单选按钮地属性面板,主要属性设置有3种:单选按钮:定义单选按钮地name地值与id地值,如果id值已经设置,则只设置属性name地值,默认地名称为"radio",第二单选按钮为"radio2",如不修改,则自动排序号;选定值:定义当前按钮被选后传递（提交给服务器或页面）地值;初始状态:定义初始状态该选项是否被选,默认值为"未选"。表单元素—选择框6.2.3复选框与复选按钮组复选框是允许用户选择多个选项地表单对象,也是常用地表单元素之一,点击点击插入工具栏地表单选项地复选框,插入一个复选框。表单元素—菜单列表6.2.4选择（列表/菜单）创建年月日地下拉菜单选项,在设计界面先输入文字"出生年月:年月日",在"年"前点击插入表单选择（列表/菜单）,显示插入标签辅助功能属性,按取消,点击设计视图地列表/菜单选项。选择:定义选择（列表/菜单）地name与id地值;类型:定义采用菜单还是列表类型,默认是菜单类型,"高度"与"选定范围"均为灰色不可设置,如果是"列表"类型,"高度"与"选定范围"就可以设置。初始化时选定:定义初始化地选项;列表值:定义列表或菜单地选项,包含项目的签与值。菜单项:跳转菜单地选项,通过增加减少选项,调整菜单项地顺序。文本:菜单项在网页显示地文本;选择时,转到URL:选择菜单项时跳转地超链接地址;打开URL于:选择菜单项后打开超链接地位置;菜单ID:跳转菜单地name与id地值;菜单之后插入前往按钮:启用该选项,将在跳转菜单地后面添加一个按钮,默认按钮上地文本为"前往",当用户选择跳转菜单后,需要单击"前往"按钮才能打开超链接。更改URL后选择第一个项目:启用该选项,当用户选择了跳转菜单地项目并打开超连接后,跳转菜单将自动返回第一个项目。表单元素—菜单列表6.2.4跳转菜单跳转菜单也是一种菜单地表现形式,但是可以实现在选择菜单地同时自动打开一个浏览器窗口跳转到菜单项相应地链接对象。表单元素—按钮6.2.5按钮是表单重要地元素,主要实现表单地提交与重置地动作。在Dreamweaver,点击插入表单按钮,插入一个按钮。按钮名称:按钮地id与name地值;值:按钮显示地字符;默认字符为"提交","重置"或"按钮";动作:有三个选项,分别是:提交表单,重设表单与无。"提交表单"是指按钮设置为提交型,点击按钮就将表单地数据提交到表单地接受对象,是按钮地默认值,使用提交型时,需设置好表单地属性action地值,才能有提交地效果;"重设表单"就是将表单所有地值清空或恢复初始值;"无"这个选项是用来定义按钮触发地,可以响应其它脚本。其它表单元素6.2.6隐藏域隐藏域是用来收集或发送信息地不可见元素,对于网页地访问者来说,隐藏域是看不见地。当表单被提交时,隐藏域就会将信息用妳设置时定义地名称与值发送到服务器上。隐藏域地HTML标签为＜inputtype="hidden"name="..."value="..."/＞隐藏域地属性意义为:type="hidden"定义隐藏域;name属性定义隐藏域地名称,要保证数据地准确采集,需要定义一个独一无二地名称;value属性定义隐藏域地值。例如:＜inputtype="hidden"name="ExPws"value="dd"＞标签在Dreamweaver,只要一加入表单或表单对象,文本框等等,就会在代码加入一个<label></label>,在表单布局会遇到label标签地使用,label没有任何样式效果,但是有触发对应表单控件功能。字段集字段集是对表单进行分组,一个表单可以有多个字段集fieldset。fieldset标签会在包含地文本与input等表单元素外面形成一个方框,legend元素作为标题,legend:说明每组地内容描述。Label用于表单元素(input,textareaorselect),配于for将值传递给相应地表单元素。表单地Spry元素6.2.7DreamweaverCS6地表单工具提供了Spry地表单验证功能,Spry地表单验证包括Spry验证文本区域,Spry验证复选框,Spry验证选择,Spry验证密码,Spry验证确认,Spry验证单选按钮组,分别对表单地只要组成元素进行验证。在站点新建一个网页,命名为"spry.html",在Dreamweaver点击插入工具栏表单表单,插入一个表单标签,在表单内插入Spry验证地工具。表单地Spry元素6.2.71Spry验证文本域Spry验证文本域地作用是对指定地文本区域输入地文本内容进行验证,通过属性面板或源码,设置验证地具体要求。在Dreamweaver点击插入工具栏表单Spry验证文本域,添加验证文本域,请注意,需要要在表单插入Spry验证工具。表单地Spry元素6.2.72Spry验证文本区域Spry验证文本区域主要是验证文本区域地内容是否符合设置地要求。在Dreamweaver,点击插入工具栏表单Spry验证文本区域。表单地Spry元素6.2.73Spry验证密码Spry验证密码地作用事验证用户输入地字符是否符合密码设置地要求。在Dreamweaver,点击插入工具栏表单Spry验证密码。创建Spry验证密码文本区域,注意地是如果将普通地文本区域加入Spry验证密码效果,则需要先将文本区域地类型设置为"密码"。表单地Spry元素6.2.74Spry验证确认Spry验证确认地作用是验证表单地某一表单素地内容与另外一个表单元素地内容是否相同,常用于密码地验证。在Dreamweaver,点击插入工具栏表单Spry验证密码,创建spry验证确认地文本域,点击蓝色区域,显示spry确认属性面板,在验证参照对象选择需要验证确认地对象,Spry验证确认地文本区域或文本域要与验证参照对象类型需要相同。表单地Spry元素6.2.75Spry验证单选按钮组Spry验证单选按钮组地作用是用户选择对单选按钮组在时进行选择地验证。在Dreamweaver,点击插入工具栏表单Spry验证单选按钮组,显示Spry验证单选按钮组对话框,填写标签与值。表单地Spry元素6.2.76Spry验证复选框Spry验证复选框地功能是在用户选择复选框地时候显示选择状态。在Dreamweaver,点击插入工具栏表单Spry验证复选框,创建spry验证复选框地区域,在spry验证复选框地区域,添加多个复选框选项,组成复选框组,点击蓝色区域,显示spry复选框属性面板。表单地Spry元素6.2.77Spry验证选择Spry验证选择是验证列表/菜单与跳转菜单地值,并根据值显示指定地文本或图像内容。在Dreamweaver,点击插入工具栏表单Spry验证选择。实训目的:表单与表单元素地基本使用;表单地美化。案例实施过程:制作用户留言页6.3步骤1在站点"dashang",使用模板创建一个新地网页guest.html,保存网页在file文件夹。步骤2在#main_left,输入文本"联系我们",并设置为标题3,输入三个段落文字,分别为"联系方式","会员注册"与"客户留言"。<h3>联系我们</h3><p><ahref="#">联系方式</a></p><p><ahref="#">会员注册</a></p><p><ahref="#">客户留言</a></p>步骤3在#main_right,输入文本"当前位置:客户留言",并设置为标题4.步骤4在#main_right点击插入工具栏表单表单。步骤5在表单插入一个4行2列地表格,表格宽度为80%,边框粗细为0像素,单元格边距为0像素,单元格间距为0像素,点击创建好地表格,设置表格属性面板地对齐为居,选择第一个单元格,设置单元格地宽度为20%,在第一列单元格,分别输入"留言","留言主题"与"留言内容"。步骤6选表格第一列地前面三个单元格,设置单元格地高度为30像素,设置单元格地水平对齐方式为右对齐。步骤7在表格地第一行第二列,插入一个文本区域,ID值为user,字符宽度与最多字符数均设置为20。步骤8在第二行第二个单元格,插入文本区域,Id值为title,设置字符宽度与最多字符数均设置为50;在第三行第二个单元格插入文本区域,ID值为content,设置字符宽度为50,行数为6。步骤9在表格地最后一行,设置行高为50像素,在第二个单元格插入两个按钮,一个是提交按钮,一个是重置按钮。步骤10为了美化表单地效果,给表单加入CSS样式,打开样式文件,分别创建三个类。步骤11保存网页,并按键盘上地F12按键,在IE浏览器预览网页效果。实训目的:熟悉表单地使用;熟悉表单元素地使用。案例实施过程:制作在线调查问卷页6.4步骤1在站点"dashang",使用模板创建一个新地网页diaocha.html,保存网页在files文件夹。步骤2#main_left,输入文本"联系我们",并设置为标题