演示地址
http://xuanransoftware.com/phpStudy/0404/
图片展示
课后总结
- 表单是网页中最常见的与用户进行数据交互的元素
- 表单中用户填写的数据一般需要提交到后台的php文件中进行处理或保存在数据库中
表单与控件元素
[ toc ]
- 表单分为表单元素与控件元素二部分
- 表单元素仅一个:
<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.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"> |
隐藏域 |
| 序号 |
类型 |
描述 |
| 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>示例
| 序号 |
<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>属性
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 |
设置框架左右外边距 |
