网页设计表单.ppt

1、Company name网页设计与开发网页设计与开发1第92主要内容 理解表单的概念理解表单的概念 掌握表单的属性设置掌握表单的属性设置 掌握表单对象属性的设置掌握表单对象属性的设置 39表单的概念表单的概念l表单是网页中提供的一种表单是网页中提供的一种交互式交互式操作手段，在网页操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。网上注册等都需要使用表单。l用户可以通过提交表单信息与服务器进行动态交流，用户可以通过提交表单信息与服务器进行动态交流，是网站管理员与浏览者之间沟通的桥梁。利用表单是网站管理员与浏览者之间

2、沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。学的、合理的决策。49表单的概念表单的概念 在网页中，最常见的表单形式主要包括文本框、单在网页中，最常见的表单形式主要包括文本框、单选按钮、复选框、下拉菜单、按钮等。选按钮、复选框、下拉菜单、按钮等。文本框下拉菜单按钮59表单的概念表单的概念l表单有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入的信息的服务器端应用程序客户端脚本，如ASP.NET、JSP等。l表单使用的标记是成对出现的，在首标记和尾标记之间的部分就是一个表单。6l 是个单

3、标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。l基本语法基本语法9.1单行文本输入框text7l语法说明语法说明标记主要属性有：type，name，size，value，maxlength等。其中name和type是必选的两个属性；Name:属性的值是相应程序中的变量名。在不同的输入方式下，标记的格式略有不同，其他五种属性因type类型的不同，其含义也不同；type主要有九种类型：text，submit，reset，password，checkbox，radio，image，hidden，file。9.1单行文本输入框text89.1单行文本输入框textl当当type=text

4、时，表示该输入项的输入信息是字时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。本框供用户输入信息。l基本语法：基本语法：9l语法说明语法说明maxlength：设置单行输入框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等等；size：设置单行输入框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过超出的内容；value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。

5、9.1单行文本输入框text10 插入文本框插入文本框 登录名：登录名：9.1单行文本输入框text119.1单行文本输入框text129.2密码输入框密码输入框password l 密码输入框密码输入框password与单行文本输入框与单行文本输入框text使用使用起来非常相似，所不同的只是当用户在输入内容时，起来非常相似，所不同的只是当用户在输入内容时，是用是用“*”来代替显示每个输入的字符，以保证密码来代替显示每个输入的字符，以保证密码的安全性。的安全性。l基本语法：基本语法：13l语法说明语法说明:在表单中插入密码框，只要将在表单中插入密码框，只要将标记中标记中type属性值设为属性值

6、设为password就可以插入密码框，就可以插入密码框，maxlength、size属性同文件输入框属性同文件输入框text的属的属性一样。性一样。9.2密码输入框密码输入框password 14 输入用户名和密码输入用户名和密码 用户名：用户名：密密  码：码：9.2密码输入框密码输入框password 159.2密码输入框密码输入框password 169.3提交按钮submit和重置按钮resetl当当type=submit时，产生一个提交按钮，当用时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。传送给服

7、务器。l当当type=reset时，产生一个重置按钮，当用户时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与入信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。重置按钮经常同时出现。17l提交基本语法：提交基本语法：9.3提交按钮submit和重置按钮reset18l语法说明语法说明提交按钮的name属性是可以默认的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器

8、传送信息；重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。9.3提交按钮submit和重置按钮reset19 注册注册 请输入你的姓名：请输入你的姓名：请输入你的年龄：请输入你的年龄：9.3提交按钮submit和重置按钮reset209.3提交按钮submit和重置按钮reset219.4单选按钮和复选框按钮l单选按钮基本语法：单选按钮基本语法：l语法说明：语法说明：单选项必须是唯一的，即用户只能选中表单中单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所所有单选项中的一项作为输

9、入信息，因此，所有属性的有属性的name都应取相同的值；都应取相同的值；不同的选项其属性不同的选项其属性value的值应是不同的；的值应是不同的；checked属性用于指定该选项在初始时是被选属性用于指定该选项在初始时是被选中的。中的。22 设置设置 每页最多显示邮件数：每页最多显示邮件数：10封封 20封封(推荐推荐)30封封 50封封 100封封 9.4单选按钮和复选框按钮239.4单选按钮和复选框按钮249.4单选按钮和复选框按钮l复选框按钮基本语法：复选框按钮基本语法：l语法说明：语法说明：用户可以同时选中表单中的一个或多个复选项作为输入用户可以同时选中表单中的一个或多个复选项作为输入

