网设计与制作 教学 朱金华表单.pptx

《网设计与制作 教学 朱金华表单.pptx》由会员分享，可在线阅读，更多相关《网设计与制作 教学 朱金华表单.pptx（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学内容8.1 表单的概念8.2 输入8.3 多行文本输入框8.4 选择（列表/菜单）8.5 字段集与选项组第1页/共44页教学重点和难点重点：表单控件（输入、多行文本输入框、选择、字段集 与选项组）的使用。难点：表单控件（输入、多行文本输入框、选择、字段集 与选项组）属性的合理设置。第2页/共44页导入：第3页/共44页导入：第4页/共44页第5页/共44页8.1 表单的概念 表单表单可以把来自用户的信息提交给服务器，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。表单有两个重要组成部分表单有两个重要组成部分：一部分是HTML源代码用

2、于描述表单（例如域、标签和用户在页面上看见的按钮）；另一部分是脚本或应用程序用于处理提交的信息（如CGI脚本、ASP.NET、JSP、PHP等）。不使用处理脚本就不能搜集表单数据。第6页/共44页8.1 表单的概念 表单使用的标记是成对出现的，在首标记和尾标记之间的部分就是一个表单。基本语法：.第7页/共44页8.1 表单的概念语法说明：语法说明：（1 1）namename和和idid：表单名称，表单命名之后就可以使用脚本语言：表单名称，表单命名之后就可以使用脚本语言（如（如JavaScriptJavaScript或或VBScriptVBScript）对它进行控制。）对它进行控制。namena

3、me和和idid可以同时可以同时使用，但他们是有区别的：表单元素（使用，但他们是有区别的：表单元素（formform、inputinput、textareatextarea、selectselect等）与框架元素（等）与框架元素（iframeiframe、frameframe等）需要用等）需要用namename，否则提，否则提交的表单（或框架元素作用的交的表单（或框架元素作用的targettarget）不起作用，而其它更多的）不起作用，而其它更多的非表单元素（如非表单元素（如bodybody、tabletable、divdiv、spanspan、ulul、）则需要使）则需要使用用idid，否则

4、，否则CSSCSS或或JavaScriptJavaScript也不认识，而且像表单中的单选按钮也不认识，而且像表单中的单选按钮组（组（radioradio）和复选框组（）和复选框组（checkboxcheckbox）一般都是用相同的）一般都是用相同的namename值来值来代表他们是一组，表单接收网页也会自动把他们作为一个数组来代表他们是一组，表单接收网页也会自动把他们作为一个数组来处理。处理。DreamweaverDreamweaver生成的控件代码总是会自动同时产生生成的控件代码总是会自动同时产生namename和和idid属性，单个元素的这两个属性的值是相同的，单选按钮组和复选属性，单个

5、元素的这两个属性的值是相同的，单选按钮组和复选框组中每个成员的框组中每个成员的namename值是相同的，而值是相同的，而idid值是不同的，因为值是不同的，因为idid必必须是唯一的。须是唯一的。第8页/共44页8.1 表单的概念（2 2）actionaction：动作属性，指定处理表单信息的服务器端应：动作属性，指定处理表单信息的服务器端应用程序。该程序可以是用程序。该程序可以是ASP.NETASP.NET程序，也可以是程序，也可以是CGICGI、PHPPHP、JSPJSP等脚本。还可以是等脚本。还可以是C C、Visual BasicVisual Basic等编写的动态链接库等编写的动态

6、链接库等程序。等程序。（3 3）methodmethod：方法属性，用于指定表单向服务器提交数据：方法属性，用于指定表单向服务器提交数据的方法，的方法，methodmethod的值可以为的值可以为getget或或postpost，默认方式是，默认方式是getget。由。由于于getget方式的安全性低、传送的数据量较小等缺点，所以一方式的安全性低、传送的数据量较小等缺点，所以一般采用般采用postpost方式（所以新版方式（所以新版DreamweaverDreamweaver产生的表单产生的表单methodmethod值默认就是值默认就是postpost）。但）。但getget也有提交效率较高

