《网页设计与制作 教学课件 ppt 作者 朱金华 第8章 表单》由会员分享，可在线阅读，更多相关《网页设计与制作 教学课件 ppt 作者 朱金华 第8章 表单（45页珍藏版）》请在金锄头文库上搜索。
1、第8章 表单,教学目标,1. 熟悉表单的概念。 2. 掌握表单控件的分类。 3. 掌握不同表单控件的使用方法。,教学内容,8.1 表单的概念 8.2 输入 8.3 多行文本输入框 8.4 选择（列表/菜单） 8.5 字段集与选项组,教学重点和难点,重点：表单控件（输入、多行文本输入框、选择、字段集 与选项组） 的使用。 难点：表单控件（输入、多行文本输入框、选择、字段集 与选项组）属性的合理设置。,导入：,导入：,8.1 表单的概念,表单可以把来自用户的信息提交给服务器，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。 表单有两个重要组
2、成部分：一部分是HTML源代码用于描述表单（例如域、标签和用户在页面上看见的按钮）；另一部分是脚本或应用程序用于处理提交的信息（如CGI脚本、ASP.NET、JSP、PHP等）。不使用处理脚本就不能搜集表单数据。,8.1 表单的概念,表单使用的标记是成对出现的，在首标记和尾标记之间的部分就是一个表单。 基本语法： ,8.1 表单的概念,语法说明： （1）name和id：表单名称，表单命名之后就可以使用脚本语言（如JavaScript或VBScript）对它进行控制。name和id可以同时使用，但他们是有区别的：表单元素（form、input、textarea、select等）与框架元素（ifr
3、ame、frame等）需要用name，否则提交的表单（或框架元素作用的target）不起作用，而其它更多的非表单元素（如body、table、div、span、ul、）则需要使用id，否则CSS或JavaScript也不认识，而且像表单中的单选按钮组（radio）和复选框组（checkbox）一般都是用相同的name值来代表他们是一组，表单接收网页也会自动把他们作为一个数组来处理。Dreamweaver生成的控件代码总是会自动同时产生name和id属性，单个元素的这两个属性的值是相同的，单选按钮组和复选框组中每个成员的name值是相同的，而id值是不同的，因为id必须是唯一的。,8.1 表单的
4、概念,（2）action：动作属性，指定处理表单信息的服务器端应用程序。该程序可以是ASP.NET程序，也可以是CGI、PHP、JSP等脚本。还可以是C、Visual Basic等编写的动态链接库等程序。 （3）method：方法属性，用于指定表单向服务器提交数据的方法，method的值可以为get或post，默认方式是get。由于get方式的安全性低、传送的数据量较小等缺点，所以一般采用post方式（所以新版Dreamweaver产生的表单method值默认就是post）。但get也有提交效率较高的优点，所以仅当请求查询功能时使用get，当请求会改变（数据库）服务器数据或状态时（比如添加、更
5、新、删除数据的操作）则应该使用post。,8.2 输入,是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。 基本语法： 语法说明： 标记的属性见表8-1，一般name和type是必选的两个属性，name属性的值是相应程序中的变量名。,8.2 输入,8.2 输入,8.2.1 单行文本输入框,当type=“text”时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。 基本语法： 语法说明：text文本框是一个只能输入一行文字的输入框。标记除了有两个必选的属性name和type除外，还有常用可选属性：maxlength和value。,8.2.
6、1 单行文本输入框,（1）maxlength：设置单行输入框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等等； （2）value：文本框的默认值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。 （3）如果需要创建一个随着表单提交一同传递的元素，希望用户看到，却又不允许编辑，可以添加readonly属性。,8.2.1 单行文本输入框,8.2.2 提交按钮和重置按钮,用户输入的信息如果不发送到服务器，就没有意义，所以总是要为表单提供提交按钮。 当type=“submit”时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给
7、服务器。 当type=“reset”时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。 基本语法： ,8.2.2 提交按钮和重置按钮,语法说明： （1）提交按钮的name属性是可以默认的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器传送信息。 （2）重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。,8.2.2
8、提交按钮和重置按钮,8.2.3 密码输入框,密码输入框password与单行文本输入框text使用起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。 基本语法： 语法说明：在表单中插入密码框，只要将标记中type属性值设为password就可以插入密码框，maxlength属性同文件输入框text的属性一样。,8.2.3 密码输入框,8.2.4 复选框,当type=“checkbox”时，表示该输入是一个复选框。 基本语法： 语法说明： （1）用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name应取相同的值，
9、使服务器接收页面作为一个字符串数组来处理，不推荐使用不同的值，若有需要的话可以使用不同的id值来区分。,8.2.4 复选框,（2）属性value的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项标签匹配，该属性是必选项； （3）checked属性用于指定该选项在初始时是否被选中。,8.2.5 单选按钮,当type=“radio”时，表示该输入项是一个单选按钮。 基本语法： 语法说明： （1）单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的name都应取相同的值； （2）不同的选项其属性value的值应是
10、不同的； （3）checked属性用于指定该选项在初始时是被选中的。,8.2.5 单选按钮,8.2.6 图像域,为了界面美观，可以用一张图片作为提交或者其他类型的按钮，当type=”image”时，浏览器就会在相应的位置产生一个图像按钮。 基本语法： 语法说明：默认的图像域按钮只有提交表单的功能，如果要改变其用途，则需要将某种行为附加到表单元素中。image类型中的src属性是必需的，它用于设置图像文件的路径。,8.2.6 图像域,8.2.7 文件域,文件选择输入框允许用户在自己的硬盘中浏览文件，并把文件名及其路径作为表单数据上传，主要用在上传程序中。 基本语法： 语法说明： （1）在表单中插
11、入文件选择输入框，只要将标记中type属性值设为file就可以插入文件选择输入框。 （2）enctype属性确保文件采用正确的格式上传。 （3）对于允许文件上传的表单，不能使用get方法。,8.2.7 文件域,8.2.8 隐藏域,如果不想显示某些选项，这些信息与用户选择无关，但服务器应用程序运行时又是需要的，此时就可以把这些选项中type属性的值设为”hidden”。 基本语法： 语法说明： （1）type=hidden时，表示输入项将不在浏览器中显示。 （2）隐藏域可以通过JavaScript代码动态对隐藏域中的信息进行存储访问。,用标记可以定义高度超过一行的文本输入框，标记是成对标记，首标
12、记和尾标记之间的内容就是显示在文本输入框中的初始信息。 基本语法： 语法说明： （1）name：用于指定文本输入框的名字。,8.3 多行文本输入框,8.3 多行文本输入框,（2）rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。 （3）cols：设置多行文本输入框的列数。,8.4 选择（列表/菜单）,在表单中，通过和标记可以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。 基本语法： ,8.4 选择（列表/菜单）,语法说明： （1
13、）标记是成对标记，首标记和尾标记之间的内容就是一个下拉式菜单的内容。标记必须与标记配套使用。标记用于定义列表中的各个选项，标记有name、multiple、size和disabled属性。 name：设定下拉列表名字。 size：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。 multiple：如果加上该属性，表示允许用户从列表中选择多项。使用multiple时size属性的值不能太小，否则浏览器中的显示会不正常。,8.4 选择
14、（列表/菜单）,（2）标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值（当选项被选择时传送给处理程序的信息）。标记是单标记，它必须嵌套在标记中使用。一个列表中有多少个选项，就要有多少个标记与之相对应，选项的具体内容写在每个之后。标记有两个属性：value和selected，它们都是可选项。 value: 用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。 selected :用来指定选项的初始状态，表示该选项在初始时被选中。,8.4 选择（列表/菜单）,思考：将示例中的size值改为1
15、，在IE9、Chrome和Firefox中的显示有何不同？,8.5 字段集与选项组,fieldset元素可将表单内的相关元素分组。标签将表单内容的一部分打包，生成一组相关表单的字段。标签没有必需的或唯一的属性。 当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 标签为元素定义标题。 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。,8.5 字段集与选项组,字段集与选项组 fieldset width: 320px; 请选择你喜欢的高校（可多选） 北京大学
16、 清华大学 ,8.5 字段集与选项组,浙江大学 浙江越秀外国语学院 四川大学 电子科技大学 ,思考：以示例中如果去掉字段集和选项组，提交到服务器的数据是否会受到影响？,表单具有服务器端和客户端之间双向服务和沟通的作用，它提供了包含如文本框、复选框、按钮等的输入界面。当它接受了用户从浏览器上的输入数据或者选择并送至服务器后，根据action属性指定的处理程序，按照method定义的数据提交方法（get和post），将数据准备好提交给位于后端服务器内的CGI程序或服务器端的Script程序（如ASPNET、JSP、PHP）。使用了这种结构的HTML文件将可改变以往用户对HTML文件只能以静态的、固定的形式展示的印象，从而大大增进了网页信息的多样性。,小结,作业,1 思考题 1) 表单是实现动态交互式的可视化界面，在表单开始标记中一般包含哪些属性，其含义分别是什么？ 2) 请查询相关资料，说明HTML 5对表单进行了哪些方面的增强。 2 操作题 1）调试本章源
