DIV+CSS网页制作实战第15次课(2课时)表单页设计.pptxVIP

课次15课时2教具投影仪项目 项目2 HTML网页文档的编辑任务 任务2.4 表单页设计知识点（45分钟）表单、标签、文本域、单选按钮、复选框（45分钟）列表/菜单、文本区域、文件域、按钮重点 表单控件及其应用难点 无备注 上机操作90分钟/ 14知识技能目标表单页设计 （标签、文本域、单选按钮、复选框、列表/菜单、文本区域、文件域、按钮）/ 14任务2.4 表单页设计 表单(Form)是网页设计中的一个重要部分，主要用于采集和提交用户输入的信息。当用户在网上申请某项服务时，如注册一个账号，必须填写相关的资料，就是运用表单完成的。当访问者在表单对象中输入信息并提交时，这些信息将被发送到服务器中，服务器端脚本或应用程序再对这些信息进行处理。/ 14 1．插入一个空白表单 空白表单（form标签）是一个容器，其它的表单控件对象都应该放在这个容器中。 方法1：在Dreamweaver CS6中选择“插入”菜单→“表单”→“表单”。 插入表单后，页面设计视图中会出现一个红色虚框。? 方法2：在页面代码视图中插入form标签代码，例如： form id=form1 name=form1 method=post action=? 格式中method说明表单数据提交方式，通常有post和get两种；action指明提交数据并跳转到哪个页面，如果action=，则表示数据提交给当前页面，此时当前页面就必须是一个动态页面而非.html页面。/ 14 2．插入标签 标签（label标签）通常用来显示一个字符串。 光标点到表单内，选择“插入”菜单→“表单”→“标签”，添加一个label/label对象，在标签内输入要显示的文本。/ 14 3．插入文本域 利用文本域（input type=text标签）可产生一个文本框，让访问者输入文本内容。 光标点到表单内，选择“插入”菜单→“表单”→“文本域”，添加一个文本框。/ 14 4．单选按钮（input type=radio name=radio标签） 多选一时用单选按钮。 光标点到表单内，选择“插入”菜单→“表单”→“单选按钮”，添加一个单选按钮。在分别插入单选按钮时，它们是相互独立的，要实现多选一，要将它们组成一组，方法是将它们的name属性设成相同。/ 14 5．复选框（input type=checkbox标签） 多选多用复选框。 光标点到表单内，选择“插入”菜单→“表单”→“复选框”，添加一个复选按钮。 注意：每个复选框对象的名称可以相同，也可以不同，各个复选框相互独立，彼此的状态互不影响。/ 14 6．列表/菜单 select标签为“列表/菜单”控件，具有“列表”和“菜单”双重功能。 （1）作为“列表”时 select name=select size=3 multiple=multiple id=select option初中/option option selected=selected高中/option option大学/option option研究生/option /select 代码中select标签的multiple=multiple属性表示允许多选，没有multiple属性时表示不能多选；size属性指示同时显示的列表行数，如果没有size属性但有multiple=multiple属性，则表示显示出所有列表项；运行时初始选定项为“高中”。/ 14 （2）作为“菜单”时，它就是一个下拉列表框，用户只能从中选择单个选项。 select name=select id=select option初中/option option selected=selected高中/option option大学/option option研究生/option /select 从上面的代码看出，与“列表”相比，少了size和multiple属性。/ 14 7．文本区域（textarea标签） 文本区域可以接收多行输入。其实文本区域是文本域的一个特例，在Dreamweaver属性面板中，将文本域的类型设置为“多行”，可以将文本域转换为文本区域。反之，文本区域的类型设置为“单行”，也可以将文本区域转换为文本域。举例： textarea name=textarea id=textarea cols=45 rows=5/textarea/ 14 8．文件域（input type=file标签） 如果要向服务器提交本地文件，可利用文件域来完成此项功能。input name=fileField type=file id=fileField size=30 maxlength=50 // 14 9．按钮 用户填写完资料后，要将资料提交给服务器的应用程序或客户端的脚本去处理，可使用按钮对象来触