7、的优点，所以也有提交效率较高的优点，所以仅当请求查询功能时使用仅当请求查询功能时使用getget，当请求会改变（数据库）服，当请求会改变（数据库）服务器数据或状态时（比如添加、更新、删除数据的操作）则务器数据或状态时（比如添加、更新、删除数据的操作）则应该使用应该使用postpost。第9页/共44页8.2 输入 是个是个单标记单标记，它必须嵌套在表单标记中使用，用于，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。定义一个用户的输入项。基本基本语法：语法：语法说明：语法说明：标记的属性见表标记的属性见表8-1，一般，一般name和和type是必选的两是必选的两个属性，个属性，name属

8、性的值是相应程序中的变量名。属性的值是相应程序中的变量名。第10页/共44页8.2 输入第11页/共44页8.2 输入第12页/共44页单行文本输入框 当type=“text”时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。基本语法：基本语法：input name=type=text maxlength=value=语法说明：语法说明：text文本框是一个只能输入一行文字的输入框。标记除了有两个必选的属性name和type除外，还有常用可选属性：maxlength和value。第13页/共44页单行文本输入框（1）maxlength：设置单行输入框可

9、以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等等；（2）value：文本框的默认值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。（3）如果需要创建一个随着表单提交一同传递的元素，希望用户看到，却又不允许编辑，可以添加readonly属性。第14页/共44页单行文本输入框第15页/共44页提交按钮和重置按钮 用户输入的信息如果不发送到服务器，就没有意义，所以总是要为表单提供提交按钮。当type=“submit”时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。当type=“reset”时，产生一个重置按钮，当用

10、户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。基本语法：基本语法：input name=type=submit value=input name=type=reset value=第16页/共44页提交按钮和重置按钮 语法说明：语法说明：（1）提交按钮的name属性是可以默认的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器传送信息。（2）重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定

11、显示在清除按钮上的文字，value的默认值为“重置”。第17页/共44页提交按钮和重置按钮 第18页/共44页密码输入框 密码输入框password与单行文本输入框text使用起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。基本语法：基本语法：语法说明语法说明：在表单中插入密码框，只要将标记中type属性值设为password就可以插入密码框，maxlength属性同文件输入框text的属性一样。第19页/共44页密码输入框第20页/共44页复选框 当type=“checkbox”时，表示该输入是一个复选框。基本语法：基本语法：语法说明：语

12、法说明：（1）用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name应取相同的值，使服务器接收页面作为一个字符串数组来处理，不推荐使用不同的值，若有需要的话可以使用不同的id值来区分。第21页/共44页复选框（2）属性value的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项标签匹配，该属性是必选项；（3）checked属性用于指定该选项在初始时是否被选中。第22页/共44页单选按钮当type=“radio”时，表示该输入项是一个单选按钮。基本语法：基本语法：语法说明：语法说明：（1）单选项必须是唯一的，即用

13、户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的name都应取相同的值；（2）不同的选项其属性value的值应是不同的；（3）checked属性用于指定该选项在初始时是被选中的。第23页/共44页单选按钮第24页/共44页图像域 为了界面美观，可以用一张图片作为提交或者其他类型的按钮，当type=”image”时，浏览器就会在相应的位置产生一个图像按钮。基本语法：基本语法：语法说明语法说明：默认的图像域按钮只有提交表单的功能，如果要改变其用途，则需要将某种行为附加到表单元素中。image类型中的src属性是必需的，它用于设置图像文件的路径。第25页/共44页图像域第26页/共4

