网页设计类之表单及其应用

《网页设计类之表单及其应用》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、单及其应用表单即在网上填写的表格，如屮请电子免费邮箱时需要填写的个人信息等。通过表单可以实现访问者和网站两者之I'可的信息交互，图3-1即为一个典型的表单实例。下面通过对该实例的操作来介绍表单的创建和表单对象组件的插入和设置。操作步骤如下：个人简历个人爱好□唱歌（□眺舜□i矣书□交友□书法（□上网□旅游□聊天far）图3-1表单实例一效果1.创建表单在DreamweaverMX屮有两种方法创建表单或表单对象：方法一：单击主菜单“插入”一“表单”。方法二：选择“插入”面板组的“表单”面板，如图3-2所示，单击其上的工具按钮可

2、以创建表单或表单对象。图3-2“插入”工具栏上的“表单”选项卡我们常用第二种方法创建表单。首先启动DreamweaverMX,在标题框中输入：表单练习，再单击“插入”面板组的“表单”血板中的［□按钮，页面中就会出现红色细虚线框，该框就代表表单域，如图3-3所示。图3・3插入表单域表单域的设定是通过属性检查器来完成的，属性检查器如图3-4所示。图3・4表单域的属性检查器各参数的意义：•表单名称：表单的名称。•动作：连接到Web应用程序的文件。单击◎按钮选择文件的位置，这个文件也是实现表单功能的关键。•方法：指定表单数据发送的

3、方法。一般选择“POST”（或“GET”）这两个选择的区别是：POST是一种邮寄的方式，在浏览器的地址栏不显示提交的信息，但是这种方式传送的数据是没有限制的；GET是一种手把手的提交到服务器上的方式，最大的信息量是2kB,而且提交的信息显示在浏览器的地址栏上。当不指明是哪种方式时，默认为GET方式。在图3・1“插入”面板的“表单”子面板屮，还包含了其它多种表单对象，表单对象是让访问者输入信息的地方。表单中可包括的对象组件有文本域、按钮、攵选框、单选按钮、列表/菜单框、文件域、图像域、隐藏域、跳转菜单等，下面对这些表单对象进

4、行简单的介绍。D“表单”：添加其他表单对象的基本容器。口“文本域”：在表单屮建立文本输入框的工具。N“隐藏域”：在网页的表单中包含隐藏的信息。口“文本区域”：在表单中建立输入多行文本输入的工具。画“复选框”：供用户在提供的多个选项中做出复选。S“单选按钮”：供用户在提供的多个选项屮做出单个选择。罔“单选按钮组”：用于创建多个单选按钮，并使这些单选按钮成为一组。0“列表/菜单”：可以在网页中以列表的形式为用户提供一系列的预设选择项。昌“跳转菜单”：提供一个包含跳转动作的菜单列表。国“图像域”：使用指定的图像作为表单中的标准按

5、钮。□“文件域”：在网页屮建立一个文件地址的输入选择栏。□“按钮”：用于触发服务器端脚本处理程序的工具。回“标签”：当用户单击该按钮时，文档窗口就会显示为文档和代码同时显示的模式，并在源代码屮添加＜label＞标签和＜/label＞标签，在这两个标签Z间用户可以输入相应的代码。□“字段集”：用于让用户通过在对话框中输入代码，然后系统自动将这些代码加入到表单源代码中。2、插入表格（1）在代表表单的红虚线框内插入一个13行2列的表格，宽度：75%,水平居中。（2）将第9至第13行中的每行2列合并为1列。输入的文字如图3-5所示

6、。图3-5在表单内插入表格3、插入文本域（1）将光标插入点放置在第1行右边的单元格内。单击“表单”面板中的口按钮，插入文本域，设置文本域的属性如图3-6所示。图3-6文本域的属性检查器属性说明：•文本域：文本域的名称。直接在在文本框中修改即可。•字符宽度：文本域中可显示字符的最大宽度。•最大字符数：文本域中允许输入的最大字符数。•类型：文本域的类型。可以选择单行、多行或者密码。（2）分别在第2行和第3行的右列按前3步的方法插入文本域，属性“类型”皆选择"密码”单选按钮，名称分别为mmfleld和qrmmfieldo4、插入

7、单选按钮（1）将光标插入点放置在第4行右边的单元格内：单击“表单”面板中的回按钮，插入单选按钮，在其右侧输入：男。（2）输入若干个全角空格，再插入一个单选按钮，并在其右侧输入：女。如图3-7所示。姓名」1密码〔10位以內门1确认密码□1性别2男Q女丨图3・7文本域的属性检查器5、插入日期将光标插入点放置在第5行右边的单元格内，插入3个文本域（第1个名为：yfield,字符宽度：4,最大字符数：4；第2个名为：mfield,字符宽度：2,最大字符数：2；第3个名为：wfield,字符宽度：2,最大字符数：2）,分别在3个文本

8、域的右侧输入：年、月、口。6、插入列表（1）将光标插入点放在第6行右边的单元格内，单击“表单”面板中的團按钮，插入“列表/菜单”，设置属性如图3-8所示。图3$“列表/菜单"的属性检查器（2）单击属性检查器上的I列表值…_按钮,弹出“列表值”对话框，如图3・9所示。图3・9“列表值”对话框说明：也：单击