HTML网页设计教程 第8章 表单.ppt

《HTML网页设计教程 第8章 表单.ppt》由会员分享，可在线阅读，更多相关《HTML网页设计教程 第8章 表单.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Company nameWEB编程基础编程基础第8章 表单清华大学出版社清华大学出版社主要内容理解表单的概念理解表单的概念 掌握表单的属性设置掌握表单的属性设置掌握表单对象属性的设置掌握表单对象属性的设置 8.1表单的概念表单的概念l表单可以把来自用户的信息提交给服务器，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。l表单有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入的信息的服务器端应用程序客户端脚本，如ASP.NET、JSP等。l表单使用的标记是成对出现的，在首标记和尾标记之间的部分就是一个表单。l

2、表单表单Form基本语法基本语法.l表单表单Form语法说明语法说明lname：给定表单名称，表单命名之后就可以用脚本语言(如JavaScript或VBScript)对它进行控制。laction:指定处理表单信息的服务器端应用程序。lmethod:method属性用于指定表单处理表单数据方法，method的值可以为get或是post，默认方式是get。8.2 输入l 是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。l基本语法基本语法l语法说明语法说明l标记主要有六个属性，type，name，size，value，maxlength，check。其中name和type是必选的两

3、个属性；lName:属性的值是相应程序中的变量名。l在不同的输入方式下，标记的格式略有不同，其他五种属性因type类型的不同，其含义也不同；ltype主要有九种类型：text，submit，reset，password，checkbox，radio，image，hidden，file。8.2.1单行文本输入框textl当当type=text时，表示该输入项的输入信息是字时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。框供用户输入信息。l基本语法：基本语法：l语法说明语法说明lmaxlength：设置单行输入

4、框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等等；lsize：设置单行输入框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过超出的内容；lvalue：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。8.2.1单行文本输入框text 输入用户姓名输入用户姓名 请输入你的姓名：请输入你的姓名：8.2.1单行文本输入框text8.2.1单行文本输入框text8.2.2提交按钮submit和重置按钮resetl当当type=submit时，产生一个提交按钮

5、，当用时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。送给服务器。l当当type=reset时，产生一个重置按钮，当用户时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与重置信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。按钮经常同时出现。l基本语法：基本语法：8.2.2提交按钮submit和重置按钮resetl语法说明语法说明l提交按钮的提交按钮的name属性是可以默认的。除属性是可以默认的。除n

6、ame属性外，它还有一个可选的属性属性外，它还有一个可选的属性value，用于指，用于指定显示在提交按钮上的文字，定显示在提交按钮上的文字，value属性的默认属性的默认值是值是“提交提交”。在一个表单中必须有提交按钮，。在一个表单中必须有提交按钮，否则将无法向服务器传送信息；否则将无法向服务器传送信息；l重置按钮的重置按钮的name属性也是可以默认的。属性也是可以默认的。value属性与属性与submit类似，用于指定显示在清除按钮类似，用于指定显示在清除按钮上的文字，上的文字，value的默认值为的默认值为“重置重置”。8.2.2提交按钮submit和重置按钮reset 注册注册 请输入你

7、的姓名：请输入你的姓名：请输入你的年龄：请输入你的年龄：8.2.2提交按钮submit和重置按钮reset8.2.2提交按钮submit和重置按钮reset8.2.3密码输入框密码输入框password l 密码输入框密码输入框password与单行文本输入框与单行文本输入框text使用使用起来非常相似，所不同的只是当用户在输入内容时，起来非常相似，所不同的只是当用户在输入内容时，是用是用“*”来代替显示每个输入的字符，以保证密码的来代替显示每个输入的字符，以保证密码的安全性。安全性。l基本语法：基本语法：l语法说明语法说明:在表单中插入密码框，只要将在表单中插入密码框，只要将标记中标记中ty

8、pe属性值设为属性值设为password就可以插入密码框，就可以插入密码框，maxlength、size属性同文件输入框属性同文件输入框text的属的属性一样。性一样。8.2.3密码输入框密码输入框password 输入用户名和密码输入用户名和密码 用户名：用户名：密密  码：码：8.2.3密码输入框密码输入框password 8.2.3密码输入框密码输入框password 8.2.4复选框checkboxl基本语法：基本语法：l语法说明：语法说明：l用户可以同时选中表单中的一个或多个复选项作为输入信用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性息，由于

