第七章 制作表单页

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第七章 制作表单页面,7.1关于表单,利用表单，Internet效劳器可以从用户处收集信息，如收集用户资料、获取用户定单，搜索接口、留言簿等。,表单中有文本框、单项选择按钮、复选框、下拉列表、按钮等，称这些元素为表单对象，有时候也称作控件。将具有相互联系的、能完成一定功能的表单对象的集合称为表单域，有时也简称表单。一个网页中可以有多个表单域。,网页制作人员在网页上制作表单，用户浏览时可以填写表单，然后单击一个发送按钮将表单填写的内容发送给WEB效劳器，效劳器可以处理表单并提供给管理人员查看。这里要介绍的实际上是第一步：在网页上制作表单。,插入表单域,插入表单域,将插入点放置到要添加表单的地方；,翻开Forms表单表单对象面板；,单击对象面板上的Insert Form插入表单按钮，或是将该按钮直接拖动到文档窗口中希望创立表单的位置上，即可构建表单域。也可以通过执行Insert|Form插入|表单命令插入表单域。,假设激活了文档窗口的显示不可见元素的特性，就会看到文档窗口中出现红色虚线围绕的区域，该区域就是表单域,提示：表单域在HTML中的标记为和。,设置表单域属性,由于一般表单内容要发送到效劳器处理，所以对一个表单需要设置其发送数据的方法。一个网页可以用多个表单域，为了区分不同表单域，需要给它们命名。设置表单域的属性，在属性面板中进行。,在文档窗口中，单击表单边框，这时的属性面板如图9.3所示。,1 表单名称。在Form Name表单名称下面的文本框中可以设置表单名称，它是页面描述语言的引用名。,2 行为：行为是处理表单的方法，这里仅提供处理表单的程序名。在Action行为后的文本框中输入处理表单的URL地址，可以是HTTP类型的地址，如 :/，也可以是Mail To 类型的地址，如。也可以单击右方的文件夹按钮，从磁盘上选择处理程序。,3 提交方法：,POST 在 HTTP 请求中嵌入表单数据。,GET 将值追加到请求该页的 URL 中。,默认使用浏览器的默认设置将表单数据发送到效劳 器。,通常，默认方法为 GET 方法。不要使用 GET 方法发送长表单。URL 的长度限制在 8,192 个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。而且，在发送机密用户名和密码、信用卡号或其他机密信息时，不要使用 GET 方法。用 GET 方法传递信息不平安。,MIME类型：,通常情况下，使用HTML表单从浏览器向效劳器传递数据。这个表单中可能包含文本域、检验框、按钮以及上载文件的文件类型控制。使用者用自己的数据填充并将这个表提交给效劳器。表单元素中的 enctype 属性规定了传递给效劳器的表数据集编码的内容类型。enctype 属性的默认值是application/x-www-form-urlencoded，但当向效劳器传送大量文本、包含非ASCII字符或二进制数的数据时，这个默认类型就不能胜任了。这时，文件上载提交表单时应使用multipart/form-data内容类型。一个multipart/form-data信息包含一系列部件，每个部件都可能包含：一个Content-Disposition内容-处理头，其值为form-data；一个规定控制名的name名称属性。,插入表单对象,表单域中可以插入任何HTML对象，如文本、表格、图像，也可以为它们建立超链接，但它们不是表单对象。表单对象指表单域中专门处理用户输入数据的元素，如请输入姓名：,前面的文字说明后面文本框中应该填写的内容，前面的文字称为提示文字，后面的文本框才称为表单对象。网页中表单对象包括文本框、单项选择按钮、复选框、下拉列表、按钮等。,使用对象面板可以方便地插入表单对象。,将插入点放置入表单域中要放置控件的位置；,翻开表单对象面板；,单击相应的按钮，或是将按钮拖动到文档窗口中希望放置表单对象的位置上，即可添加相应的表单对象；也可翻开Insert|Form Object表单对象菜单，再在子菜单中选择要插入的控件名称，插入相应的表单对象；,单击选中添加到文档中的表单对象，附属性面板中，可以设置其相应属性；,必要时，可以在控件周围输入相应的提示文字，作为控件的标签；,如果希望删除某个控件，可以首先用鼠标单击该控件，选中它，然后按Del 键。,提示：可以将控件作为普通文本一样，进行各种编辑操作，如复制、剪切和粘贴等。,注意：如果没有先创立表单域，或是在插入表单对象之前，没有将插入点放置于表单域中，就会显示警告对话框，提示是否要为插入的表单对象创立一个表单域，单击Yes，那么添加表单对象，同时添加表单域；单击No，那么仅添加表单对象，但是不添加表单域。,插入文本域,文本域是一个能在其中输入文字范围的通称，文本域包括单行的文本框、单行的密码框和多行的文本编辑区。,插入文本域,将插入点放置到要添加文本框的位置；,执行Insert|Form Object|Text Field文本域命令，或单击表单对象面板上的Insert Text Field插入文本域按钮。默认状态下添加的文本域是一个单行的文本编辑框(文本框),在文档窗口中单击选中文本域控件，控件四周带有虚线边框，这时就可以在其属性面板中设置文本域的各种属性了,如下图，其中最重要的属性是文本框类型。,在文本域属性Tpye类型后面有三个单项选择按钮，它们分别表示文本域为单行文本框Single line、多行文本框Multi line或密码域Password。,单行文本框只能输入一行文本，多行文本编辑区可以输入多行文本，密码域虽只能输入一行文本，但输入时它在屏幕上只显示星号*，因此用作不宜被它人知道的保密信息输入，典型的就是口令或叫密码。,文本域一般还有如下属性。,文本域名称：一个表单中可以有多个相同或不同类型的文本域，因此必须给文本域命名。Dreamweaver已经为文本域按插入的先后设置了默认名称，如textfield、textfield2、textfield3等，也可以在TextField文本域下面的文本框中输入其他名称。该名称可以被脚本或程序所引用，在发送表单数据时，会同数据一同发送往效劳器。,字符宽度：即文本域的宽度是几个字符。在Char Width字符宽度文本框中输入，默认宽度是21个字符。,最大字符数：指最多能输入多少字符，在Max Chars最大字符文本框中输入。通常利用该属性限制用户输入的密码字符数目，或是要求用户在输入邮政编码时不能超过6位等，如果该值大于文本框的字符宽度，那么内容会自动在文本框内移动。对于文本编辑区类型，该项为Num Lines(行数)，设置的是文本编辑区可输入字符的行数，实际上它也控制了文本编辑区显示的高度。,初始值：即用户一翻开网页时文本框中显示的内容，对多数用户会填写的相同内容，设置为初始值，可以减少用户输入的字符数。初始值在Init Value初始值文本框输入。,换行：对多行文本框，其内容较长时可以用换行的方式显示，也可以用滚动条的方式显示，在Wrap换行下拉列表框中选择多行文本的显示方式。,Off关闭：表示当编辑区中的一段文本过长，超出了文本编辑区的宽度时，那么会自动为文本编辑区添加水平滚动条，允许通过滚动条来浏览文字。,Virtual虚拟：表示当编辑区中的文本过长，超出了文本编辑区的宽度时，会自动按照文本编辑区的宽度对文本进行换行，这种换行仅仅是在显示上换了行，在实际发送的数据中，文本中并没有添加回车符号。所以称为虚拟行为。,Physical物理：自动按照文本编辑区的宽度对文本进行换行，这种换行是真正的物理换行，在实际发送的数据中，文本中相应位置被添加换行符号。,Default默认：删除换行属性的设置，使用默认的自动回行方式，一般是Virtual方式。,插入按钮,按钮常用作命令的执行。在HTML文档中，存在三种类型的按钮：提交Submit按钮、复位Reset按钮以及常规按钮。,插入按钮,将插入点放置到要添加按钮的位置。,翻开Insert|Form Object菜单，从子菜单中选择Button按钮命令，或单击表单对象面板上的Insert Button插入按钮按钮。,默认状态下，添加的按钮是一个提交Submit按钮。,按钮常用作命令的执行。在HTML文档中，存在三种类型的按钮：提交Submit按钮、复位Reset按钮以及常规按钮。,插入按钮,将插入点放置到要添加按钮的位置。,翻开Insert|Form Object菜单，从子菜单中选择Button按钮命令，或单击表单对象面板上的Insert Button插入按钮按钮。,默认状态下，添加的按钮是一个提交Submit按钮。,选中按钮，按钮属性面板如下图，其中Action行为域的3个单项选择按钮用来设置按钮的类型。,Submit Form提交表单：将当前按钮设置为一个提交类型的按钮。这样，单击该按钮，可以将表单域中所有表单控件中的内容发送往效劳器中。,Reset Form复位表单：将当前按钮设置为一个复位类型的按钮。单击这样的按钮，可以将表单域中所有表单控件中的内容恢复为默认的初始值，也即由Init Value设置的值。,None：不为当前按钮指定内置的行为，可以将按钮同一个客户端的脚本或应用程序相关联，单击这样的按钮时执行相应的脚本或程序。,提示：在表单中，一般都至少有一个提交型按钮，用来向效劳器提交表单，和一个重设型按钮，用来让用户重新填写表单。,注意：不同类型的按钮，在显示形式上是相同的，用户区分不同类型或不同功能的按钮是通过按钮上的提示文字区分的。,设置按钮名称。一个表单可以用多个按钮，数据处理程序通过按钮名称区分不同按钮。属性面板中Button Name按钮名称文本框用来设置按钮的名称。,按钮标签值。按钮标签值是显示在按钮上的提示文字，理论上可以是任何文字，实际上它应与按钮功能相关，以说明该按钮的功能。,注意：按钮名称与按钮标签值是不同的。标签值是显示在按钮上的提示文字，仅仅是提示。名称是程序区分不同按钮和对数据做不同处理的依据。,添加复选框,复选框也叫检查框，主要用于标记一个选项是否被选中。该选项可以是单独的选项，也可以是一组选项中的一个。复选框的特性在于对成组的选项，可以一次选中一个，也可以一次选中多个。常用于用户可以作多重选择的问题。,插入复选框,将插入点放置到要插入复选框的位置;,翻开Insert|Form Object菜单，从子菜单中选择Check Box 复选框命令，或是单击表单对象面板上的Insert Check Box插入复选框按钮。,默认状态下，在文档窗口中添加一个空白的方框，说明该复选框尚未被选中。通常，还需要在复选框的左方或右方按照正常的文本输入方法输入说明性的文字.,如果希望精确调整复选框和说明性文字之间的位置，可以将复选框或文字放入表格或层中，然后进行精确定位。,在文档窗口中单击复选框选中，复选框属性面板如下图。,在CheckBox复选框名称下面的文本框中设置复选框的名称。,Checked Value选中值：用来设置选中复选框后控件的值，实际上是标明选中状态的一个符号，可以是“0、“1、xuanzhong等，该值可以被提交到效劳器上，以被应用程序处理。,Initial State初始状态：设置表示该复选框在网页被翻开时是选中的还是未选中的。Checked选中表示初始时是选中的，UnChecked未选中表示初始时是未选中的。设置原那么是减少用户操作。,注意：文档中，每一个小方框就是一个复选框，每个复选框都须有一个名字，提交时，选中的复选框返回Check Value中设置的值，未选中的复选框不返回值。,一般来说，很少有单独出现的复选框，大多是成组出现，同时带有说明性文字。例如，图中显示了一个让用户选择爱好的选项组。这种情况下，可以为每一个复选框设置不同的名称和取值，也可以对这些复选框使用相同的名称。例如图中设置所有复选框名称为hobby，假设选中了“音乐和“读书两个复选框，其选中