10、信息，由于选项可以有多个，属性信息，由于选项可以有多个，属性name应取不同的值；应取不同的值；属性属性value的参数值就是在该选项被选中并提交后，浏的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，览器要传送给服务器的数据。因此，value属性的参数属性的参数值必须与选项内容相同或基本相同，该属性是必选项；值必须与选项内容相同或基本相同，该属性是必选项；checked属性用于指定该选项在初始时是否被选中。属性用于指定该选项在初始时是否被选中。25 选择选择 请选择你喜欢的运动：请选择你喜欢的运动：篮球篮球足球足球 网球网球 9.4单选按钮和复选框按钮269.4单选按钮和

11、复选框按钮279.4单选按钮和复选框按钮l图像按钮基本语法：图像按钮基本语法：l语法说明：语法说明：单击该按钮时，浏览器就会将表单的输入信息单击该按钮时，浏览器就会将表单的输入信息传送给服务器。传送给服务器。image类型中的类型中的src属性是必属性是必需的，它用于设置图像文件的路径。需的，它用于设置图像文件的路径。28表单中图像按钮表单中图像按钮 你最喜欢的运动：你最喜欢的运动：足球足球 篮球篮球 排球排球 9.4单选按钮和复选框按钮299.4单选按钮和复选框按钮309.4单选按钮和复选框按钮l 标记中type属性值button用来插入表单中的标准按钮。标准按钮的“value”属性，可以根

12、据制作者的需要，任意设置属性值。lbutton基本语法：基本语法：319.5多行文本输入框l用用标记可以来定义高度超过一行的标记可以来定义高度超过一行的文本输入框，文本输入框，标记是成对标记，首标记是成对标记，首标记标记和尾标记和尾标记之间之间的内容就是显示在文本输入框中的初始信息。的内容就是显示在文本输入框中的初始信息。标记属性有：标记属性有：name，rows，cols，readonly，disabled。l基本语法：基本语法：textarea name=textarea cols=rows=wrap=“32l语法说明：语法说明：name：用于指定文本输入框的名字。rows：设置多行文本输

13、入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。cols：设置多行文本输入框的列数。disabled：规定第一次加载的时候该文本区不可用。Readonly：将文本区的内容设置为不可修改。9.5多行文本输入框33 请提宝贵意见请提宝贵意见 请提宝贵意见：请提宝贵意见：9.5多行文本输入框349.5多行文本输入框359.6下拉列表框、l在表单中，通过在表单中，通过和和标记可标记可以在浏览器中设计一个下拉式的列表或带有滚动以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一

14、个或多个选条的列表，用户可以在列表中选中一个或多个选项。项。l基本语法：基本语法：369.6下拉列表框、l语法说明：语法说明：标记是成对标记，首标记标记是成对标记，首标记和尾标记和尾标记之间的内容就是一个下拉式菜单的内容。之间的内容就是一个下拉式菜单的内容。标记必须与标记必须与标记配套使用。标记配套使用。标记标记用于定义列表中的各个选项，用于定义列表中的各个选项，标记有标记有namename，sizesize，multiplemultiple三个属性。三个属性。namename：设定下拉列表名字。：设定下拉列表名字。sizesize：可选项，用于改变下拉框的大小。：可选项，用于改变下拉框的大小

15、。sizesize属性的值是数属性的值是数字，表示显示在列表中选项的数目，当字，表示显示在列表中选项的数目，当sizesize属性的值小于列属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，用户可以使用滚动条来查看所有的选项，sizesize默认值为默认值为1 1。multiplemultiple：如果加上该属性，表示允许用户从列表中选择多：如果加上该属性，表示允许用户从列表中选择多项。项。379.6下拉列表框、l语法说明语法说明 标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值

