表格表单基础及进阶

表格表单基础及进阶

持续更新中…
学习目标
1、表格的作用
2、表格的基本语法
3、表格的使用
4、表单的作用
5、表单的使用

1.表格的作用及基本语法

表格的作用:显示数据

table>tr>td: 表格>行>单元格

thead 表头

tbody 表体

tfoot 表尾

[注意]表头和表尾只有一个,表体可以有多个

th 单元格标题 文本加粗 上下左右都居中

2.数据表格补充及css属性

新增加:
border-spacing 单元格之间的间距;
	[注]必须给table添加
border-collapse:是否合并为单边框
    separate 默认值
    collapse 合并为单边框
table-layout 表格布局算法
    auto 自适应
    fixed 固定宽度
colgroup:列分组标签
    span="几列为一组"
    col:列分组标签细化,写在colgroup标签里面
    rules="组分割线"
    groups 组分割线
    rows 行分割线线
    cols 列分割线
    all 行和列分割线
    none 没有分割线
    [注]只能给table添加

2.表单的作用和表单的使用

label:关联标签

增加按钮的点击范围

使用label标签的for属性值和input标签的id值一样,即可增加按钮的点击范围,列如

  <label for="woman"><input type="radio" name="sex" id="woman" value="gril">女</label>

radio 单选按钮
	[注]同组的单选按钮的name值需要一致.进行互斥
CheckBox 多选按钮 name的值必须一样
disabled="disabled"禁用
enabled="可用"
checked="checked"选中
hidden 隐藏文本框

复选按钮

  <!-- 复选框 -->
    兴趣爱好
    <!-- checked选中 -->
    <input type="checkbox" name="hobby" checked disabled>唱歌
    <input type="checkbox" name="hobby">跳舞
    <input type="checkbox" name="hobby">玩游戏
    <input type="checkbox" name="hobby">写代码

单选按钮

  <!-- 单选框 -->

    <label for="woman"><input type="radio" name="sex" id="woman" value="gril">女</label>
    <input type="radio" name="sex" id="" value="boy">男<br>

下拉菜单

select>option 下拉菜单 >选项
selected="默认选中"

下拉框
    <select>
        <!--disabled禁用  -->
        <option value="" disabled>长沙</option>
        <!--  selected 默认选中-->
        <option value="" selected>怀化</option>
        <option value="">岳阳</option>
        <option value="">深圳</option>
    </select>

文本域

textarea:cols="字符宽度" rows="行数"
rows默认10行
默认可用拖拽
resize: none; 不可以拖拽

  <!-- 文本域 -->
    自我介绍
    <!--  resize: none; 不可以拖拽-->
    <textarea name="" id="" cols="30" rows="10" style="resize: none;">

    </textarea>

文件上传域

 <!-- 文件上传 -->
    <!--multiple文件上传多个,如果没有带这个属性,则一次性只能写一个  -->
    文件上传<input type="file" multiple="multiple">

图片提交按钮

<!-- 图片提交按钮 -->
    图片提交按钮 <input type="image" src="tb.jpg">

fieldset

fieldset>legend :表单字段级>表单字段级标题

[注]在一个fieldset中,只有一个legend,不能出现多个legend