html标签2（表单，内联框架）标签

演示地址

http://xuanransoftware.com/phpStudy/0404/

---

图片展示

---

课后总结

• 表单是网页中最常见的与用户进行数据交互的元素
• 表单中用户填写的数据一般需要提交到后台的php文件中进行处理或保存在数据库中

---

表单与控件元素

[ toc ]

• 表单分为表单元素与控件元素二部分
• 表单元素仅一个: <form>
• 表单控件元素,根据类型不同,有多个

1. 表单元素<form>

1.1 常用属性

序号	属性	描述
1	action	表单提交的 URL 地址(处理表单请求的脚本)
2	method	表单提交类型:GET/POST
3	enctype	设置表单提交数据的编码方式
4	name	表单唯一名称,与 ID 同义
5	target	打开请求 URL 的方式,如果_blank

1.2 请求类型method

• web 请求方式有二种: 超链接与表单提交
• 超链接就是使用<a>标签发起请求,其实就是GET请求
• 表单提交默认就是GET请求,但例用最多的是POST
• 请求类型属性action的取值

序号	允许值	描述
1	GET	默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2	POST	表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype

序号	允许值	适用场景	描述
1	application/x-www-form-urlencoded	接收value值	默认值,使用 URL 编码,GET/POST 均适合
2	multipart/form-data	文件上传	采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3	text/plain	电子邮件	如action="mailto:URL

1.4 表单名称name

序号	功能	描述
1	标识表单元素	与id一样,用来唯一标识该表单元素
2	绑定表单元素	用于表单控件元素的 form 属性,用来绑定所属表单
3	访问表单元素	快捷访问内部控件元素,如form.input.value

1.5 打开方式target

序号	允许值	描述
1	_self	默认值,当前窗口打开提交的 URL
2	_blank	新窗口打开提交的 URL
3	_parent	父窗口打开提交的 URL
4	_top	顶层窗口打开提交的 URL

---

2. 表单控件元素<input>

2.1 常用属性

序号	属性	描述
1	type	控件类型,如文本框, 复选框…
2	name	请求参数的名称,对应于脚本处理的变量名
3	value	请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4	form	控件所属表单
5	placeholder	仅 限输入框text和password,输入框的提示信息
6	list	仅 限输入框text和password,下拉框智能提示
7	autocomplate	仅 限输入框text和password,自动完成(历史记录)
8	maxlength	仅 限输入框text/password, 允许输入最大字符数量
9	checked	仅 限单选框radio, 复选框checkbox(布尔属性)
10	readonly	元素只读,但通过 JavaScript 可修改(布尔属性)
11	disabled	元素禁用,(布尔属性)
12	autofocus	自动获取焦点,一个表单仅 限一个控件
13	src	仅 限图像域images, 图像 URL 地址
14	width	仅 限图像域images, 图像宽度
15	height	仅 限图像域images, 图像高度

2.2 type类型

• 常用类型

序号	类型	描述
1	<input type="text">	单行文本框 (默认值)
2	<input type="password">	密码输入框
3	<input type="radio">	单选框
4	<input type="checkbox">	复选框
5	<input type="image">	图像域/提交表单
6	<input type="file">	文件上传域
7	<input type="hidden">	隐藏域

• html5 新增类型

序号	类型	描述
1	<input type="email">	电子邮件
2	<input type="data">	日期
2	<input type="data">	日期
4	<input type="datetime-local">	本地日期时间
5	<input type="tel">	电话号码
6	<input type="url">	URL 地址
7	<input type="number">	数值
8	<input type="range">	范围拖动条
9	<input type="search">	搜索框/移动
10	<input type="color">	拾色器

2.3 常用事件属性

序号	事件属性	描述
1	onfocus	获取焦点时触发
2	onblur	失去焦点时触发
3	onchange	失去焦点,且值发生变化时触发
4	oninput	值发生变化(不等失去焦点)时触发
5	onkeydown	按下键盘时触发
6	onkeyup	抬起键盘时触发
7	onclick	鼠标单击时触发
8	onselect	选择内容文本时触发