9、选项可以有多个，属性name应取不同的值；应取不同的值；l属性属性value的参数值就是在该选项被选中并提交后，浏览的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，器要传送给服务器的数据。因此，value属性的参数值必属性的参数值必须与选项内容相同或基本相同，该属性是必选项；须与选项内容相同或基本相同，该属性是必选项；lchecked属性用于指定该选项在初始时是否被选中。属性用于指定该选项在初始时是否被选中。选择选择 请选择你喜欢的运动：请选择你喜欢的运动：篮球篮球 足球足球 网球网球 8.2.4复选框checkbox8.2.4复选框checkbox8.2.5单选框rad

10、iol基本语法：基本语法：l语法说明：语法说明：l单选项必须是唯一的，即用户只能选中表单中所有单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的单选项中的一项作为输入信息，因此，所有属性的name都应取相同的值；都应取相同的值；l不同的选项其属性不同的选项其属性value的值应是不同的；的值应是不同的；lchecked属性用于指定该选项在初始时是被选中属性用于指定该选项在初始时是被选中的。的。设置设置 每页最多显示邮件数：每页最多显示邮件数：10封封 20封封(推荐推荐)30封封 50封封 100封封 8.2.5单选框radio8.2.5单选框radio8

11、.2.6图像按钮imagel基本语法：基本语法：l语法说明：语法说明：l单击该按钮时，浏览器就会将表单的输入信息传送单击该按钮时，浏览器就会将表单的输入信息传送给服务器。给服务器。image类型中的类型中的src属性是必需的，属性是必需的，它用于设置图像文件的路径。它用于设置图像文件的路径。表单中图像按钮表单中图像按钮 你最喜欢的运动：你最喜欢的运动：足球足球 篮球篮球 排球排球 8.2.6图像按钮image8.2.6图像按钮image8.2.7文件选择输入框filel基本语法：基本语法：l语法说明：语法说明：l在表单中插入文件选择输入框，只要将在表单中插入文件选择输入框，只要将标记中标记中t

12、ype属性值设为属性值设为file就可以插入文件选择就可以插入文件选择输入框。输入框。8.2.7文件选择输入框filel基本语法：基本语法：l语法说明：语法说明：l在表单中插入文件选择输入框，只要将在表单中插入文件选择输入框，只要将标记中标记中type属性值设为属性值设为file就可以插入文件选择就可以插入文件选择输入框。输入框。表单中文件选择输入框表单中文件选择输入框 请选择文件请选择文件 8.2.7文件选择输入框file8.2.7文件选择输入框file8.2.8隐藏框hiddenl基本语法：基本语法：l语法说明：语法说明：l当当type=hidden时，表示输入项将不在浏览器时，表示输入项

13、将不在浏览器中显示。中显示。8.3多行文本输入框l用用标记可以来定义高度超过一行的标记可以来定义高度超过一行的文本输入框，文本输入框，标记是成对标记，首标记是成对标记，首标记标记和尾标记和尾标记之间之间的内容就是显示在文本输入框中的初始信息。的内容就是显示在文本输入框中的初始信息。标记有四个属性：标记有四个属性：name，rows，cols，wrap。l基本语法：基本语法：textarea name=textarea cols=rows=wrap=“l语法说明：语法说明：lname：用于指定文本输入框的名字。：用于指定文本输入框的名字。lrows：设置多行文本输入框的行数，此属性的值：设置多行

14、文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于框添加垂直滚动条。但是，当输入文本的行数小于或等于或等于rows属性的值时，滚动条将不起作用。属性的值时，滚动条将不起作用。lcols：设置多行文本输入框的列数。：设置多行文本输入框的列数。lwrap：默认值是文本自动换行，当输入内容超过：默认值是文本自动换行，当输入内容超过文本域的右边界时会自动转到下一行，而数据在被文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现。提交处理时自动换行的地方不会有换行

