项目八 应用网页表单（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目八 应用网页表单 > = = 任务一 学会制作表单 = 制作注册页面目的 注册页面设计原则 表单域的类型 = 本节提纲 活动一 制作用户注册页面 = 网页的交互性 我们的网站和电视、广播等都是信息传播的工具，同时也有很大的不同，其中最重要的不同点在于网站它不是一个“被动”的媒体，不是一味的向访问者传播信息，网页需要我们用鼠标去点击，自主控制浏览进度。同时网站还会与用户进行交互，收集用户的访问信息，获取第一手的数据。网站通过用户注册和登录功能，为不同的用户推送不同的网页内容，实现信息的准确传播。这就是网页的交互性。 = 4 什么是表单？ 表单通常由多个表单对象组成，如文本字段、隐藏域、文本区域、复选框、单选按钮等，通过表单，网站可以非常方便地收集访问者的相关信息。如图8-2为注册QQ账号时需要填写的一个表单页面。 一个表单一般包括3个组成部分： 1、表单标签：包含了如何处理表单数据的方法。 2、表单域：包含了文本字段、隐藏域、文本区域、复选框、单选按钮等。 3、表单按钮：包括提交按钮、复位按钮和一般按钮。 表单在html中的标签为<form></form> = 一般注册页面表单域 文本区域 隐藏域 复选框 单选框 文本字段 = 6 创建和设置表单 创建表单 。 在Dreamweaver CS6中，如图8-3所示，点击“插入”菜单，在下拉选项中选择“表单”命令，单击“表单”，即可插入表单，设计视图中表现为一个红色的虚线框，代码视图中显示<form id="form1" name="form1" method="post" action=""> </form>。 Tips：表单对象需要包含在表单中，故通常需先插入表单，再在表单中添加表单对象。设计视图中的红色虚线框在网页中是不显示的，当选择实时视图时，红色虚线框不显示。 = 创建和设置表单 设置表单属性 。 表单属性面板各选项的含义如下： 1、表单ID：设置表单的名称，以便在脚本语言中控制该表单。 2、动作：设置处理表单数据的程序。 3、方法：设置表单数据上传到服务器的方法。GET表示将表单中的数据以追加到处理程序地址后面的方式进行传送；POST表示将表单中的数据嵌入到处理程序中进行传送。 4、目标：设置服务器反馈数据的显示方式。 5、编码类型：设置提交服务器处理数据所使用的MIME编码类型。默认application/x-www-form-urlencoded，通常与POST方式协同使用。如果要创建文件上传表单，应选择multipart/form-data。 6、类：设置需要调用的CSS样式。 = 创建和设置表单 添加表单对象 。 在创建表单之后，还需要添加表单对象来收集访问者数据，表单对象包括：文本字段、隐藏域、文本区域、复选框、单选按钮等。 1. 添加文本字段 在表单中添加文字字段后，访问者可以在网页中输入各种信息，常被用作“用户名”、“密码”的输入。在表单中添加文本字段，首先鼠标单击红色虚线框，然后在“插入”工具栏“表单”模块下选择“文本字段”，此时Dreamweaver会显示“输入标签辅助功能属性”窗口，根据自己的需要输入“ID”和“标签”，单击确定，即可完成文本字段的添加。 = 创建和设置表单 添加表单对象 2. 添加文本区域 在表单中添加文本区域有两种方法，一为在“插入”工具栏选择 “文本区域”，二为插入文本字段后，在“属性”面板中“类型”中选择“多行”。插入文本区域后，单击文本区域，在“属性”面板中即出现文本区域的属性，可以对文本区域的属性进行设置。 3. 添加隐藏域 隐藏域是用来收集或发送信息的不可见元素，用户在访问网页时，隐藏域是不可见的。当表单被提交时，隐藏域中的信息就会发送到服务器上。添加隐藏域可以用工具栏选择“插入”—“表单”—“隐藏域”插入，或者在插入工具栏选择“隐藏域”。隐藏域的属性主要包括隐藏域ID和值。 4. 添加复选框 在我们的网页中，网页与访问者的交互除了输入文本信息之外，还可以在给定的选项中进行选择，并提交选择的结果给服务器，实现交互性功能。实现选择功能的表单对象主要有复选框、单选按钮、选择列表、跳转菜单等。 = 创建和设置表单 添加表单对象 5. 添加单选按钮 在网页中，除了复选框之外，我们有的时候还需要用户在多个选项中只选择一个选项提交到服务器，这个时候，我们就需要使用到“单选按钮” 。单选按钮只允许用户选择一个选项，可用于性别等唯一选项信息的选择。插入单选按钮的方法和插入复选框类似，将光标定位到表单之后，在插入工具栏选择 “单选按钮”，输入ID和标签之后就完成了单选按钮的添加。 6. 添加选择（列表/菜单） 在网页中，经常可以看到选择列表 ，访问者通过下拉菜单看到几个选项进行选择。我们可以通