表格与表单
表格
1.1 元素
序号 |
标签 |
描述 |
备注 |
1 |
<table> |
定义表格, |
必选 |
2 |
<tbody> |
定义表格主体, 允许定义多次 |
必选 |
3 |
<tr> |
定义表格中的行, |
必选 |
|
4 |
<th> |
定义表格头部中的单元格,默认加粗居中 |
必选 |
5 |
<td> |
定义 g 表格 e 主体与底部的的单元格 |
必选 |
6 |
<caption> |
定义表格标题, |
可选 |
7 |
<thead> |
定义表格头格, 只需定义一次 |
可选 |
8 |
<tfoot> |
定义表格底, 只需定义一次 |
可选 |
9 |
<col> |
为一个/多个列设置属性,仅限 |
可选 |
10 |
<colgroup> |
将多个<col> 元素分组管理 |
可选 |
1.2 属性
序号 |
属性 |
适用元素 |
描述 |
1 |
border |
<table> |
添加表格框 |
2 |
cellpadding |
<table> |
设置单元格内边距 |
3 |
cellspacing |
<table> |
设置单元格边框间隙 |
4 |
align |
不限 |
设置单元格内容水平居中 |
5 |
bgcolor |
不限 |
设置背景色 |
6 |
width |
不限 |
设置宽度 |
7 |
height |
不限 |
设置高度 |
1.3代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格 -->
<table border="1" cellspacing="0" width="80%" align="center">
<!-- 对列统一设置 -->
<colgroup>
<col bgcolor="lightgreen">
<col bgcolor="lightyellow" span="2">
<col>
</colgroup>
<!-- 表格标题 font-size:1.6rem 设置字体大小 margin-bottom:20px设置标题与表格的距离 -->
<caption style=" font-size:1.6rem;margin-bottom:20px;">四大名著</caption>
<!-- 表格页眉 -->
<thead>
<th>选自</th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</thead>
<!-- 表格主题部分 -->
<tbody align="center">
<tr>
<td rowspan="3">三国</td>
<td>1</td>
<td>孙权</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>刘备</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>曹操</td>
<td>男</td>
<td>21</td>
</tr>
</tbody>
<!-- 主题2 -->
<tbody>
<tr>
<td rowspan="3">水浒</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center">备注</td>
<td colspan="4">lalalallala</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单
1.1table常用属性
序号 |
属性 |
描述 |
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 |
选择内容文本时触发 |
Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:做多了, 没有手写
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!