Adobe Dreamweaver 设计 三制作 钱海军讲师
Adobe Dreamweaver 钱海军 讲师 设计 制作
制作表单页面 ·了解表单的工作原理 ·插入各种表单元素 ZhuHai Radio And Television University
ZhuHai Radio And Television University 制作表单页面 • 了解表单的工作原理 • 插入各种表单元素
一、了解表单的工作原理 利用表单，可以帮助Internet服务器从用户处收集信息和实现搜索接口。在Internet上也 同样存在大量的表单，让用户输入文本和进行选择。通常，表单的红作过程如下： 1,访问者在浏览有表单的网页时，可填写必须的信息，然后单击“提交”按钮。 2.这些信息通过Internet传送到服务器上。 3:服务器上专门的程序对这些数据进行处理，如果有错误，回返回错误信息，并要求纠正错 误。当数据完整无误后，服务器回反馈一个输入完成信息。 QQ注册 甲QQ张号 规岸 店新行新：延转行传 邮箱帐号 地，康于记 性制年具。生 立即注册 ZhuHai Radio And Television University
ZhuHai Radio And Television University 一、了解表单的工作原理 利用表单，可以帮助Internet服务器从用户处收集信息和实现搜索接口。在Internet上也 同样存在大量的表单，让用户输入文本和进行选择。通常，表单的工作过程如下： 1. 访问者在浏览有表单的网页时，可填写必须的信息，然后单击“提交”按钮。 2. 这些信息通过Internet传送到服务器上。 3. 服务器上专门的程序对这些数据进行处理，如果有错误，回返回错误信息，并要求纠正错 误。当数据完整无误后，服务器回反馈一个输入完成信息
如上图所示，当用户填写了必要的信息并单击“立即注册”按钮后，这些填写的信息 就会发送到服务器上，服务器端脚本或应用程序对信息进行处理，并将注册成功结果反馈 浏览者，或执某些特定的程序。 交互式表单是收集用户信息，将其提交到服务器，从而实现与客户的交互。如调查表、 订单等。一个完整的表单应该包含两个部分：一是在网页中进行描述的表单对象：二是应 用程序，它可以是服务器端得，也可以是客户端的，用于对客户信息进行分析处理。 浏览器处理表单的过程一般如下：用户在表单中输入数据，然后提交表单，浏览器根 据表单体中的设置处理用户输入的数据。若表单指定通过服务器端得脚本程序进行处理， 则该程序处理完毕后将结果反馈给浏览器（即用户看到的反馈结果）：若表单指定通过客 户端，即用户方的脚本程序处理，则处理完毕后也会将结果反馈给用户。 两种表单数据处理方法各有优缺点。服务器端方式的主要优点是能全方位地处理用户 端输入的数据，但占用服务器的资源；客户端方式的优点是不占用服务器资源，反馈结果 快，但只能对用户输入的数据进行有限的处理。ASP,C等是常用的服务器端脚本程序编 写语言，javascript、vbscript等是常用的客户端脚本程序编写语言。服务器端脚本程序的 运行一定要在服务器环境下，而客户端脚本程序运行只需浏览器环境即可。 zhuHai Rad sion University
ZhuHai Radio And Television University 如上图所示，当用户填写了必要的信息并单击“立即注册”按钮后，这些填写的信息 就会发送到服务器上，服务器端脚本或应用程序对信息进行处理，并将注册成功结果反馈 浏览者，或执某些特定的程序。 交互式表单是收集用户信息，将其提交到服务器，从而实现与客户的交互。如调查表、 订单等。一个完整的表单应该包含两个部分：一是在网页中进行描述的表单对象；二是应 用程序，它可以是服务器端得，也可以是客户端的，用于对客户信息进行分析处理。 浏览器处理表单的过程一般如下：用户在表单中输入数据，然后提交表单，浏览器根 据表单体中的设置处理用户输入的数据。若表单指定通过服务器端得脚本程序进行处理， 则该程序处理完毕后将结果反馈给浏览器（即用户看到的反馈结果）；若表单指定通过客 户端，即用户方的脚本程序处理，则处理完毕后也会将结果反馈给用户。 两种表单数据处理方法各有优缺点。服务器端方式的主要优点是能全方位地处理用户 端输入的数据，但占用服务器的资源；客户端方式的优点是不占用服务器资源，反馈结果 快，但只能对用户输入的数据进行有限的处理。ASP、C等是常用的服务器端脚本程序编 写语言，javascript、vbscript等是常用的客户端脚本程序编写语言。服务器端脚本程序的 运行一定要在服务器环境下，而客户端脚本程序运行只需浏览器环境即可
二、插入各种表单元素 1.插入表单 2.插入单行文本域 3.插入密码域 4.插入多行文本域 5.插入复选框 6.插入单选按钮 7.插入列表菜单 8.插入文件域 9.插入按钮 10.插入图像域 11.插入跳转菜单 ZhuHai Radio And Television University
ZhuHai Radio And Television University 二、插入各种表单元素 1. 插入表单 2. 插入单行文本域 3. 插入密码域 4. 插入多行文本域 5. 插入复选框 6. 插入单选按钮 7. 插入列表/菜单 8. 插入文件域 9. 插入按钮 10. 插入图像域 11. 插入跳转菜单
2.1插入表单 每个表单都是由一个表单域和若干个表单元素组成的，所有的表单元素要放到表单域中才会有 效，因此，制作表单页面的第一步是插入表单域。 1,将光标定位到要插入表单的区域，选择“插入”快捷工具栏的“表单”对象组，单击左边第 一个“表单回钮。 2这时，网页中便插入一个表单域，它在网页编辑窗口中显示为一个红色虚线框的范围。其他 表单对象一定要放入这个范围内才能发挥作用。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 2.1 插入表单 每个表单都是由一个表单域和若干个表单元素组成的，所有的表单元素要放到表单域中才会有 效，因此，制作表单页面的第一步是插入表单域。 1. 将光标定位到要插入表单的区域，选择“插入”快捷工具栏的“表单”对象组，单击左边第 一个“表单”按钮。 2. 这时，网页中便插入一个表单域，它在网页编辑窗口中显示为一个红色虚线框的范围。其他 表单对象一定要放入这个范围内才能发挥作用
2.1插入表单 3.使用鼠标单击虚线的边框，使虚线内出现黑色区域，表示该表单域已被选中，此时的“属性” 面板如下图： Propertie Form name Action Target form1 Method POST Enctype 4.“表单名称”用来设置这个表单的名称。“动作”用来设置这个表单的服务器脚本的路径。 假设为某网站制作一个表单页面，需要一个用ASP编写的脚本进行处理，则路径可以写成 submit..a$p。如果希望该表单通过电子邮件式发送，而不被服务器脚本处理，需要在“动作” 后填入mailto:和希望发送到的电子邮件地址。 5.在“方法”一项选择表单提交的方法。POST表单信息将以文件的形式提交：GET会将浏览 者提供的信息附加在URL地址的后面提交到服务器，因为GET为默认的提交表单的方式，所以 如果选择DEFAULT,将以GET方式提交表单。在实际使用中，不建议使用GET方式，一方面 GET方法将表单内容附加在UL地址后面，所以对提交信息的长度进行了限制，最多不超过 8192个字符。如果信息太长，将被截去，从而导致意想不到的处理结果。同时，该方法不具有 保密性，不适合处理如信用卡卡号等要求保密的文件，这里选择POST方式。 ZhuHai Radio And Television University
ZhuHai Radio And Television University 3. 使用鼠标单击虚线的边框，使虚线内出现黑色区域，表示该表单域已被选中，此时的“属性” 面板如下图： 4. “表单名称”用来设置这个表单的名称。“动作”用来设置这个表单的服务器脚本的路径。 假设为某网站制作一个表单页面，需要一个用ASP编写的脚本进行处理，则路径可以写成 submit.asp。如果希望该表单通过电子邮件式发送，而不被服务器脚本处理，需要在“动作” 后填入mailto:和希望发送到的电子邮件地址。 5. 在“方法”一项选择表单提交的方法。POST表单信息将以文件的形式提交；GET会将浏览 者提供的信息附加在URL地址的后面提交到服务器。因为GET为默认的提交表单的方式，所以 如果选择DEFAULT，将以GET方式提交表单。在实际使用中，不建议使用GET方式，一方面 GET方法将表单内容附加在URL地址后面，所以对提交信息的长度进行了限制，最多不超过 8192个字符。如果信息太长，将被截去，从而导致意想不到的处理结果。同时，该方法不具有 保密性，不适合处理如信用卡卡号等要求保密的文件，这里选择POST方式。 2.1 插入表单
2.2插入单行文本域 在表单域中插入一个可输入一行文本的文本字段。文本字段接受任何类型的字母数字文本输入 内容。 1.选择“插入”快捷工具栏的“表单”对象组，单击左边第一个“仗本字回按钮。插入一 个文本字段到网页中。 Untitled-1* 2.在“属性”面板的“文本域”下面给单行文本框命名，这个名字应该尽量使用英文，不要出 现于网页中其他对象的名称相同的现象，不要出现空格，如果有空格应该使用下划线代替。除 此之外，文本域的名称是程序处理的依据，命名要与文本域收集信息的内容一致。 3.在“字符宽度”设置文本框的宽度，默认状态下约为24个字符的长度。 4.在“最大字符数”为文本框内所能填写的最多字符数，这与上面的文本框宽度是不同的概念。 5.在“初始值”为默认状态下填写在单行文本框中的文字，可以在这里填写一些提醒文字，在 预览状态下，文字就会出现在网页编辑窗口中的文本框中。 Char width Password Class None textfield Max Chars Int val ZhuHai Radio And Television University
ZhuHai Radio And Television University 在表单域中插入一个可输入一行文本的文本字段。文本字段接受任何类型的字母数字文本输入 内容。 1. 选择“插入”快捷工具栏的“表单”对象组，单击左边第二个“文本字段”按钮。 插入一 个文本字段到网页中。 2. 在“属性”面板的“文本域”下面给单行文本框命名，这个名字应该尽量使用英文，不要出 现于网页中其他对象的名称相同的现象，不要出现空格，如果有空格应该使用下划线代替。除 此之外，文本域的名称是程序处理的依据，命名要与文本域收集信息的内容一致。 3. 在“字符宽度”设置文本框的宽度，默认状态下约为24个字符的长度。 4. 在“最大字符数”为文本框内所能填写的最多字符数，这与上面的文本框宽度是不同的概念。 5. 在“初始值”为默认状态下填写在单行文本框中的文字，可以在这里填写一些提醒文字，在 预览状态下，文字就会出现在网页编辑窗口中的文本框中。 2.2 插入单行文本域
2.3插入密码域 密码域只用于需要填写密码等机密内容时，浏览者填写的内容都将与“◆”或“*”的形式显示。 1,选择“插入”快捷工具栏的“表单”对象组，单击左边第立个“文本字回按钮。插入一 个文本字段到网页中。 2.选择文本字段“属性”面板的“密码”项，文本字段变为密码框 3.密码框的属相设置与单行文本框的属性设置完全一样。 TextFeld Char width Type Single lne ○Password Class None textfeld Max Chars Init val ZhuHai Radio And Television University
ZhuHai Radio And Television University 2.3 插入密码域 密码域只用于需要填写密码等机密内容时，浏览者填写的内容都将与“⚫”或“”的形式显示。 1. 选择“插入”快捷工具栏的“表单”对象组，单击左边第二个“文本字段”按钮。 插入一 个文本字段到网页中。 2. 选择文本字段“属性”面板的“密码”项，文本字段变为密码框。 3. 密码框的属相设置与单行文本框的属性设置完全一样
2.4插入多行文本框 在表单域中插入一个可输入多行文本的文本域。其实就是一个属性为多行的文本域。多行文本 域通常提供多字或段落响应，如用户的留言等。 1.选择“插入”快捷工具栏的“表单”对象组，单击左边第四个“文本区自按钮。插入一 个文本区域到网页中。 2.“文本域”下方的文本框中填写该多行文本框的名称，切记使用英文填写。命名要与用户填写 的内容有关。“初始值”可以填写多行文本框的初始内容。这些项目的含义与单行文本域的属 性是一样的。在“字符宽度”设定多行文本框的宽度，默认值为20个字符的宽度。在“行数 中设定多行文本框的高度，以相当于几行文本进行计算，默认为两行文本的高度。 后 TextFleld Class None textarea Num Lines☐ Init val Wrap Default ZhuHai Radio And Television University
ZhuHai Radio And Television University 2.4 插入多行文本框 在表单域中插入一个可输入多行文本的文本域。其实就是一个属性为多行的文本域。多行文本 域通常提供多字或段落响应，如用户的留言等。 1. 选择“插入”快捷工具栏的“表单”对象组，单击左边第四个“文本区域”按钮。 插入一 个文本区域到网页中。 2. “文本域”下方的文本框中填写该多行文本框的名称，切记使用英文填写。命名要与用户填写 的内容有关。“初始值”可以填写多行文本框的初始内容。这些项目的含义与单行文本域的属 性是一样的。在“字符宽度”设定多行文本框的宽度，默认值为20个字符的宽度。在“行数” 中设定多行文本框的高度，以相当于几行文本进行计算，默认为两行文本的高度