CSS中的form表单与table表格

364 字

2 分钟

CSS中的form表单与table表格

2017-06-30

CSS

form

table

form表单#

用来获取用户信息<form></form>

1
<form>
2
    <input type="radio" name="ok" checked="checked"><!--单选按钮--><label>满意</label><!--label 描述表单元素功能-->
3
    <!--type 类型-->
4
    <!--name 名字-->
5
    <!--checked 选中-->
6
    <input type="radio" name="ok"><!--单选按钮--><label>不满意</label>
7
    <input type="checkbox"><label>篮球</label>
8
    <input type="checkbox" checked><label>美女</label>
9
    <input type="checkbox"><label>彭于晏</label>
10
    <input type="checkbox"><label>陈冠希</label>
11
    <input type="checkbox"><label>杨颖</label>
12
    <input type="checkbox"><label>维密</label>
13

14
    <textarea maxlength="10" minlength="1"></textarea><!--文本域-->
15
    <!--maxlength 字符输入的最大长度-->
16
    <br>
17
    <label>姓名</label><input type="text">
18
    <br>
19
    <label>手机</label><input type="text">
20
    <br>
21
    <label>密码</label><input type="password">
22
</form>

radio 单选按钮
- name=“ok”（name的值相同情况下）同时给到input type=“radio”，表示单选只能选中其中的一个
lable描述表单元素功能
type 类型
name 名字
cheked 选中
- 单独写checked也可以达到选中的效果
<input type="checkbox">checkbox 多选按钮
textarea 文本域
<textarea maxlength="10" minlength="1"></textarea>
- maxlength字符输入的最大长度

table表格#

<caption>标题</caption>
<thead>表头</thead>
- tr>th（标题单元格，th加粗居中）
<tfoot> 表尾
- tr>th（普通单元格）
- tr>td（普通单元格，td不加粗不居中）
tbody 表身
- tr>th（普通单元格）

thead和tfoot分别有一个 tbody可以有多个 tfoot一般放置在thead的后面，为了防止tbody中的内容过多，tfoot加载过慢的情况，但是虽然书写位置在前面，在页面中显示的时候，这部分依然在整个表格的最后面如果table用来搭建结构，我们只需写tr和td

1
<table>
2
    <tr>
3
        <td></td>
4
        <td></td>
5
        <td></td>
6
    </tr>
7
    <tr>
8
         <td></td>
9
         <td></td>
10
         <td></td>
11
    </tr>
12
</table>