HTML表单
作用:用于接收和收集用户的输入信息。
表单许多属性,常用的有以下:
name属性:name属性用于规定input元素的名称,向后台传值的描述id属性:用于css引用或者其他引用value属性:用于定义input框的初始值,常用于举例说明该文本框输入的内容placeholder:表单提示信息disabled:控制表单是否禁止操作 true falsereadonly: 只读不可操作required:必填字段提示type属性:用于设置输入框的类型,最重要的属性
一、form标签:一般在向后台提交数据时使用
1、在html中,通常把form标签称为表单
2、常见的表单元素有输入框,单选框,复选框,文本域,密码框等
3、form的属性:(1)action:放置后台地址 (2)method:请求方式 get post
get请求和post请求的区别:
(1)get是明文(值展示在网址上) post不会
(2)get请求发相对来说比post更快捷post传递东西更大(传递文件)
<form action="" method="get"> <!-- action:放置后台地址 method:请求方式 get post -->
二、input标签:
<input> 标签规定了用户可以在其中输入数据的输入字段。
<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变,取决于 type 属性。
input->type属性:
1、text:文本框
2、password:密码框
3、submit:提交按钮 按钮改文字用value
4、radio:单选框 注意点:name属性保持一致
5、checkbox:多选框 单选框和多选框默认选中属性checkbox
6、file:文件上传 需要配合js实现
7、reset:重置 重置内容和重置按钮放到同一个form标签中
8、button按钮:input(button)情况改文字用value
9、hidden:没有实际效果,但是默认提交内容
三、表单其他标签
1、select元素:可创建单选或多选菜单
option标签下拉选择框
2、textarea标签定义多行的文本输入控件
默认可以拖拽,可以通过CSS设置resize:none固定大小
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,也可以通过css设置
可以通过 textarea>标签的 wrap 属性设置文本输入区内的换行模式
3、button标签:按钮(只写button按钮有提交功能)
4、label标签为 input 元素定义标注
如何点击图标或者文字获取表单焦点
label标签中for属性的属性值和表单中的id属性值保持一致
四、表格
1.表格的基本结构
<table>代表表格<caption>表格标题
<thead>代表表头<tr>代表行 <th>代表表头中的列
<tbody>代表表身体<tr>代表行<td>代表表身体中的列
<table border="1" cellspacing="0" cellpadding="10"> <caption>表格标题</caption><thead> <!-- 表头 --><tr><!-- tr代表行 --><th>tr代表行</th><th>th代表表头的列</th><th></th></tr></thead><tbody> <!-- 表身体 --><tr><td>tr代表行</td><td>td代表表身体里的列</td><td></td></tr><tr><td rowspan="3">rowspan合并列</td><!-- rowspan合并列 --><td colspan="2">colspan合并行</td><!-- colspan合并行 --></tr><tr><td></td><td></td></tr></tbody></table>
2.表格的基本属性
border:设置表格边框宽度 bordercolor:表格颜色
cellspacing:设置单元格之间的距离 cellpadding:设置单元格的内边距
rowspan:合并列colspan:合并行
五、表格练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title></head><body><table border="1"><thead><tr><th rowspan="2">序号</th><th rowspan="2">工作内容</th><th rowspan="2">要求工作时间</th><th colspan="3">我的采集</th><th colspan="2">资料审核</th><th rowspan="2">状态</th><th rowspan="2">操作</th></tr><tr><th>通过</th><th>不通过</th><th>待审核</th><th>已审核</th><th>未审核</th></tr></thead><tbody style="text-align: center;"><tr><td>1</td><td >核实个人基本信息</td><td>10月05日-10月11日</td><td>1</td><td></td><td></td><td></td><td></td><td>已完成</td><td></td></tr><tr><td>2</td><td>采集个人授课情况</td><td>10月05日-10月11日</td><td></td><td></td><td>4</td><td></td><td></td><td>进行中</td><td>待办</td></tr><tr><td>3</td><td>采集个人其他情况(培训进修)</td><td>10月05日-10月05日</td><td></td><td></td><td></td><td></td><td></td><td>已完成</td><td></td></tr><tr><td>4</td><td>采集个人其他情况(挂职锻炼)</td><td>10月05日-10月05日</td><td></td><td></td><td></td><td></td><td></td><td>已完成</td><td></td></tr><tr><td>5</td><td>采集个人其他情况(社会兼职)</td><td>10月05日-10月05日</td><td></td><td></td><td></td><td></td><td></td><td>已完成</td><td></td></tr><tr><td>6</td><td>采集个人其他情况(项目获奖)</td><td>10月05日-10月05日</td><td></td><td></td><td></td><td></td><td></td><td>已完成</td><td></td></tr><tr><td>7</td><td>采集个人其他情况(技术专列)</td><td>10月05日-10月05日</td><td></td><td></td><td></td><td></td><td></td><td>已完成</td><td></td></tr></tbody></table></body></html>