---

3. 控件标签元素<label>

• <label>元素没有name和value属性,不会创建请求参数
• 它存在的意义就是关联控件,当点击它时将焦点自动落在关联控件内部
• 语法: <label for="关联控件的id属性值">(也支持三大通用属性)
• <label>有二种方式与控件元素进行关联/绑定

序号	关联方式	示例代码
1	显式关联	<label for="email">Email:</label><input type="email" id="email">
1	隐式关联	<label>Email:</label><input type="email"></label>

推荐使用显式关联, 案例参考<input>示例

---

4. 按钮控件元素<button>

4.1 与<input>对比

序号	<button>	替代的<input>
1	<button type="...">按钮文本</button>	<input type="..." value="按钮文本">
2	<button><img src="..."></button>	<input type="image" src="...">图像域

4.2 常用属性

序号	属性	描述
1	type	必须使用预定义的submit, button, reset之一
2	name	按钮的唯一名称,与 ID 等效
3	value	按钮文本初始值,可通过 JavaScript 修改
4	disabled	禁用按钮
5	form	按钮所属表单(此时按钮type默认类型为submit提交)
6	formaction	设置不同按钮可将表单数据提交到不同的 URL 处理
7	form***	动态设置<form>属性值,如formmethod="GET"

---

5. 下拉列表元素<select>

• 下拉列表使用<select> + <optgroup> + <option>组合元素实现
• 参数名name定义在<select>中,参数值value,定义在<option>中

5.1 <select>属性

序号	属性	描述
1	name	请求参数名称/变量名
2	multiple	是否允许多选(布尔属性)
3	size	允许同时显示的列表项
3	disabled	是否禁用(布尔属性)

5.2 <optgroup>属性

属性	描述
label	列表分组名称

5.3 <option>属性

序号	属性	描述
1	value	请求参数的值
2	label	默认选项文本值
3	selected	是否选中(布尔属性)
3	disabled	是否禁用(布尔属性)

5.4 <select>事件属性

序号	事件属性	描述
1	onchange	当下拉列表选项值发生变化时才会触发
2	onclick	只要点击就会触发(选项值可以不改变)

5.5 示例

---

6. 多行文本域元素<textarea>

6.1 常用属性

序号	属性	描述
1	cols	文本域可视宽度
2	rows	文本域可输入的行数
3	name	文本域参数名称
4	form	绑定所属表单元素
5	minlength	允许输入最小字符长度
6	maxlength	允许输入最大字符长度
7	maxlength	允许输入最大字符长度
8	placeholder	提示信息占位符
9	wrap	换行方式:hard/soft默认
10	disabled	禁用(布尔属性)
11	autofocus	自动获取焦点(布尔属性)
12	autocomplete	自动完成(布尔属性)

6.2 事件属性

序号	事件	描述
1	onclick	点击时触发
2	onchange	文本被修改时触发
3	onselect	文本被选中时触发

提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值

---

7. 表单域分组元素<fieldset>

• 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
• 它只有一个子元素<legend>,设置分组标题

7.1 常用属性

序号	属性	描述
1	name	分组名称
2	form	分组所属表单,默认是最近的表单
3	disabled	禁用分组(布尔属性)

name,form属性仅供参考,提交参数仍依赖内部控件中的form属性

---

8.内联框架

• html5 中只保留了内联框架元素<iframe>
• 常用属性

属性	描述
src	框架中加载的页面 URL
srcdoc	直接赋值 html 代码
name	框架名称,与<a target=""配合
scrolling	是否显示滚动条, yes/no/auto
width	框架宽度
height	框架高度
frameborder	是否显示框架边框
marginheight	设置框架上下外边距
marginwidth	设置框架左右外边距