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

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

1、网设计网设计(shj)与制作与制作 教学教学 朱金华朱金华 表单表单第一页，共44页。教学内容8.1 表单的概念8.2 输入8.3 多行文本(wnbn)输入框8.4 选择（列表/菜单）8.5 字段集与选项组第1页/共44页第二页，共44页。教学(jio xu)重点和难点重点：表单控件（输入、多行文本输入框、选择(xunz)、字段集 与选项组）的使用。难点：表单控件（输入、多行文本输入框、选择(xunz)、字段集 与选项组）属性的合理设置。第2页/共44页第三页，共44页。导入：第3页/共44页第四页，共44页。导入：第4页/共44页第五页，共44页。第5页/共44页第六页，共44页。8.1 表

2、单的概念(ginin)表单可以把来自用户的信息提交给服务器，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集(shuj)、分析用户的反馈意见，做出科学的、合理的决策。表单有两个重要组成部分：一部分是HTML源代码用于描述表单（例如域、标签和用户在页面上看见的按钮）；另一部分是脚本或应用程序用于处理提交的信息（如CGI脚本、ASP.NET、JSP、PHP等）。不使用处理脚本就不能搜集表单数据。第6页/共44页第七页，共44页。8.1 表单的概念(ginin)表单使用的标记是成对出现(chxin)的，在首标记和尾标记之间的部分就是一个表单。基本语法：.第7页/共44页第八页，共44页。

3、8.1 表单的概念(ginin)语法说明：语法说明：（1 1）namename和和idid：表单名称，表单命名：表单名称，表单命名(mng mng)(mng mng)之后就可以使用脚本语之后就可以使用脚本语言（如言（如JavaScriptJavaScript或或VBScriptVBScript）对它进行控制。）对它进行控制。namename和和idid可以同时使用，可以同时使用，但他们是有区别的：表单元素（但他们是有区别的：表单元素（formform、inputinput、textareatextarea、selectselect等）与等）与框架元素（框架元素（iframeiframe、fra

4、meframe等）需要用等）需要用namename，否则提交的表单（或框架元，否则提交的表单（或框架元素作用的素作用的targettarget）不起作用，而其它更多的非表单元素（如）不起作用，而其它更多的非表单元素（如bodybody、tabletable、divdiv、spanspan、ulul、）则需要使用）则需要使用idid，否则，否则CSSCSS或或JavaScriptJavaScript也不认识，也不认识，而且像表单中的单选按钮组（而且像表单中的单选按钮组（radioradio）和复选框组（）和复选框组（checkboxcheckbox）一般都是）一般都是用相同的用相同的namena

5、me值来代表他们是一组，表单接收网页也会自动把他们作为一值来代表他们是一组，表单接收网页也会自动把他们作为一个数组来处理。个数组来处理。DreamweaverDreamweaver生成的控件代码总是会自动同时产生生成的控件代码总是会自动同时产生namename和和idid属性，单个元素的这两个属性的值是相同的，单选按钮组和复选框组中属性，单个元素的这两个属性的值是相同的，单选按钮组和复选框组中每个成员的每个成员的namename值是相同的，而值是相同的，而idid值是不同的，因为值是不同的，因为idid必须是唯一的。必须是唯一的。第8页/共44页第九页，共44页。8.1 表单的概念(ginin

6、)（2 2）actionaction：动作属性，指定：动作属性，指定(zhdng)(zhdng)处理表单信息的服务器端应用处理表单信息的服务器端应用程序。该程序可以是程序。该程序可以是ASP.NETASP.NET程序，也可以是程序，也可以是CGICGI、PHPPHP、JSPJSP等脚本。还等脚本。还可以是可以是C C、Visual BasicVisual Basic等编写的动态链接库等程序。等编写的动态链接库等程序。（3 3）methodmethod：方法属性，用于指定：方法属性，用于指定(zhdng)(zhdng)表单向服务器提交数据的表单向服务器提交数据的方法，方法，methodmetho

7、d的值可以为的值可以为getget或或postpost，默认方式是，默认方式是getget。由于。由于getget方式的方式的安全性低、传送的数据量较小等缺点，所以一般采用安全性低、传送的数据量较小等缺点，所以一般采用postpost方式（所以新方式（所以新版版DreamweaverDreamweaver产生的表单产生的表单methodmethod值默认就是值默认就是postpost）。但）。但getget也有提交效也有提交效率较高的优点，所以仅当请求查询功能时使用率较高的优点，所以仅当请求查询功能时使用getget，当请求会改变（数，当请求会改变（数据库）服务器数据或状态时（比如添加、更新、