15、符出现。8.3多行文本输入框 请提宝贵意见请提宝贵意见 请提宝贵意见：请提宝贵意见：8.3多行文本输入框8.3多行文本输入框8.4下拉列表框、l在表单中，通过在表单中，通过和和标记可标记可以在浏览器中设计一个下拉式的列表或带有滚动条以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。的列表，用户可以在列表中选中一个或多个选项。这一点与这一点与标记中的单选框和多选框的使标记中的单选框和多选框的使用方法相似，只是形式不同。用方法相似，只是形式不同。l基本语法：基本语法：l语法说明：语法说明：1.标记是成对标记，首标记标记是成对标记，首标记和尾标记和尾标记之间的内

16、容就是一个下拉式菜单的内容。之间的内容就是一个下拉式菜单的内容。标记必须与标记必须与标记配套使用。标记配套使用。标记用于定义列表中的各个选项，标记用于定义列表中的各个选项，标记有标记有name，size，multiple三个属性。三个属性。1)name：设定下拉列表名字。：设定下拉列表名字。2)size：可选项，用于改变下拉框的大小。：可选项，用于改变下拉框的大小。size属性的值是数字，属性的值是数字，表示显示在列表中选项的数目，当表示显示在列表中选项的数目，当size属性的值小于列表框中属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以的列表项数目时，浏览器会为该下

17、拉框添加滚动条，用户可以使用滚动条来查看所有的选项，使用滚动条来查看所有的选项，size默认值为默认值为1。3)multiple：如果加上该属性，表示允许用户从列表中选择多：如果加上该属性，表示允许用户从列表中选择多项。项。8.4下拉列表框、l语法说明：语法说明：2.标记用来定义列表中的选项，设置列表中显示的文标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个字和列表条目的值，列表中每个选项有一个显示的文本和一个value值值(当选项被选择时传送给处理程序的信息当选项被选择时传送给处理程序的信息)。标记是单标记，它必须嵌套在标记是单标记，它必须嵌

18、套在标记中使标记中使用。一个列表中有多少个选项，就要有多少个用。一个列表中有多少个选项，就要有多少个标记标记与之相对应，选项的具体内容写在每个与之相对应，选项的具体内容写在每个之后。之后。标记有两个属性：标记有两个属性：value和和selected，它们都是，它们都是可选项。可选项。1)value:用于设置当该选项被选中并提交后，浏览器传送给服用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。务器的数据。如果是默认状态，浏览器将传送选项的内容。2)selected:用来指定选项的初始状态，表示该选项在初始时被用来指定选项的初始状态，表示该选项在

19、初始时被选中。选中。8.4下拉列表框、你最喜欢的运动：你最喜欢的运动：足球足球 篮球篮球 排球排球 8.4下拉列表框、8.4下拉列表框、8.5小实例l在做表单前首先要规划好表单所包含的对象，例如在做表单前首先要规划好表单所包含的对象，例如本实例用户注册表单将包含：用户名称、真实姓名、本实例用户注册表单将包含：用户名称、真实姓名、出生时间、性别、登陆密码、确认密码、出生时间、性别、登陆密码、确认密码、E-MAIL、电话、电话、QQ、个人简介等信息。、个人简介等信息。l在表单布局设计时，考虑到用户完成表单填写的时在表单布局设计时，考虑到用户完成表单填写的时间应当尽可能的短，标签、输入框均垂直对齐是

20、很间应当尽可能的短，标签、输入框均垂直对齐是很好的布局方式，因为一致的对齐减少了眼睛移动和好的布局方式，因为一致的对齐减少了眼睛移动和处理时间。处理时间。l例例8-12给出了用户注册表单的实现，本例中主要用给出了用户注册表单的实现，本例中主要用到前面几节学习过的单行文本输入框到前面几节学习过的单行文本输入框text、下拉列、下拉列表框表框select、单选框、单选框radio、密码输入框、密码输入框password、多行文本输入框、多行文本输入框textarea。这是一。这是一个较实用的用户注册表单，其效果如图个较实用的用户注册表单，其效果如图8-13所示。所示。8.5小实例Company nameWEB编程基础编程基础