Table form basics and advanced

Table form basics and advanced

Continuously updating...
Learning Objective
1, Function of Form
2, Basic Grammar of Form
3, Use of Form
4, Function of Form
5, Use of Form

1. The function and basic grammar of tables

The role of the table: display data

table>tr>td: table>row>cell

thead header

tbody table body

tfoot

[Note] There is only one header and footer, and there can be more than one body

The title text of the th cell is bold, top, bottom, left, and right

2. Data table supplement and css attributes

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

2. The role of the form and the use of the form

label: associated label

Increase button click range

Use the for attribute value of the label tag to be the same as the id value of the input tag to increase the click range of the button, such as

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

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

check button

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

single button

  <!-- 单选框 -->

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

Drop-down menu

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

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

text field

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

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

    </textarea>

file upload domain

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

Image submit button

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

fieldset

fieldset>legend : form field level > form field level title

[Note] In a fieldset, there is only one legend, and multiple legends cannot appear