第三课时 HTML表单和框架
一、<form>表单
1.定义:用来收集用户信息,提供服务
2.表单的简单框架:
<form>
<input>
<select>…</select>
<textarea>…</textarea>
</form>
3.<form>标记的主要属性:
a.action:指出该表单所对应的处理程序的位置(url)
b.method:指出表单信息的提交方式:get(默认)或post
get:提交总信息不超过2K,且提交后可以在地址栏中看到
post:提交信息长度不限,且不会显示在地址栏中
c.enctype:表单数据的编码方式:
application/x-www-form-urlencoded(默认):键值对编码
multipart/form-data:二进制流编码(用于传输文件)
d.target:类似超链接中的target
二、<form>中的<input>标记
<form>有三个输入子标记,用于收集用户信息。<input>是应用最为广泛的。
1.<input>的主要属性:
a.Type:指定输入比较的输入方式:(共10中方式)
text:单行文本框
password:密码文本框
hidden:隐藏文本框
file:文件选择框
checkbox:复选框
radio:单选框
-----------------
Button:普通按钮(要添加脚本才有动作,否则不做任何事情)
Submit:提交按钮(提交<from>标签内的所有信息)
Reset:重置按钮
Image:图片按钮(功能同提交按钮)
b.size:文本框的长度
c.maxlength:文本框允许输入的最大长度(控制输入长度的最简单办法)
d.value:当type为文本类型时,value代表初始值和提交值
当type为按钮类型时,value为按钮的显示文本(因为按钮不需要提交值)
e.checked(标示属性):使用在type=”checkedbox|radio”时,表示被选中状态
注:使用radio时,name的值要一直,否则达不到一组的效果。
三、<form>中的其他标记
1.<select>:下拉列表选择标记
<select size=”” multiple>
<option selected value=””>…选项内容…</option>下拉选项
</select>
Size:下拉列表显示的项数。
Multiple(标识属性):开启多选功能
Selected(标识属性):表示被选中的状态
Value:表示这个下拉选项的提交值
2.<textarea>多行文本标记:
<textarea rows=”” cols=””>…</textarea>
3.filedSet分组标记:
<filedset>
<legend>...</legend>
…可以把不同的标记用框框分组显示
</filedset>
Legend:表示框框标题名字。
四、<form>中所有标记都有的属性
1.name:名字,常用于调用时的参数
2.ID:同name
3.title:提示信息
4.tabIndex:定义tab键的反问顺序
5.Accesskey:定义ALT+“”的快捷访问键
五、框架
1.定义:可以把一个浏览器窗口分成若干独立的子窗口,字窗口相互独立的滚动刷新,可以有所联系,
2.简单使用:
<html>
<head>…</head>
<frameset cols=”30%,*”>
<frame src=””>
<frame src=””>
</frameset>
</html>
用<frameset>标记代替<body>,若把<frameset>标记放在<body>内,<frameset>将不起作用。
3.<frameset>的主要属性:
a.cols:纵向分割,cols=”像素|百分比|*”三种方式:
像素:为单个像素占总像素的比例
百分比:直接算整个区域的百分比
*:若只出现一个*,代表窗口剩余部分;若出现多个*,就所有*号按比例分窗口剩余部分。
b.rows:横向分割(使用同纵向)
c.border:分割线宽度
d.bordercolor:分割线颜色
e.frameborder:设置是否隐藏分割线,为YES是显示,NO为隐藏
3.<frameset>中使用的标记:
a.<frame>子窗口标记:
<frame src=”” name=”” noresize scrolling=”no|yes” marginwidth=”” >
Src:子窗口路径 name:子窗口名字
Noresize(标识属性):不允许改变分割线位置
Scrolling:定义是否需要滚动条
Marginwidth:文本与分割线的宽度
Marginheight:文本与分割线的高度
b.<iframe>内联窗口标记(浮动窗口标记)
与<frame>的不同:
<iframe>必须放在<body>中,而<frame>不需要。
<frame>必须嵌在<frameset>中,而<iframe>不需要。
<iframe>可以自定义高宽度,而<frame>是通过<frameset>定义的。