表格与表单
Posted mangm
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表格与表单相关的知识,希望对你有一定的参考价值。
表格表单
一、表格
1、基本结构
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
2、常用属性
table
-- border: <integer>:表格外框及单元格外框
-- cellpadding: <integer>:单元格的内边距
-- cellspacing: <integer>:单元格之间的间距,最小为0
-- rules:rows、cols、groups、all:边框规则
td
-- rowspan: <integer>:行合并(该单元格占多行)
-- colspan: <integer>:列合并(该单元格占多列)
-- width: : <integer>%:列宽占比
caption
-- align: left | right | top | bottom:标题方位
3、垂直水平居中
.sup {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.sub {
width: 100px;
height: 100px;
margin: 0 auto;
}
二、表单
1、基本结构
<form>
<label>输入框</label><input type="text" />
<button type="submit">提交</button>
</form>
2、input常用类型
text、password、hidden、radio、checkbox、reset、submit
3、常用类型标签
- 文本框
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
- 密文框
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
- 单选框
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
- 复选框
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球
<input type="checkbox" name="hobby" value="baseball"> 棒球
- 下拉选项
<select name="major">
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine" selected>医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
<!--多选-->
<select name="major" multiple>
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine">医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
- 多行文本输入
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
- 按钮
<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>
<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>
<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>
4、全局属性
- required:必填项
- pattern:正则
5、伪类
- focus:获得焦点
以上是关于表格与表单的主要内容,如果未能解决你的问题,请参考以下文章