16、，列表中每个选项有一个显示的文本和一个value值(当选项被选择时传送给处理程序的信息)。标记必须嵌套在标记中使用。一个列表中有多少个选项，就要有多少个标记与之相对应，选项的具体内容写在每个之后。标记有两个属性：value和selected，它们都是可选项。value:用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。selected:用来指定选项的初始状态，表示该选项在初始时被选中。38 你最喜欢的运动：你最喜欢的运动：足球足球 篮球篮球 排球排球 音乐音乐 美术美术 体育体育 9.6下拉列表框、399.6下拉列表框、409.7上传文件表单fi

17、lel基本语法：基本语法：l语法说明：语法说明：l在表单中插入文件选择输入框，只要将在表单中插入文件选择输入框，只要将标记中标记中type属性值设为属性值设为file就可以插入文件选择就可以插入文件选择输入框。输入框。419.7上传文件表单file42表单中文件选择输入框表单中文件选择输入框 请选择文件请选择文件 9.7上传文件表单file439.7上传文件表单file44 用户通过用户通过submit按钮来提交表单，将收集按钮来提交表单，将收集的信息发送到的信息发送到Web服务器上，这一过程通过表单服务器上，这一过程通过表单的的action属性指定所收集的信息发送到哪里。属性指定所收集的信息

18、发送到哪里。l表单表单Form基本语法基本语法9.8处理表单45l语法说明语法说明name：给定表单名称，表单命名之后就可以用脚本语言(如JavaScript或VBScript)对它进行控制。action:指定处理表单信息的服务器端应用程序的路径。一般情况下，action属性主要用来处理用户通过表单提交的信息，如保存、回复等。表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，如发送E-mail等。method:method属性用于指定表单处理表单数据方法，method的值可以为get或是po

19、st，默认方式是get。它决定了表单中已收集数据是什么样的方法发送到服务器的。9.8处理表单46 表单标签表单标签 发送邮件发送邮件姓名：姓名：邮件：邮件：内容：内容：9.8处理表单479.8处理表单489.9定义域集合定义域集合 如果表单内包含多个控件，可以通过如果表单内包含多个控件，可以通过 标签将相关主题的控件或标签组合在一起（定义域集合），标签将相关主题的控件或标签组合在一起（定义域集合），这样使网页中的表单分布更合理，结构更清晰，并增加网这样使网页中的表单分布更合理，结构更清晰，并增加网页的易读性，同时也有利于页的易读性，同时也有利于Tab键在元素之间移动。键在元素之间移动。请登录请

20、登录 用户名用户名:密码密码:499.9定义域集合定义域集合l语法说明语法说明可将表单内的相关元素分组。标签将表单内容的一部分打包，生成一组相关表单的字段。标签为设置标题。当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界或者可创建一个子表单来处理这些元素。509.9定义域集合定义域集合 定义域集合定义域集合 请登录请登录 用户名用户名:密码密码:519.9定义域集合定义域集合529.10使用Tab键与快捷键l基本语法：基本语法：l语法说明：语法说明：l通过定义通过定义tabindex属性值，可以确定使用属性值，可以确定使用Tab键在表单的各个组件之间移动的顺序。

21、键在表单的各个组件之间移动的顺序。l通过定义通过定义accesskey属性值，给表单中的元素指属性值，给表单中的元素指定一个快捷方式。定一个快捷方式。539.11小实例表单应用表单应用 会员注册会员注册 用户名：用户名： 密码：密码：549.11小实例 确认密码：确认密码： 性别：性别：男男 女女 爱好：爱好：体育体育 音乐音乐 文学文学 其它其它 559.11小实例 特长：特长： 联系电话：联系电话： 569.11小实例57小实例l在做表单前首先要规划好表单所包含的对象，例如在做表单前首先要规划好表单所包含的对象，例如用户注册表单包含：用户名称、真实姓名、出生时用户注册表单包含：用户名称、真实姓名、出生时间、性别、登陆密码、确认密码、间、性别、登陆密码、确认密码、E-MAIL、电话、电话、QQ、个人简介等信息。、个人简介等信息。l在表单布局设计时，考虑到用户完成表单填写的时在表单布局设计时，考虑到用户完成表单填写的时间应当尽可能的短，标签、输入框均垂直对齐是很间应当尽可能的短，标签、输入框均垂直对齐是很好的布局方式，因为一致的对齐减少了眼睛移动和好的布局方式，因为一致的对齐减少了眼睛移动和处理时间。处理时间。Company name网页设计与开发网页设计与开发58