1、Company name 网页设计与开发 第9章 表单 清华大学出版社清华大学出版社 主要内容 ? 理解表单的概念理解表单的概念 ? 掌握表单的属性设置 ? 掌握表单对象属性的设置 9表单的概念表单的概念 ?表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。 ?用户可以通过提交表单信息与服务器进行动态交流，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。 9表单的概念表单的概念 在网页中，最常见的表单形式主要包括文本框、单选按钮、复选框、下拉菜单、按钮等。 文本框 下拉菜单
2、 按钮 9表单的概念表单的概念 ?表单有两个重要组成部分：一是描述表单的 HTML源代码；二是用于处理用户在表单域中输入的信息的服务器端应用程序客户端脚本，如 ASP.NET 、JSP等。 ?表单使用的标记是成对出现的，在首标记和尾标记之间的部分就是一个表单。 ? 是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。 ?基本语法 9. 1单行文本输入框text ?语法说明 标记主要属性有：type，name，size，value，maxlength等。其中name和type是必选的两个属性； Name:属性的值是相应程序中的变量名。 在不同的输入方式下，标记的格式略有不同，其他五
3、种属性因type类型的不同，其含义也不同； type主要有九种类型：text，submit，reset，password，checkbox，radio，image，hidden，file。 9. 1单行文本输入框text 9. 1单行文本输入框text ?当当type=text 时，表示该输入项的输入信息是字时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。本框供用户输入信息。 ?基本语法：基本语法： ?语法说明语法说明 maxlength：设置单行输入框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最
4、多为10个字符等等； size：设置单行输入框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过超出的内容； value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。 9. 1单行文本输入框text 插入文本框 登录名： 9. 1单行文本输入框text 9. 1单行文本输入框text 9.2密码输入框password ? 密码输入框password与单行文本输入框 text 使用起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安
5、全性。 ?基本语法： ?语法说明: 在表单中插入密码框，只要将 标记中type 属性值设为password就可以插入密码框，maxlength、size 属性同文件输入框 text 的属性一样。 9.2密码输入框password 输入用户名和密码 用户名： 密 码： 9.2密码输入框password 9.2密码输入框password 9.3提交按钮submit和重置按钮reset ?当type=submit时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。 ?当type=reset时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入
6、信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。 ?提交基本语法： 9.3提交按钮submit和重置按钮reset ?语法说明语法说明 提交按钮的name属性是可以默认的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器传送信息； 重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。 9.3提交按钮submit和重置按钮reset 注册 请输入你的姓名： 请输入你的年龄： ?椼灮瑵琠灹?
7、獜扵業屴瘠污敵尽 提交 ?椼灮瑵琠灹椼灮瑵琠灹?牜獥瑥牜獥瑥?慶畬慶畬?重置 9.3提交按钮submit和重置按钮reset 9.3提交按钮submit和重置按钮reset 9. 4单选按钮和复选框按钮 ?单选按钮基本语法： ?语法说明： 单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的name 都应取相同的值； 不同的选项其属性 value 的值应是不同的； checked 属性用于指定该选项在初始时是被选中的。 设置 每页最多显示邮件数： 10封 20封(推荐) 30封 50封 100封 ?湩異湩異?祴数尽畳浢瑩祴数尽畳浢瑩?慶畬慶畬?提交 9. 4
8、单选按钮和复选框按钮 9. 4单选按钮和复选框按钮 9. 4单选按钮和复选框按钮 ?复选框按钮基本语法：复选框按钮基本语法： ?语法说明：语法说明： 用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name 应取不同的值； 属性value 的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，value 属性的参数值必须与选项内容相同或基本相同，该属性是必选项； checked 属性用于指定该选项在初始时是否被选中。 选择 请选择你喜欢的运动： 篮球 足球 网球 椼灮瑵琠灹?獜扵業屴瘠污敵尽提交 9. 4单选按钮和复选框按钮 9. 4单选按钮和复选
9、框按钮 9. 4单选按钮和复选框按钮 ?图像按钮基本语法： ?语法说明： 单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image 类型中的src 属性是必需的，它用于设置图像文件的路径。 表单中图像按钮表单中图像按钮 你最喜欢的运动：你最喜欢的运动： 足球足球 篮球篮球 排球排球 椼灮瑵琠灹?楜慭敧?牳?甥?挱?灪屧瘠污敵尽提交提交 9. 4单选按钮和复选框按钮 9. 4单选按钮和复选框按钮 9. 4单选按钮和复选框按钮 ? 标记中type属性值button用来插入表单中的标准按钮。 标准按钮的“value”属性，可以根据制作者的需要，任意设置属性值。 ?button基本语法：基本语
10、法： 9.5多行文本输入框 ?用用 标记可以来定义高度超过一行的文本输入框， 标记是成对标记，首标记 和尾标记之间的内容就是显示在文本输入框中的初始信息。 标记属性有：name ，rows ，cols ，readonly ，disabled 。 ?基本语法： textarea name= extarea cols= rows= wrap=“ ?语法说明： name：用于指定文本输入框的名字。 rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。 cols：设置多行文本输
11、入框的列数。 disabled：规定第一次加载的时候该文本区不可用。 Readonly：将文本区的内容设置为不可修改。 9.5多行文本输入框 请提宝贵意见请提宝贵意见 请提宝贵意见： 椼灮瑵琠灹?獜扵業屴瘠污敵尽 提交 椼灮瑵琠灹?牜獥瑥?慶畬?重写 9.5多行文本输入框 9.5多行文本输入框 9.6下拉列表框、 ?在表单中，通过在表单中，通过 和和 标记可标记可以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选条的列表，用户可以在列表中选中一个或多个选项。项。 ?基本语法： 9.6下拉列表框、 ?语法说明：语法说明： 标记是成对标记，首标记 和尾标记 之间的
12、内容就是一个下拉式菜单的内容。标记必须与标记配套使用。 标记用于定义列表中的各个选项， 标记有name，size，multiple三个属性。 name：设定下拉列表名字。 size：可选项，用于改变下拉框的大小。 size属性的值是数字，表示显示在列表中选项的数目，当 size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项， size默认值为1。 multiple：如果加上该属性，表示允许用户从列表中选择多项。 9.6下拉列表框、 ?语法说明 标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个
13、value值 (当选项被选择时传送给处理程序的信息 )。标记必须嵌套在 标记中使用。一个列表中有多少个选项，就要有多少个 标记与之相对应，选项的具体内容写在每个 之后。标记有两个属性：value和selected，它们都是可选项。 value: 用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。 selected :用来指定选项的初始状态，表示该选项在初始时被选中。 你最喜欢的运动： 足球 篮球 排球 音乐 美术 体育 ?椼灮瑵琠灹?獜扵業屴瘠污敵尽 提交 9.6下拉列表框、 9.6下拉列表框、 9. 7上传文件表单file ?基本语法：基本语法
14、： ?语法说明：语法说明： ?在表单中插入文件选择输入框，只要将 标记中type 属性值设为file 就可以插入文件选择输入框。 9. 7上传文件表单file 表单中文件选择输入框 请选择文件 ?椼灮瑵琠灹椼灮瑵琠灹?獜扵業屴瘠污敵尽獜扵業屴瘠污敵尽上传 name=Send 9. 7上传文件表单file 9. 7上传文件表单file 用户通过submit按钮来提交表单，将收集的信息发送到Web服务器上，这一过程通过表单的action属性指定所收集的信息发送到哪里。 ?表单Form基本语法 9. 8处理表单 ?语法说明 name：给定表单名称，表单命名之后就可以用脚本语言(如JavaScript
15、或VBScript)对它进行控制。 action:指定处理表单信息的服务器端应用程序的路径。一般情况下，action属性主要用来处理用户通过表单提交的信息，如保存、回复等。表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，如发送E-mail等。 method :method属性用于指定表单处理表单数据方法，method的值可以为get或是post，默认方式是get。它决定了表单中已收集数据是什么样的方法发送到服务器的。 9. 8处理表单 表单标签表单标签 发送邮件发送邮件 姓名：椼灮瑵椼灮瑵
16、?慮敭尽慮敭慮敭尽慮敭?琠灹琠灹?瑜硥屴猠穩瑜硥屴猠穩?尰瘠污敵尽尰瘠污敵尽姓名 邮件：椼灮瑵椼灮瑵?慮敭尽慭汩慮敭尽慭汩?琠灹琠灹?瑜硥屴猠穩瑜硥屴猠穩?尰瘠污敵尽尰瘠污敵尽邮件邮件 内容：椼灮瑵椼灮瑵?慮敭尽潣浭湥屴慮敭尽潣浭湥屴?祴数尽整瑸祴数尽整瑸?楳敺尽楳敺尽?慶畬慶畬?内容 ?椼灮瑵椼灮瑵?祴数尽畳浢瑩祴数尽畳浢瑩?慶畬慶畬?发送 9. 8处理表单 9. 8处理表单 9.9定义域集合 如果表单内包含多个控件，可以通过 标签将相关主题的控件或标签组合在一起（定义域集合），这样使网页中的表单分布更合理，结构更清晰，并增加网页的易读性，同时也有利于Tab 键在元素之间移动。 请登录 用户
17、名: 密码: 9.9定义域集合 ?语法说明 可将表单内的相关元素分组。 标签将表单内容的一部分打包，生成一组相关表单的字段。 标签为设置标题。 当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界或者可创建一个子表单来处理这些元素。 9.9定义域集合 定义域集合 请登录 用户名: 密码: 9.9定义域集合 9. 10使用Tab键与快捷键 ?基本语法：基本语法： ?语法说明：语法说明： ?通过定义tabindex 属性值，可以确定使用 Tab键在表单的各个组件之间移动的顺序。 ?通过定义accesskey 属性值，给表单中的元素指定一个快捷方式。 9.11小实例 表单
18、应用表单应用 会员注册 用户名： 密码： 9.11小实例 确认密码： 性别： 男 女 爱好： 体育 音乐 文学 其它 9.11小实例 特长： 联系电话： ?琼?椼灮瑵琠灹?獜扵業屴渠浡?卜扵業屴瘠污敵尽提交 ?琼?椼灮瑵琠灹?牜獥瑥?慮敭尽畓浢瑩尲瘠污敵尽重置 9.11小实例 小实例 ?在做表单前首先要规划好表单所包含的对象，例如用户注册表单包含：用户名称、真实姓名、出生时间、性别、登陆密码、确认密码、 E-MAIL 、电话、QQ、个人简介等信息。 ?在表单布局设计时，考虑到用户完成表单填写的时间应当尽可能的短，标签、输入框均垂直对齐是很好的布局方式，因为一致的对齐减少了眼睛移动和处理时间。 Company name 网页设计与开发网页设计与开发