8、删除数据的操作）则应据库）服务器数据或状态时（比如添加、更新、删除数据的操作）则应该使用该使用postpost。第9页/共44页第十页，共44页。8.2 输入(shr)是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。的输入项。基本语法基本语法(yf)：语法语法(yf)说明：说明：标记的属性见表标记的属性见表8-1，一般，一般name和和type是必选的两个属性，是必选的两个属性，name属性的值是相应程序中的变量名。属性的值是相应程序中的变量名。第10页/共44页第十一页，共44页。8.2 输入(shr)第11页/共44

9、页第十二页，共44页。8.2 输入(shr)第12页/共44页第十三页，共44页。单行(dn xn)文本输入框 当type=“text”时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。基本语法：语法说明：text文本框是一个只能输入一行文字的输入框。标记除了有两个必选的属性name和type除外(chwi)，还有常用可选属性：maxlength和value。第13页/共44页第十四页，共44页。单行(dn xn)文本输入框（1）maxlength：设置单行输入框可以输入的最大字符数，例如限制(xinzh)邮政编码为6个数字、密码最多为10个字符等等；

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

11、用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。基本语法：第16页/共44页第十七页，共44页。提交(tjio)按钮和重置按钮 语法说明：语法说明：（1 1）提交按钮的）提交按钮的namename属性是可以默认的。除属性是可以默认的。除namename属性外，它属性外，它还有一个可选的属性还有一个可选的属性valuevalue，用于指定显示在提交按钮上的文，用于指定显示在提交按钮上的文字，字，valuevalue属性的默认值是属性的默认值是“提交提交”。在一个表单中必须有提。在一个表单中必须有提交按钮，否则交按钮，否则(fuz)(f

12、uz)将无法向服务器传送信息。将无法向服务器传送信息。（2 2）重置按钮的）重置按钮的namename属性也是可以默认的。属性也是可以默认的。valuevalue属性与属性与submitsubmit类似，用于指定显示在清除按钮上的文字，类似，用于指定显示在清除按钮上的文字，valuevalue的默的默认值为认值为“重置重置”。第17页/共44页第十八页，共44页。提交(tjio)按钮和重置按钮 第18页/共44页第十九页，共44页。密码(m m)输入框 密码输入框密码输入框password与单行文本输入框与单行文本输入框text使用起来非常相似使用起来非常相似(xin s)，所不同的只是当用户

13、在输入内容时，是用，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字来代替显示每个输入的字符，以保证密码的安全性。符，以保证密码的安全性。基本语法：基本语法：语法说明：在表单中插入密码框，只要将语法说明：在表单中插入密码框，只要将标记中标记中type属性值设为属性值设为password就可以插入密码框，就可以插入密码框，maxlength属性同文件输入框属性同文件输入框text的属性一样。的属性一样。第19页/共44页第二十页，共44页。密码(m m)输入框第20页/共44页第二十一页，共44页。复选框 当type=“checkbox”时，表示该输入是一个复选框。基本语法：语法

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

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

16、素中。image类型中的src属性是必需的，它用于设置图像文件的路径。第25页/共44页第二十六页，共44页。图像(t xin)域第26页/共44页第二十七页，共44页。文件(wnjin)域 文件选择输入框允许用户在自己的硬盘中浏览文件，并把文件名及其路径(ljng)作为表单数据上传，主要用在上传程序中。基本语法：语法说明：（1）在表单中插入文件选择输入框，只要将标记中type属性值设为file就可以插入文件选择输入框。（2）enctype属性确保文件采用正确的格式上传。（3）对于允许文件上传的表单，不能使用get方法。第27页/共44页第二十八页，共44页。文件(wnjin)域第28页/共4

17、4页第二十九页，共44页。隐藏(yncng)域 如果不想显示某些选项，这些信息与用户选择无关，但服务器应用程序运行时又是需要的，此时就可以把这些选项中type属性(shxng)的值设为”hidden”。基本语法：语法说明：（1）type=hidden时，表示输入项将不在浏览器中显示。（2）隐藏域可以通过JavaScript代码动态对隐藏域中的信息进行存储访问。第29页/共44页第三十页，共44页。用标记可以(ky)定义高度超过一行的文本输入框，标记是成对标记，首标记和尾标记之间的内容就是显示在文本输入框中的初始信息。基本语法：语法说明：（1）name：用于指定文本输入框的名字。8.3 多行文本

18、(wnbn)输入框第30页/共44页第三十一页，共44页。8.3 多行文本(wnbn)输入框（2）rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是(dnsh)，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。（3）cols：设置多行文本输入框的列数。第31页/共44页第三十二页，共44页。8.4 选择(xunz)（列表/菜单）在表单中，通过在表单中，通过和和标记可以在浏览器中设标记可以在浏览器中设计一个下拉式的列表计一个下拉式的列表(li bio)或带有滚动条的列表或带有滚动条的列表(li bio)，用户可以在列表

