表单标签和表格标签
表单
表单的创建
表单是什么
- 表单用来收集信息,比如注册、登录、发送评论反馈、购买商品等等
表单的创建
<form action="save.php" method="post"></form>
- 以
<form>
元素开始 action
属性表示表单要提交到的后台程序的网址method
属性表示表单提交的方式,有get
或post
基本控件1
单行文本框
<input type="text" value="123">
- 使用
type
属性值被设置为text
的<input>
元素可以创建单行文本框,它是一个单标 value
属性表示已经填写好的值<input type="text" placehold="请输入姓名">
placeholder
属性表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值<input type="text" disabled>
disabled
属性表示用户不能与元素交互,即“锁死”
单选按钮
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" checked> 女
- 使用
type
属性值被设置为radio
的<input>
元素可以创建单选按钮 - 互斥的单选按钮应该设置它们的
name
为相同值 - 单选按钮要有
value
属性值,向服务器提交的就是value
值 - 单选按钮如果加上了
checked
属性,表示默认被选中
<label>标签
- label标签用来将文字和单选按钮进行绑定,用户单击文字的时候也视为点击了单选按钮
<label>
<input type="radio" name="sex" value="男"> 男
</label>
<label>
<input type="radio" name="sex" value="女" checked> 女
</label>
复选框
<input type="checkbox">
- 使用
type
属性值被设置为checkbox
的<input>
元素可以创建复选框 - 同组复选框应该设置它们的
name
为相同值 - 复选框要有
value
属性值,向服务器提交的就是value
值
基本控件2
密码框
<input type="password">
- 使用
type
属性值被设置为password
的<input>
元素可以创建密码框
下拉菜单
<select>
<option value="alipay">支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>
<select>
标签表示下拉菜单,<option>
是它内部的选项
多行文本框
<textarea></textarea>
表示多行文本框- rows和cols属性,用于定义多行文本框的行数和列数
input类型总结
type属性值 | 控件 |
---|
text | 单行文本框 |
radio | 单选按钮 |
checkbox | 多选按钮 |
password | 密码框 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
HTML5中新增的表单控件
更丰富的input种类
type属性值 | 控件 |
---|
color | 颜色选择控件 |
date、time | 日期、时间选择控件 |
email | 电子邮件输入控件 |
file | 文件选择控件 |
number | 数字输入控件 |
range | 拖拽条 |
search | 搜索框 |
url | 网址输入控件 |
<datalist>控件
- 控件可以为输入框提供一些备选项,当用户输入的内容与备选项文字相同时,将会显示智能感应
- 将
<select>
标签改为<datalist>
,再在<datalist>
后面加上id
- 在
<datalist>
前加上<input type="text" list="id">
,list
中的id
对应<datalist>
中id
的值
<input type="text" list="pay">
<datalist id="pay">
<option value="alipay">
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>
表格
表格标签
<table>、<tr>和<td>标签
标签 | 意义 |
---|
table | 表格 |
tr | table row 表格行 |
td | table data 表格数据 |
<table>的border属性
- 表格的边框
<table border="1"></table>
<table>的caption属性
<th>标签
<table border="1">
<caption>我是标题</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
单元格的合并
colspan属性
<table border="1">
<caption>我是标题</caption>
<tr>
<th colspan="2">1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>A</td>
<td colspan="3">B</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
</table>
rowspan属性
<table border="1">
<caption>我是标题</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th rowspan="3">4</th>
</tr>
<tr>
<td>A</td>
<td rowspan="2">B</td>
<td>C</td>
</tr>
<tr>
<td>E</td>
<td>G</td>
</tr>
</table>
表格的其他特性
<thead>、<tbody>、<tfoot>标签
- 作用:使代码更清晰
<thead>
标签定义表头<tbody>
标签定义表核心内容<tfoot>
标签定义表脚,通常是会汇总行
<table border="1" width="400">
<thead>
<tr>
<th colspan="2"></th>
<th colspan="2">第一季度</th>
<th colspan="2">第二季度</th>
<th colspan="2">第三季度</th>
<th colspan="2">第四季度</th>
</tr>
<tr>
<th colspan="2"></th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
<th>国内</th>
<th>国外</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">手机</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th colspan="2">农产品</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th colspan="2">水产品</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">汇总</th>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
</tr>
</tfoot>
</table>