资源简介

(共19张PPT)
7
表 单
HTML是利用表单(Fom)来设计交互界面的.表单则是接受浏览者在网页中的操作,并传递给服务器中的程序(例如CG1程序).它是动态的,有输入框及按钮等。使用表单并配合CG程序,网页能够知道浏览者做了哪些事情,然后针对这些事情适当地加以回应,就可以做成一个具有交互功能的网页了。
本章的内容就是要介绍,如何制作表单让自己的网页和浏览者之间进行互相交流.
7、表单
1
表单
表单标签是成对标签。在首标签和尾标签

之间的内容就是一个表单。表单form为浏览者在屏幕上建立一张表格,表格中有明确的文字提示,使浏览者可以在表格上输入自己的信息,然后使用提交按钮,将浏览者的信息传送给服务器。表单form中的HTML代码要完成两件事情,一是指出CGl的路径和名称,二是要将表单输入的信息传递给CGI。
CGI(Common Gateway Interface) 是 WWW 技术中最重要的技术之一，有着不可替代的重要地位。CGI 是外部应用程序（CGI 程序）与 WEB 服务器之间的接口标准，是在 CGI 程序和 Web 服务器之间传递信息的过程。CGI 规范允许 Web 服务器执行外部程序，并将它们的输出发送给 Web 浏览器，CGI 将 Web 的一组简单的静态超媒体文档变成一个完整的新的交互式媒体。
7、表单
1
定义表单标记及其属性
属性 功能
action 指定处理表单数据的URL地址,其值通常为动态网页文件的路径,可以设置为空链接
method 指定将表单数据提交给服务器的传送方式,值为post(一般用于传送大容量数据或需要保密的信息)和get(不能传送大容量数据,且数据传送不安全,易被截取)
name 定义表单的名称
target 定义表单数据结果显示的目标窗口
格式:< form action=“执行CGI程序的URL地址” method=”数据传送方式">…
功能:在网页中建立一个表单,定义信息的收集范围
注意：所有的表单控件都必须包含在

...

标记中
7、表单
1
定义表单标记及其属性
格式:< form action=“执行CGI程序的URL地址” method=”数据传送方式">…
功能:在网页中建立一个表单,定义信息的收集范围
2
表单控件标记及其属性
格式:< Input type=”输入控件类型">。
功能:在已建好的表单中建立一个指定类型的输入控件
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
控件名称 控件类型
Text 文本框
Password 密码框
Radio 单选按钮
Checkbox 多选按钮
submit 确定提交按钮
Reset 重置按钮
Image 图像按钮
file 文件选择输入框
7、表单
2
表单控件标记input及其属性
格式:< Input type=”输入控件类型">。
功能:在已建好的表单中建立一个指定类型的输入控件，其他属性如下
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
属性 控件名称 控件类型
name 指定各个控件的名称,方便CGI程序对其输入控件的引用
size 设置输入窗口的宽度,控件类型为文本框、密码框和文件域时可使用
value 控件类型为文本框、密码框、文件域、单选框和复选框时,用于设置输入控件提交的值;控件 类型为提交按钮或重置按钮时,用于设置按钮上显示的文本
checked 设置单选框和复选框的初始状态,指定表示选中,不指定表示未选中
maxlength 设置文本框和密码框可输入的最大字符数
7、表单
2
文本框text及其属性
格式:< Input type=”输入控件类型">。
功能:在已建好的表单中建立一个指定类型的输入控件，其他属性如下
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
属性 控件名称 控件类型
size 设置输入窗口的宽度,控件类型为文本框、密码框和文件域时可使用
value 用于设置输入文本框中默认的值;
maxlength 设置文本框和密码框可输入的最大字符数
7、表单
2
表单控件标记input及其属性
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
2
提交submit和重置按钮reset及其属性
当type= submit时,浏览器会在相应的位置产生一个提交按钮。当用户单击该按钮时浏览器就会将表单的输入信息传送给服务器。提交按钮的name属性是可以默认的,除name属性外,它还有一个可选的属性 value,用于指定显示在提交按钮上的文字。 value属性的默认方式“提交查询内容”。在一个表单中必须有提交按钮,不然将无法向服务器传送信息.
当 type= reset时,浏览器会在相应位置产生一个重置按钮。当用户单击该按钮时,浏览器就会清除表单中所有的输入信息而恢复到初始状态。重置按钮的name属性也是可以默认的。除name属性外,它也有一个可选的属性 value,用于指定显示在清除按钮上的文字,vale属性的默认方式是“重置”。
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
2
表单控件标记
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
2
密码框password
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
2
单选按钮radio
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
3
其他表单控件及其属性
②列表框 格式如下:
< select name=”名称">
< option>列表项一
< option>列表项二
< option>列表项三
>
功能:在已建好的表单中建立一个指定列表框
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
①多行文本框
格式;< Textarea name=“名称”rows=“行数" cols=“列数”>文本内容
功能:在已建好的表单中建立一个指定多行多列的文本框
7、表单
7、表单
3
列表框常用属性
属性
size 设置列表框显示的列表项数,如省略此属性或取值为1时,列表框为下拉式列表框
multiple 指定时表示可以选择多项,省略时只能选择单项
selected 只能用在< Option>标记中,表示默认选中当前项
value 只能用在标记中,表示当前项的取值
4
Lable标签
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
使用lable标记可做为光标选择对象
语法格式：
……

例如：用户名：


4
生成分组标签
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
利用fieldset和legend标签生成分组标签
语法格式：

分组名称

例如：

基本信息

用户名：

4
Get 和post属性
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、表单
Method制定表单的运行方式。属性值有get个post。默认是get。
Get一般是从服务器获取信息，因此传递给服务器的反馈信息长度不能超过255个字符，而且安全性不高 ，提交后会在地址栏显示输入信息（控件需要设置name属性才能收集信息）
post一般是向服务器发送信息，反馈信息长度不受限制，而且安全性较高 ，提交后不会在地址栏显示输入信息（控件需要设置name属性才能收集信息）
一个测试网站地址https:///api/html/signin
作业：完成下发的TASK6 中的作业
要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。

展开更多......

收起↑