HTML表单
[目录]
目录
一、基础表格
<table>表格 <tr>行 <td>单元格
基本语法与结构
<table> <!--表格开始--> <tr> <!--tr行标签--> <td>……</td> <!--td单元格--> …… </tr> …… </table> <!--表格结束-->
二、表格操作
带表头的表格:
<th>……</th> <!--表格头,内容居中,加粗显示-->
带标题的表格:
<caption>……</caption> <!--表格标题居中显示-->
带结构的表格
- thead:表格的头,放表格的表头
- tbody:表格主体,放数据本体
- tfoot:表格的脚,放表格的脚注
<table>表格属性
属性 | 值 | 描述 |
---|---|---|
width | px/% | 规定表格的宽度 |
align | left/right/center | 表格相对周围元素的对齐方式 |
border | px | 规定表格边距的宽度 |
bgcolor | rgb(x,x,x)/#xxxxxx/colorname | 表格的背景颜色 |
cellpadding | px/% | 单元边沿与其内容之间的空白 |
cellspacing | px/% | 单元格之间的空白 |
fram | 属性值 | 规定外侧边框的哪个部分是可见的 |
rules | 属性值 | 规定内侧边距的哪个部分是可见的 |
- <tr>标签属性
属性 | 值 | 描述 |
---|---|---|
align | left/right/center/justify | 行内容的水平对齐 |
valign | top/middle/bottom | 行内容的垂直对齐 |
bgcolor | rgb(x,x,x)/#xxxxxx/colorname | 行的背景颜色 |
width | px/% | 单元格的宽度 |
heigh | px/% | 单元格的高度 |
- 跨列属性:colspan
- 跨行属性:rowspan
- 表格嵌套:
- 完整表格结构
- 放到<td>标签
- 注意:尽量少使用表格嵌套,尽量少的使用表格跨行跨列
三、HTML表单
- 语法
<form> 表单元素 </form>
- HTML表单
form标签中,以下标签实现表单元素添加
标签 | 描述 |
---|---|
<input> | 表单输入标签 |
<select> | 菜单和列表标签 |
<option> | 菜单和列表项目标签 |
<textarea> | 文字域标签 |
<optgroup> | 菜单和列表项目分组标签 |
- <input>标签:
<input type="类型属性" name="名称" …… />
Type属性值 | 描述 |
---|---|
text | 文字域 |
password | 密码域 |
file | 文件域 |
checkbox | 复选框 |
radio | 单选框 |
button | 按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
hidden | 隐藏域 |
image | 图像域 |
- 单行文本域
Type属性值 | 描述 |
---|---|
name | 文字域的名称 |
maxlength | 指用户输入的最大字符长度 |
size | 之文本框的宽度,以字符个数为单位,文本框的缺省宽度是20个字符 |
value | 指定文本框的默认值 |
placeholder | 规定用户填写输入字段的提示 |
- 多行文本域
Type属性值 | 描述 |
---|---|
name | 文字域的名称 |
placeholder | 规定用户填写输入字段的提示 |
rows | 文本区内的可见行数 |
cols | 文本区内的可见宽度 |
- 表单工作原理:访问一个包含表单的页面,输入数据后“提交”表单,浏览器将用户在表单中输入的数据进行打包,并发送给服务器,服务器接收数据并转由程序处理
- <form>标签
<form action="" method="" name="" …… > 表单元素 </form>
属性 | 值 | 描述 |
---|---|---|
action | url | 提交表单时向何处发送表单数据 |
method | get/post | 设置表单以何种方式发送到指定页面 |
name | form_name | 表单的名称 |
target | _blank_self_parent_top | 在何处打开action URL |
- GET和POST的区别
- GET:使用URL传递参数,对所送信息的数量也有限制,一般用于信息获取
- POST:表单数据作为HTTP请求体的一部分,对所发送信息的数量无限制,一般用于修改服务器上的资源
四、必备基础
- <div>和<span>
- <div>标签是一个区块容器标记,<div></div>之间是一个容器,可以包含段落、表格、图片等各种HTML元素
- <span>标签没有实际意义,为了应用样式
- HTML标签
块级标签:占据一行、换行
<div><ul><ol><li><dl><dt><dd><h1>~<h6><p><form><hr>
行内标签:在一行,不换行
<b><em><img><input><a><sup><sub><textarea><span>
相关推荐
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
云中舞步 2020-11-12
杨德龙 2020-11-11
JohnYork 2020-10-16
wangzhaotongalex 2020-09-22
xiaoseyihe 2020-11-16
不要皱眉 2020-10-14
Crazyshark 2020-11-13
K先生 2020-11-10
momode 2020-09-11
思君夜未眠 2020-09-04
点滴技术生活 2020-08-21
MaggieRose 2020-08-19
kevinweijc 2020-08-18
wintershii 2020-08-17
vapaad 2020-08-17