Dreamweaver9

1第9章表单9.1插入表单域9.2插入表单对象9.3跳转菜单9.4表单实例思考与练习29.1插入表单域利用表单，Internet服务器可以从用户处收集信息，如收集用户资料、获取用户定单，搜索接口、留言簿等。表单中有文本框、单选按钮、复选框、下拉列表、按钮等，称这些元素为表单对象，有时候也称作控件。将具有相互联系的、能完成一定功能的表单对象的集合称为表单域，有时也简称表单。一个网页中可以有多个表单域。网页制作人员在网页上制作表单，用户浏览时可以填写表单，然后单击一个发送按钮将表单（填写的内容）发送给WEB服务器，服务器可以处理表单并提供给管理人员查看。这里要介绍的实际上是第一步：在网页上制作表单。3在Dreamweaver中，要添加表单对象，首先要创建表单域。由于表单域属于不可见元素，因此，如果希望在屏幕上显示表单域，可以执行View|InvisibleElements命令，激活Dreamweaver的不可见元素。9.1.1插入表单域【例9.1】插入表单域①将插入点放置到要添加表单的地方；②打开Forms（表单）表单对象面板（图9.1）；③单击对象面板上的InsertForm（插入表单）按钮，或是将该按钮直接拖动到文档窗口中希望创建表单的位置上，即可构建表单域。也可以通过执行Insert|Form（插入|表单）命令插入表单域。若激活了文档窗口的显示不可见元素的特性，就会看到文档窗口中出现红色虚线围绕的区域，该区域就是表单域（见图9.2）。4图9.15图9.26提示：表单域在HTML中的标记为Form和/Form。9.1.2设置表单域属性由于一般表单内容要发送到服务器处理，所以对一个表单需要设置其发送数据的方法。一个网页可以用多个表单域，为了区分不同表单域，需要给它们命名。设置表单域的属性，在属性面板中进行。在文档窗口中，单击表单边框，这时的属性面板如图9.3所示。（1）表单名称。在FormName（表单名称）下面的文本框中可以设置表单名称，它是页面描述语言的引用名。7图9.38（2）行为。行为是处理表单的方法，这里仅提供处理表单的程序名。在Action（行为）后的文本框中输入处理表单的URL地址，可以是HTTP类型的地址，如，也可以是MailTo类型的地址，如mailto://[e-mail]。也可以单击右方的文件夹按钮，从磁盘上选择处理程序。（3）提交方法。指表单内容以什么方式发送给服务器。从Method（方法）下拉列表中选择发送表达数据的方法，有3种选择：Get（获取）将表单数据发送往服务器时，以参数形式传递给服务器；Post（发送）将表单数据发送往服务器时，以标准输入（鼠标、键盘）的形式传递给服务器；Default（默认）使用默认的发送方法，大多数浏览器采用Get方法。9注意：由于GET方法发送的信息长度有一定限制，所以一般情况下建议使用POST方法，特别是数据较多的表单。不过应与服务器端处理表单的程序使用方法一致。提示：关于Get和Post方法的详细情况，请阅读有关CGI（CommonGatewayInterface，公共网关接口）方面的资料。109.2插入表单对象表单域中可以插入任何HTML对象，如文本、表格、图像，也可以为它们建立超链接，但它们不是表单对象。表单对象指表单域中专门处理用户输入数据的元素，如请输入姓名：前面的文字说明后面文本框中应该填写的内容，前面的文字称为提示文字，后面的文本框才称为表单对象。网页中表单对象包括文本框、单选按钮、复选框、下拉列表、按钮等。使用对象面板可以方便地插入表单对象。①将插入点放置入表单域中要放置控件的位置；②打开表单对象面板；11③单击相应的按钮，或是将按钮拖动到文档窗口中希望放置表单对象的位置上，即可添加相应的表单对象；也可打开Insert|FormObject（表单对象）菜单，再在子菜单中选择要插入的控件名称，插入相应的表单对象；④单击选中添加到文档中的表单对象，从属性面板中，可以设置其相应属性；⑤必要时，可以在控件周围输入相应的提示文字，作为控件的标签；⑥如果希望删除某个控件，可以首先用鼠标单击该控件，选中它，然后按Del键。提示：可以将控件作为普通文本一样，进行各种编辑操作，如复制、剪切和粘贴等。12注意：如果没有先创建表单域，或是在插入表单对象之前，没有将插入点放置于表单域中，就会显示警告对话框，提示是否要为插入的表单对象创建一个表单域，单击Yes，则添加表单对象，同时添加表单域；单击No，则仅添加表单对象，但是不添加表单域。9.2.1插入文本域文本域是一个能在其中输入文字范围的通称，文本域包括单行的文本框、单行的密码框和多行的文本编辑区。【例9.2】插入文本域①将插入点放置到要添加文本框的位置；13②执行Insert|FormObject|TextField（文本域）命令，或单击表单对象面板上的InsertTextField（插入文本域）按钮。默认状态下添加的文本域是一个单行的文本编辑框(文本框)，如图9.4所示。在文档窗口中单击选中文本域控件，控件四周带有虚线边框，这时就可以在其属性面板中设置文本域的各种属性了,如图9.5所示，其中最重要的属性是文本框类型。在文本域属性左上方Tpye（类型）后面有三个单选按钮，它们分别表示文本域为单行文本框（Singleline）、多行文本框（Multiline）或密码域（Password）。14图9.415图9.516单行文本框只能输入一行文本，多行文本编辑区可以输入多行文本，密码域虽只能输入一行文本，但输入时它在屏幕上只显示星号（*），因此用作不宜被它人知道的保密信息输入，典型的就是口令或叫密码。图9.6显示了文本域的3种形式。文本域一般还有如下属性。文本域名称：一个表单中可以有多个相同或不同类型的文本域，因此必须给文本域命名。Dreamweaver已经为文本域按插入的先后设置了默认名称，如textfield、textfield2、textfield3等，也可以在TextField（文本域）下面的文本框中输入其他名称。该名称可以被脚本或程序所引用，在发送表单数据时，会同数据一同发送往服务器。17单行文本框只能输入一行文本，多行文本编辑区可以输入多行文本，密码域虽只能输入一行文本，但输入时它在屏幕上只显示星号（*），因此用作不宜被它人知道的保密信息输入，典型的就是口令或叫密码。图9.6显示了文本域的3种形式。文本域一般还有如下属性。文本域名称：一个表单中可以有多个相同或不同类型的文本域，因此必须给文本域命名。Dreamweaver已经为文本域按插入的先后设置了默认名称，如textfield、textfield2、textfield3等，也可以在TextField（文本域）下面的文本框中输入其他名称。该名称可以被脚本或程序所引用，在发送表单数据时，会同数据一同发送往服务器。18图9.619字符宽度：即文本域的宽度是几个字符。在CharWidth（字符宽度）文本框中输入，默认宽度是21个字符。最大字符数：指最多能输入多少字符，在MaxChars（最大字符）文本框中输入。通常利用该属性限制用户输入的密码字符数目，或是要求用户在输入邮政编码时不能超过6位等，如果该值大于文本框的字符宽度，则内容会自动在文本框内移动。对于文本编辑区类型，该项为NumLines(行数)，设置的是文本编辑区可输入字符的行数，实际上它也控制了文本编辑区显示的高度。初始值：即用户一打开网页时文本框中显示的内容，对多数用户会填写的相同内容，设置为初始值，可以减少用户输入的字符数。初始值在InitValue（初始值）文本框输入。20换行：对多行文本框，其内容较长时可以用换行的方式显示，也可以用滚动条的方式显示，在Wrap（换行）下拉列表框中选择多行文本的显示方式。Off（关闭）：表示当编辑区中的一段文本过长，超出了文本编辑区的宽度时，则会自动为文本编辑区添加水平滚动条，允许通过滚动条来浏览文字。Virtual（虚拟）：表示当编辑区中的文本过长，超出了文本编辑区的宽度时，会自动按照文本编辑区的宽度对文本进行换行，这种换行仅仅是在显示上换了行，在实际发送的数据中，文本中并没有添加回车符号。所以称为虚拟行为。Physical（物理）：自动按照文本编辑区的宽度对文本进行换行，这种换行是真正的物理换行，在实际发送的数据中，文本中相应位置被添加换行符号。21Default（默认）：删除Wrap属性的设置，使用默认的自动回行方式，一般是Virtual方式。9.2.2插入按钮按钮常用作命令的执行。在HTML文档中，存在三种类型的按钮：提交（Submit）按钮、复位（Reset）按钮以及常规按钮。【例9.3】插入按钮①将插入点放置到要添加按钮的位置。②打开Insert|FormObject菜单，从子菜单中选择Button（按钮）命令，或单击表单对象面板上的InsertButton（插入按钮）按钮。默认状态下，添加的按钮是一个提交（Submit）按钮。22③选中按钮，按钮属性面板如图9.7所示，其中Action（行为）域的3个单选按钮用来设置按钮的类型。SubmitForm（提交表单）：将当前按钮设置为一个提交类型的按钮。这样，单击该按钮，可以将表单域中所有表单控件中的内容发送往服务器中。ResetForm（复位表单）：将当前按钮设置为一个复位类型的按钮。单击这样的按钮，可以将表单域中所有表单控件中的内容恢复为默认的初始值，也即由InitValue设置的值。None：不为当前按钮指定内置的行为，可以将按钮同一个客户端的脚本或应用程序相关联，单击这样的按钮时执行相应的脚本或程序。23图9.724提示：在表单中，一般都至少有一个Submit型按钮，用来向服务器提交表单，和一个Reset型按钮，用来让用户重新填写表单。注意：不同类型的按钮，在显示形式上是相同的，用户区分不同类型或不同功能的按钮是通过按钮上的提示文字区分的，在Dreamweaver中通过Label属性设置。④设置按钮名称。一个表单可以用多个按钮，数据处理程序通过按钮名称区分不同按钮。属性面板中ButtonName（按钮名称）文本框用来设置按钮的名称。⑤按钮标签。按钮标签是显示在按钮上的提示文字，理论上可以是任何文字，实际上它应与按钮功能相关，以表明该按钮的功能。在Label（标签）文本框中可以设置按钮标签。图9.8是设置的不同标签的按钮。25图9.826注意：按钮名称与按钮标签是不同的。标签是显示在按钮上的提示文字，仅仅是提示。名称是程序区分不同按钮和对数据做不同处理的依据。9.2.3添加复选框复选框也叫检查框，主要用于标记一个选项是否被选中。该选项可以是单独的选项，也可以是一组选项中的一个。复选框的特性在于对成组的选项，可以一次选中一个，也可以一次选中多个。常用于用户可以作多重选择的问题。【例9.4】插入复选框①将插入点放置到要插入复选框的位置;②打开Insert|FormObject菜单，从子菜单中选择CheckBox（复选框）命令，或是单击表单对象面板上的InsertCheckBox（插入复选框）按钮。27默认状态下，在文档窗口中添加一个空白的方框，表明该复选框尚未被选中。通常，还需要在复选框的左方或右方按照正常的文本输入方法输入说明性的文字（见图9.9）。如果希望精确调整复选框和说明性文字之间的位置，可以将复选框或文字放入表格或后面将介绍的层中，然后进行精确定位。在文档窗口中单击复选框选中，复选框属性面板如图9.10所示。在CheckBox（复选框名称）下面的文本框中设置复选框的名称。CheckedValue（选中值）：用来设置选中复选框后控件的值，实际上是标明选中状态的一个符号，可以是“0”、“1”、xuanzhong等，该值可以被提交到服务器上，以被应用程序处理。28图9.929图9.1030InitialState（初始状态）：设置表示该复选框在网页被打开时是选中的还是未选中的。Checked（选