19、，用户可以在列表(li bio)中选中一个或多个选项。中选中一个或多个选项。基本语法：基本语法：第32页/共44页第三十三页，共44页。8.4 选择（列表(li bio)/菜单）语法说明：语法说明：（1 1）标记是成对标记，首标记标记是成对标记，首标记和尾标记和尾标记之间的内容之间的内容就是一个下拉式菜单的内容。就是一个下拉式菜单的内容。标记必须标记必须(bx)(bx)与与标记配套使用。标记配套使用。标记用于定义列表中的各个选项，标记用于定义列表中的各个选项，标记有标记有namename、multiplemultiple、sizesize和和disableddisabled属性。属性。name

20、 name：设定下拉列表名字。：设定下拉列表名字。size size：可选项，用于改变下拉框的大小。：可选项，用于改变下拉框的大小。sizesize属性的值是数字，表示显示在列属性的值是数字，表示显示在列表中选项的数目，当表中选项的数目，当sizesize属性的值小于列表框中的列表项数目时，浏览器会为该属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，sizesize默认值为默认值为1 1。multiple multiple：如果加上该属性，表示允许用户从列表中选择多项。使用：如果加上该属

21、性，表示允许用户从列表中选择多项。使用multiplemultiple时时sizesize属性的值不能太小，否则浏览器中的显示会不正常。属性的值不能太小，否则浏览器中的显示会不正常。第33页/共44页第三十四页，共44页。8.4 选择(xunz)（列表/菜单）（2）标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值（当选项被选择时传送给处理程序的信息）。标记是单标记，它必须嵌套在标记中使用。一个列表中有多少个选项，就要有多少个标记与之相对应，选项的具体内容写在每个之后(zhhu)。标记有两个属性：value和selected，它们都是

22、可选项。value:用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。selected:用来指定选项的初始状态，表示该选项在初始时被选中。第34页/共44页第三十五页，共44页。8.4 选择(xunz)（列表/菜单）思考：将示例(shl)中的size值改为1，在IE9、Chrome和Firefox中的显示有何不同？第35页/共44页第三十六页，共44页。8.5 字段集与选项组 fieldset元素可将表单内的相关元素分组。标签将表单内容的一部分打包，生成一组相关表单的字段。标签没有必需的或唯一的属性。当一组表单元素放到 标签内时，浏览器会以特殊方

23、式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些(zhxi)元素。标签为元素定义标题。标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。第36页/共44页第三十七页，共44页。8.5 字段集与选项组字段集与选项组fieldset width:320px;请选择(xunz)你喜欢的高校（可多选）北京大学 清华大学 第37页/共44页第三十八页，共44页。8.5 字段集与选项组 浙江大学 浙江越秀外国语学院 四川大学(s chun d xu)电子科技大学 思考(sko)：以示例中如果去掉字段集和选项组，提交到服

24、务器的数据是否会受到影响？第38页/共44页第三十九页，共44页。表单具有服务器端和客户端之间双向服务和沟通的作用，它提供了包含如文本框、复选框、按钮等的输入界面。当它接受了用户从浏览器上的输入数据或者选择并送至服务器后，根据action属性指定(zhdng)的处理程序，按照method定义的数据提交方法（get和post），将数据准备好提交给位于后端服务器内的CGI程序或服务器端的Script程序（如ASPNET、JSP、PHP）。使用了这种结构的HTML文件将可改变以往用户对HTML文件只能以静态的、固定的形式展示的印象，从而大大增进了网页信息的多样性。小结(xioji)第39页/共44页

25、第四十页，共44页。作业(zuy)1 1 思考题思考题1)1)表单是实现动态交互式的可视化界面，在表单开始标记中一般包含表单是实现动态交互式的可视化界面，在表单开始标记中一般包含(bohn)(bohn)哪些属性，其含义分别是什么？哪些属性，其含义分别是什么？2)2)请查询相关资料，说明请查询相关资料，说明HTML 5HTML 5对表单进行了哪些方面的增强。对表单进行了哪些方面的增强。2 2 操作题操作题1 1）调试本章源代码。）调试本章源代码。2 2）根据如图）根据如图8-18-1所示的效果图制作网页。所示的效果图制作网页。3 3）根据如图）根据如图8-28-2所示的效果图制作相关网页。所示的效果图制作相关网页。第40页/共44页第四十一页，共44页。图8-1 效果图1作业(zuy)第41页/共44页第四十二页，共44页。图8-2 效果图2作业(zuy)第42页/共44页第四十三页，共44页。谢 谢！第43页/共44页第四十四页，共44页。