《网页设计与制作》课件-项目6 创建表单

1.创建表单项目6创建表单主讲教师：课堂学习目标了解什么是表单以及表单的作用1掌握在网页中创建表单并设置表单属性2掌握插入表单元素以及设置元素的属性3认识表单什么是表单？就是用于收集用户在网页的输入信息，实现网页和用户之间的交互。表单它由一个或多个输入框、单选按钮、复选框、下拉列表和图像按钮等组成，一个文档中可以包含多个表单，而且在每个表单中可以放置常用的主体内容，包括文字和图像。组成表单概念访问者在浏览有表单的网页时，填写必需的信息后单击“提交”按钮。服务器中专门的程序对这些数据进行处理，如果有错误则会返回错误信息，并要求纠正错误。表单的工作过程01020304这些信息通过Internet传送到服务器。当数据完整无误后，服务器会反馈输入完成的信息。创建表单如何创建？具体操作步骤如下：（1）在文档窗口中，将插入点放在希望插入表单的位置。（2）弹出“表单”命令，文档窗口中出现一个红色的虚线框用来指示表单区域。创建表单表单的基本设置在文档窗口中选择表单，“属性”面板中出现表单属性。表单名称：名字动作：你准备让哪个网页文件处理你提交的这些信息方法：postget(两种不同的传递参数方法）目标：在什么情况下打开你指定的那个网页修改表单属性表单的基本设置单击“插入”面板“表单”选项卡中的“文本域”按钮，在文档窗口的表单中出现一个文本域。文本域：可以输入任意文本，包括字母、数字、其他字符。该类型又分为单行文本框、多行文本框和密码文本框（可在“属性”面板中设置）。其中密码文本框，所输入的文本被替为星号或项目符号，以隐藏该文本，保护这些信息不被看到。添加表单元素文本域添加表单元素单击“插入”面板“表单”选项卡中的“按钮”按钮，在文档窗口的表单中出现一个按钮。该类型又分为提交表单按钮和重置表单按钮。（可在“属性”面板中设置）。添加表单元素按钮课堂实例：创建用户登录界面使用“表单”按钮，插入表单；使用“表格”按钮，插入表格；使用“文本域”按钮，输入文本；使用“属性”面板设置表格、文本的属性。好了，今天的课程就到这里了。通过今天的学习，我们了解了表单的基本概念和组成，学会了在Dreamweaver中创建和管理表单。希望大家能够将这些知识应用到实际的网页设计中去。课堂小结2.各类表单

元素的应用项目6创建表单主讲教师：课程内容概述课程将详细介绍文本域、单选按钮与文本区域的基本概念、属性设置、以及在实际网页设计中的应用。表单元素是实现网页交互功能的重要组成部分，通过文本域、单选按钮、复选框等元素的组合使用，可以构建出丰富多样的交互效果。实现交互功能表单是网站收集用户信息的重要途径，通过文本域、单选按钮、复选框等元素，可以方便地收集用户的性别、兴趣、偏好等关键信息。收集用户信息合理的表单设计能够让用户更轻松地输入信息，提高网站的易用性和用户满意度。提高用户体验表单元素在网页设计中的重要性01文本域的应用文本域单行文本域01适用于输入简短信息，如用户名、密码等。多行文本域02适用于输入较长文本，如留言板、评论等。密码文本域03输入内容以“”或“•”显示，用于保护敏感信息。可以输入任意文本，包括字母、数字和其他字符。文本域主要用途于输入单行文本，如用户名、密码、电子邮件地址等。为文本域指定唯一标识，便于后台处理。名称属性最多能显示多少个字符，即文本域宽度，调整文本域显示尺寸，满足页面布局需求。字符宽度最多能输入多少个字符。最多字符数设置文本域的默认值，提高用户体验。初始值属性文本域属性设置与调整方法02单选按钮的应用单选按钮提供了多个选项，但是在一组选项中只能选择其中一项。主要用于让用户在一组选项中选择一个，常见于性别选择、兴趣爱好等场景。基本概念在Dreamweaver中创建单选按钮在Dreamweaver中，可以通过插入面板的“表单”选项卡找到“单选按钮”工具，然后单击创建单选按钮。创建步骤在实现单选按钮的单选功能时，各单选按钮的名称必须相同，但是他们的选定值必须不同。设置选项值03文本区域的应用文本区域是指可以输入任意多行文本，包括字母、数字和其他字符。常用于如评论、反馈、描述等。创建文本区域01在DreamweaverCS6中，可以通过“插入”面板，选择“表单”类别下的“文本区域”按钮进行插入。调整文本区域02选中已创建文本区域，可以在属性面板中设置其名称、行数、列数等属性。还可以选择性地添加“初始值”作为示例文本。实战案例：留言板设计任务一：制作客户反馈页面上海企业网站为了了解更多的客户需求及意见，在网页中通过表单页面实现留言页面得到客户的反馈信息，搭建信息反馈平台。回顾今天学习的内容：单选按钮、文本域和文本区域在DreamweaverCS6中的应用。课堂小结单选按钮功能及应用场景单选按钮允许用户在一组选项中选择一个，适用于性别选择、支付方式等场景。文本域功能及应用场景文本域主要用途于输入单行文本，适用于输入简短信息，如用户名、密码、电子邮件地址等场景。文本域功能及应用场景可以输入任意多行文本，包括字母、数字和其他字符。常用于如评论、反馈、描述等。关键知识点回顾与总结3.单选按钮组、复选框与复选框组的应用项目6创建表单主讲教师：课程目标与内容概述通过本课程的学习，学员将能够熟练掌握DreamweaverCS6中单选按钮组、复选框与复选框组的基本概念、编辑和应用技巧，提升网页表单设计的专业能力。01单选按钮组的应用单选按钮组的基本概念单选按钮组是多个单选按钮的集合，用户只能从中选择一个选项。单选按钮也是一种表单元素，用于在一组选项中选择一个值。每个单选按钮表示一个可选项，用户只能选择其中一个。基本概念在Dreamweaver中创建单选按钮组在Dreamweaver中，选择“文件”>“新建”，选择“HTML”类型，然后点击“创建”，可以通过插入面板的“表单”选项卡找到“单选按钮组”工具，然后创建单选按钮组。创建步骤设置选项值在创建单选按钮后，需要为每个单选按钮设置一个唯一的选项值，以便在后端处理用户选择的数据。注意实例操作：单选按钮组在网页表单中的应用假设我们正在创建一个用户注册表单，需要用户从“男”和“女”两个选项中选择一个性别。这时，我们可以使用单选按钮来实现这一功能。示例场景首先，在Dreamweaver中创建两个单选按钮，并分别设置它们的name属性和value属性。操作步骤查看单选按钮组的效果。预览02复选框的应用复选框（Checkbox）是网页表单中常见的元素之一，允许用户在一组选项中选择多个。复选框定义复选框适用于需要用户选择多个选项的场景，如兴趣爱好、技能选择等。用途广泛复选框提供了快速、直观的选择方式，方便用户进行多项选择。便捷性复选框的基本概念与用途选中插入的复选框，通过“属性”面板可以设置其名称、值等属性。设置属性在Dreamweaver中创建复选框在Dreamweaver的“插入”面板中选择“表单”类别，然后点击“复选框”按钮，即可在表单中插入复选框。插入复选框如需批量创建相同属性的复选框，可使用复制粘贴功能或重复插入操作。批量操作03复选框组的应用复选框组的概念及优势复选框组是由多个复选框组成的集合，允许用户选择多个选项。概念提供灵活的选择方式，便于用户根据需求选择多个相关选项，提高表单交互性。优势在Dreamweaver中创建复选框组步骤三打开Dreamweaver，新建或打开已有表单页面。步骤一在表单区域中，选择“插入”面板中的“表单”选项卡。步骤二点击“复选框组”按钮，在表单中绘制复选框组。为每个复选框指定名称和值，确保同一组复选框具有相同的名称属性。步骤四实例操作：复选框与复选框组在网页表单中的多元化应用分别使用复选框和复选框组让用户选择多个感兴趣的选项，以便收集更全面的数据。在调查问卷中04任务二任务二：毕业生就业意向调查表任务描述：高校就业指导部门为了解毕业生的就业意向和职业规划。现决定制作一份毕业生就业意向调查表，在网页中通过表单页面实现毕业生对于就业方向、期望薪资、工作地点、行业偏好等多方面的信息收集。05课程小结关键知识点回顾与总结单选按钮允许用户在一组选项中选择一个，适用于性别选择、支付方式等场景。单选按钮功能及应用场景复选框允许用户同时选择多个选项，适用于兴趣爱好、技能多选等场景。复选框功能及应用场景复选框组的设计与实现通过逻辑分组，将多个相关复选框组合在一起，提高表单的可读性和易用性。详细讲解了如何设置单选按钮组、复选框及复选框组的属性，如名称、值、状态等。表单元素属性设置4.各类表单

元素的应用项目6创建表单主讲教师：目录/contents列表与菜单应用1文件域应用2图像域应用3表单元素综合应用实践4课堂小结501列表与菜单应用列表/菜单是一种下拉选择框，用户可以从预设的选项列表中选择一个。创建跳转菜单将光标放在表单轮廓内需要插入跳转菜单的位置。（1）在“插入”面板“表单”选项卡中单击“跳转菜单”按钮。（2）在网页中插入跳转菜单的具体操作步骤如下。列表与菜单属性面板列表/菜单”下面的文本框：用来设置所选列表的名称。类型：用来设置菜单类型或列表类型。列表值：单击该按钮，弹出“列表框”对话框。初始化时选定：可以选择列表/菜单在浏览器里显示的初始值。列表/菜单的属性面板实战案例：创建下拉菜单创建一个包含多个选项的列表/菜单，用于选择国家或地区。使用Dreamweaver的表单工具创建下拉菜单，并根据规划好的结构添加相应的列表项。注意设置每个列表项的属性和标签，以确保其正确显示和可用。创建下拉菜单确保列表/菜单的显示和交互效果符合预期。预览表单02文件域应用文件域的基本概念：文件域允许用户上传文件到服务器，通常用于图片、文档等文件的提交。创建文件域选择“插入>表单>文件域”命令，在文档窗口的表单中出现一个文件域。文件域属性面板“文件域名称”下面的文本框：用来设置所选文件域的名称。字符宽度：用来设置所选文件域的长度，可输入数值，例如，输入“10”，则文件域的长度能显示10个字节的字符，或者能显示5个汉字。最多字符数：用来设置所选文件域能输入的最大字符数，可输入数值，例如，输入“10”，则文件域最多能输入10个字节的字符，或者最多能输入5个汉字。文件域属性面板实战案例：构建用户头像上传功能明确用户头像上传功能的需求和目标，如支持的图片格式、大小限制等。需求分析根据需求和技术选型，具体实现用户头像的上传、预览和保存等功能。功能实现03图像域应用图像域基本概念及作用阐述在网页表单中，图像域允许用户点击图像来提交表单数据，通常用于创建图像按钮或图像链接。图像域定义图像域能够丰富网页的视觉效果，提高用户体验，同时实现特定的交互功能。图像域作用创建图像域选择“插入>表单>图像域”命令。图像域属性面板“图像区域”下面的文本框：用来设置所选图象域的名称。源文件：设置图像域的图像来源，此时可设置一个新的图像文件来替换这个图像域。替换：用来设置图像域的替换文本，当访问者的浏览器无法显示图像域图像时，可以显示这个替换文本。图像按钮属性面板图像域属性面板对齐：用来设置图像域的对齐方式，有6个选项——“默认值”、“顶部”、“中间”、“底部”、“左对齐”和“右对齐”。如果选择“默认值”，则图像域将采用默认的对齐方式；如果选择“顶部”，则图像域将采用顶部对齐方式；如果选择“中间”，则图像域将采用中间对齐方式；如果选择“底部”，则图像域将采用底部对齐方式；如果选择“左对齐”，则图像域将采用左对齐的对齐方式；如果选择“右对齐”，则图像域将采用右对齐的对齐方式。图像按钮属性面板04任务三任务三05课堂小结我们一起来回顾今天学习的内容：列表/菜单、文件域和图像域在DreamweaverCS6中的应用和属性设置方法。关键知识点回顾总结5.Spry

验证文本域项目6创建表单主讲教师：目录/contentsSpry验证文本域概述1Spry验证文本域实现步骤详解2实战演练制作注册页面验证功能3课程小结4课程背景与目的在创建网页表单时，我们经常需要收集用户信息，比如姓名、邮箱、电话号码等。为了确保这些信息的准确性和完整性，我们需要对表单输入进行验证。DreamweaverCS6中的Spry验证框架为我们提供了这种功能，使得验证过程变得简单而高效。课程背景通过讲解DreamweaverCS6和Spry验证文本域的基本知识和操作技巧，帮助学员掌握这一高效、灵活的表单验证方法，提高网页制作的质量和效率。课程目的验证文本域是一个用于用户输入的表单控件，它要求用户必须输入符合特定规则的信息，如邮箱地址、手机号码等。验证文本域概念验证文本域的主要作用是确保用户输入的信息符合特定的格式和要求，避免用户输入错误或无效的信息，提高表单的可用性和可靠性。验证文本域的作用验证文本域通常由一个或多个HTML表单控件组成，例如<inputtype="text">或<textarea>等，以及相应的验证规则和提示信息。验证文本域的组成验证文本域概念及作用阐述典型应用场景举例在页面中，通常需要用户输入邮箱地址、手机号码等符合特定规则的信息，这时就可以使用验证文本域来确保用户输入的信息符合要求。注册页面、订单页面、用户反馈页面等Spry验证文本域Spry验证文本域用于验证文本域表单对象的有效性。选中网页文档中的某个文本域，选择【插入】|表单|【Spry验证文本域】命令，即可添加Spry验证文本域。实例请为以下“邮箱地址”文本域添加“Spry验证文本”，当用户输入不符合电子邮箱的格式时，提示“格式无效”。如图所示。实例【Spry文本域】：可以在文本框中输入验证文本域名称。【类型】：可以在下拉列表中选择该文本域的验证类型。【预览状态】：可以在下拉列表中选择预览状态。【验证于】：可以选中相应的复选框，设置验证发生的事件。【最小字符数】：可以在文本框中输入该文本域所输入最少字符数数值。选中插入的Spry验证文本域，打开【属性】面板，如图所示。实例【最大字符数】：可以在文本框中输入该文本域所输入最多字符数数值。【最小值状态】：设置当输入的字符数多于文本域所允许的最大字符数时的状态。【最大值状态】：设置当输入的值大于文本域所允许的最大值时的状态。【强制模式】：禁止在验证文本域中输入无效字符。选中插入的Spry验证文本域，打开【属性】面板，如图所示。最后，我们在浏览器中预览我们的网页表单，并测试Spry验证是否按预期工作。尝试在文本域中输入无效数据，看看验证消息是否正确显示。预览和测试验证任务演练制作注册页面验证功能设计注册页面布局和样式在DreamweaverCS6中创建一个新的HTML文档，并将其保存为"register.html"。创建注册页面在注册页面中，添加一个表单元素（<form>），并在其中添加所需的输入字段，如用户名、密码、电子邮件等。设计注册表单使用CSS对注册页面进行样式设置，使其看起来更加美观和整洁。可以添加一些边框、背景颜色、字体等。设置样式添加并配置Spry验证组件插入Spry验证文本域组件在注册页面中，找到需要添加验证的文本字段，然后插入Spry验证文本域组件。自定义验证规则在Spry验证文本域组件中，可以自定义验证规则。例如，可以设置用户名必须包含字母和数字，密码必须包含特殊字符等。配置验证方法在Spry验证文本域组件中，还可以配置验证方法。例如，可以设置当用户输入不符合规则时，显示一个错误消息或者提示用户重新输入。测试注册页面功能完整性在DreamweaverCS6中，可以通过单击"文件"菜单中的"在浏览器中预览"选项来测试注册页面的功能完整性。本地测试在注册页面中，尝试填写不同的信息进行测试。例如，可以填写不符合要求的用户名和密码，看看是否可以成功提交表单。填写表单在表单提交后，检查是否正确地进行了验证。如果输入的信息不符合要求，应该会出现相应的错误提示。验证结果优化用户体验建议增加错误提示为了更好地提高用户体验，建议在表单中添加一些错误提示信息，以便用户清楚地了解自己的输入是否正确。优化界面设计为了更好地提高用户体验，建议对注册页面的界面设计进行优化。例如，可以增加一些边框和背景颜色等，使页面看起来更加美观和整洁。增加注册成功提示为了更好地提高用户体验，建议在用户成功提交表单后，增加一些注册成功的提示信息，以便用户清楚地了解自己的输入是否正确。Spry验证文本域概述了解Spry框架简介及应用范围、验证文本域概念及作用阐述、典型应用场景举例等知识点。Spry验证文本域实现步骤详解学员应掌握创建HTML表单并添加文本字段、插入Spry验证