HTML 课程Day3
课程大纲
Ø 表单Form以及表单元素
Ø 框架集（了解）及iframe(重点)
本课程视频链接：
一、表单标签Form
1. 什么是表单
表单在网页中负责数据采集功能的。表单是有3部分组成：
（1）表单标签 <form></form>
（2）表单域
（3）表单按钮
2. Form标签、
语法格式：
<form action=”url” method=”get|post”>
</form>
练习：
<form action="welcome.html" method="post">
<p>
用户名 <input type="text" name="username" id="username" value="" />
</p>
<p>
</p>
<input type="submit" value="登录"/>
</form>
属性名 | 值 | 说明 |
action | URL | 提交的表单向何处发送数据 |
enctype | Multipart/form-data | 上传文件时使用 |
method | Get post | 规定提交方法 |
target | _blank _self _parent _top framename | 在何处打开URL |
Autocomplete | On off | 规定表单是否启用自动完成功能 |
Novalidate | Novalidate | 设置表单提交不验证 |
3. 表单元素
3.1输入框input(重点中的重点)
<input/> 用于搜集用户信息。
根据type属性，决定输入字段的形式（文本框，复选框、掩码文本框、单选按钮、按钮等等）
input标签
属性值 描述
text 普通文本框
password 掩码文本框
submit 提交按钮
button 普通按钮
reset 重置按钮
radio 单选按钮，一组单选按钮必须是定义相同的name值
checkbox 复选按钮，一次可以选择多个，一组复选按钮必须是定义相同的name值，方便取值
file 文件上传文本框
hidden 隐藏域，会被提交
image 图片按钮，需配合src属性使用
color 颜色按钮
date 日期字段，带有calender控件
datetime
datetime-local 日期字段，time字段，带有calender控件
week 周，带有calender控件
time 时、分、秒 带有time控件
email 邮件地址
number 数字输入文本框
range s数字输入文本框，范围
tel 电话号码文本框
url url文本框
<p><input type="text" name="" id="" value="" /></p>
<p><input type="password" name="" id="" value="" /></p>
<p>
提交按钮 <input type="submit" name="" id="" value="登录" />
</p>
<p>
普通按钮<input type="button" name="" id="" value="保存" />
</p>
其他属性：
Placeholder ：定义文本框提示性的文字
Maxlength ： 设置文本框最多输入的字符数
Readonly：只读属性
Disabled：禁用属性，文本框，按钮，复选框等
Checked：设置默认选中项，只适用于单选按钮或复选按钮
3.2 select下拉列表标签
用法：
<!--
autofocus:自动获取焦点
multiple：可以设置选中多个项
size：设置可见选项数目
-->
<select name="" autofocus="autofocus" size="2">
<option value="0">--请选择省份--</option>
<option value="1" >北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="3">四川</option>
</select>
什么时候使用select标签？
一般当选项特别多时，checkbox不再适用，可以使用下列表
比如：学历、省份、职位等
option标签中可以通过设置selected=selected设置默认选项
3.3 多行文本域控件textarea
<textarea name="leavewords" rows="10" cols="40">你好，我是某某</textarea>
3.4 label标签
<label>标签一般和input标签关联使用
label标签的两种用法：
（1）<label><input type="checkbox" name="fruit" id="" value="0" /> 苹果</label>
（2）<input type="checkbox" name="fruit" id="xigua" value="1" />
<label for="xigua">西瓜</label>
3.5 button标签
定义一个按钮标签，<button>文本或图像</button>
对应低版本的IE浏览器，button标签，默认是普通的button按钮，而其他的浏览器默认为submit类型
<form action="" method="post">
<button>提交</button>
</form>
二、框架（了解）
知识内容：
活动框架 iframe
框架集 frameset
1. 活动框架iframe,这个框架可以内联或包含另外一个网页文档
语法结构：<iframe></iframe>
实例：
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr height="100"><td colspan="2">高新区软件园C区食堂管理系统</td></tr>
<tr height="600">
<td width="15%">
<ul>
<li><a href="usermanger/uadd.html" target="mainbox">员工添加</a></li>
<li><a href="usermanger/uedit.html" target="mainbox">员工修改</a></li>
<li><a href="usermanger/ulist.html" target="mainbox">员工查询</a></li>
</ul>
</td>
<td width="90%">
<iframe src="usermanger/welceome.html" name="mainbox" width="100%" height="600">
你的浏览器不支持，请升级或更新浏览器
</iframe>
</td>
</tr>
</table>
常用属性：
frameborder:是否显示框架的边框 0：不显示，1：显示
Scrolling:是否显示滚动条
Yes：显示
No:不显示
Auto:自动处理
2. 框架集 frameset
<frameset ></frameset>
属性rows表示分成几行，一般用“，”隔开。
属性cols表示分成几列，一般用“，”隔开。
使用fameset标签，不再需要body元素
主框架页面：
<frameset rows="15%,85%">
<frame src="usermanger/top.html" />
<frameset cols="200,*">
<frame src="usermanger/navlist.html" />
<frame src="usermanger/welceome.html" name="mainbox" />
</frameset>
</frameset>
navlist.html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="uadd.html" target="mainbox">员工添加</a></li>
<li><a href="uedit.html" target="mainbox">员工修改</a></li>
<li><a href="ulist.html" target="mainbox">员工查询</a></li>
</ul>
</body>
</html>