14、4页文件域 文件选择输入框允许用户在自己的硬盘中浏览文件，并把文件名及其路径作为表单数据上传，主要用在上传程序中。基本基本语法：语法：语法语法说明：说明：（1）在表单中插入文件选择输入框，只要将标记中type属性值设为file就可以插入文件选择输入框。（2）enctype属性确保文件采用正确的格式上传。（3）对于允许文件上传的表单，不能使用get方法。第27页/共44页文件域第28页/共44页隐藏域 如果不想显示某些选项，这些信息与用户选择无关，但服务器应用程序运行时又是需要的，此时就可以把这些选项中type属性的值设为”hidden”。基本基本语法：语法：语法语法说明：说明：（1）type=

15、hidden时，表示输入项将不在浏览器中显示。（2）隐藏域可以通过JavaScript代码动态对隐藏域中的信息进行存储访问。第29页/共44页 用标记可以定义高度超过一行的文本输入框，标记是成对标记，首标记和尾标记之间的内容就是显示在文本输入框中的初始信息。基本基本语法：语法：语法语法说明：说明：（1）name：用于指定文本输入框的名字。8.3 多行文本输入框第30页/共44页8.3 多行文本输入框（2）rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。（3）cols

16、：设置多行文本输入框的列数。第31页/共44页8.4 选择（列表/菜单）在在表单中，通过表单中，通过和和标记可以在浏览器中设标记可以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。选中一个或多个选项。基本基本语法：语法：第32页/共44页8.4 选择（列表/菜单）语法说明：语法说明：（1）标记是成对标记，首标记和尾标记之间的内容就是一个下拉式菜单的内容。标记必须与标记配套使用。标记用于定义列表中的各个选项，标记有name、multiple、size和disabled属性。name：设定下拉列表名字。si

17、ze：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。multiple：如果加上该属性，表示允许用户从列表中选择多项。使用multiple时size属性的值不能太小，否则浏览器中的显示会不正常。第33页/共44页8.4 选择（列表/菜单）（2）标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值（当选项被选择时传送给处理程序的信息）。标记是单标记，它必须嵌套在标记中使用。一

18、个列表中有多少个选项，就要有多少个标记与之相对应，选项的具体内容写在每个之后。标记有两个属性：value和selected，它们都是可选项。value:用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。selected:用来指定选项的初始状态，表示该选项在初始时被选中。第34页/共44页8.4 选择（列表/菜单）思考：将示例中的size值改为1，在IE9、Chrome和Firefox中的显示有何不同？第35页/共44页8.5 字段集与选项组 fieldset元素可将表单内的相关元素分组。标签将表单内容的一部分打包，生成一组相关表单的字段。标签没有

19、必需的或唯一的属性。当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。标签为元素定义标题。标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。第36页/共44页8.5 字段集与选项组字段集与选项组fieldset width:320px;请选择你喜欢的高校（可多选）北京大学 清华大学 第37页/共44页8.5 字段集与选项组 浙江大学 浙江越秀外国语学院 四川大学 电子科技大学 思考：以示例中如果去掉字段集和选项组，提交到服务器的数据是否会受到影响？第38页/

20、共44页 表单具有服务器端和客户端之间双向服务和沟通的作用，它提供了包含如文本框、复选框、按钮等的输入界面。当它接受了用户从浏览器上的输入数据或者选择并送至服务器后，根据action属性指定的处理程序，按照method定义的数据提交方法（get和post），将数据准备好提交给位于后端服务器内的CGI程序或服务器端的Script程序（如ASPNET、JSP、PHP）。使用了这种结构的HTML文件将可改变以往用户对HTML文件只能以静态的、固定的形式展示的印象，从而大大增进了网页信息的多样性。小结第39页/共44页作业1 1 思考题思考题1)表单是实现动态交互式的可视化界面，在表单开始标记中一般包含哪些属性，其含义分别是什么？2)请查询相关资料，说明HTML 5对表单进行了哪些方面的增强。2 2 操作题操作题1）调试本章源代码。2）根据如图8-1所示的效果图制作网页。3）根据如图8-2所示的效果图制作相关网页。第40页/共44页图8-1 效果图1作业第41页/共44页图8-2 效果图2作业第42页/共44页谢 谢！第43页/共44页感谢您的观看。第44页/共44页