# 表格、表单一、表格：相关属性、相关属性（合并、边框塌陷）二、表单：表单元素、常用输入框类型、下拉列表、多行文本框

一、表格

1、相关元素：

table：定义一个表格，表格最外层的元素
th：表头
tr：行
td：单元格
caption：标题
thead：页眉
tbody：主题内容

tfoot：页脚，一般只有一行，一行只有一个格子

<body>
    <table>
        <caption>信息表</caption>
        <!-- thead、tbody、tfoot   可以省略 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
        </thead>
        <tbody>
            <!-- 第一行 -->
            <tr>
                <td>张红红</td>
                <td>女</td>
                <td>成都</td>
                <td>18</td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>李明明</td>
                <td>男</td>
                <td>成都</td>
                <td>19</td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td colspan="2">01</td>
                <td>02</td>
                <td rowspan="2">03</td>
                <!-- 合并后会多出来一个单元格，需手动删除 -->
                <!-- <td>04</td> -->
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <!-- <td >04</td> -->
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">身份信息</td>
            </tr>
        </tfoot>
    </table>
</body>

2、相关属性

colspan：横向合并
rowspan：纵向合并

注：前面两个属性直接写在html中

border-collapse：边框塌陷

table,td{
    border: 1px solid ;
    border-collapse: collapse;
}

二、表单

1、表单元素

form：定义一个表单区域，可以获取用户输入的数据
input：输入框
select：下拉列表
option：下拉列表的选项
textarea：多行文本框

2、输入框类型

text：文本框

<form action="">
<input type="text" placeholder="输入提示内容">
        <!-- readonly  表示只读 内容通过value输入 -->
        <input type="text" value="这个内容只读" readonly>
        <!-- required  表示必填  没有填提交会有提示 -->
        <input type="text" required>
        <!-- disabled  表示禁用 -->
        <input type="text" disabled>
    </form>

password：密码框

 <!-- maxlength  设置可输入的长度 -->
        <input type="password" name="" id="" maxlength="6">

button：按钮（没有提交功能）

<input type="button" value="单纯的按钮">

submit：提交按钮

 <input type="submit" value="提交按钮">
  <!--button元素也是提交按钮
   提交按钮：具有提交功能，会发生跳转-->

reset：重置按钮
```
<input type="reset" value="重置">
```

radio：单选框

<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女
<!-- 通过name属性，设置相同的属性值实现单选效果-->
 <label for="male">男</label>
 <input type="radio" name="gender" id="male">
 <label for="female">女</label>
 <input type="radio" name="gender" id="female">
<!--通过id绑定lable标签的文字，使点击文字时也可选中-->

checkbox：多选框

<input type="checkbox" name="" id="">
        肉末茄子
        <input type="checkbox" name="" id="">
        蒜苗回锅
        <input type="checkbox" name="" id="">
        小炒肉
        <input type="checkbox" name="" id="" checked>
        米饭
<!-- 文字也可写在最前面  通过checked可以设置默认选择checked完整写法应该是checked:"checked" 但当属性与属性值相同时可以简写，这种叫做标志性属性，也叫特殊属性-->

file：选择文件
```
<input type="file" name="" id="">
```
(新增)
email：输入邮件地址，没有@会提示
```
<input type="email" name="" id="">
```

month：可选择月份

<input type="month" name="" id="">
 <!-- 可选择具体日期 -->
 <input type="date" name="" id="">
 <!-- 具体到分钟 -->
 <input type="datetime-local" name="" id="">

3、下拉列表

select

 <select name="" id="">
            <option value="">成都</option>
            <option value="">上海</option>
            <option value="" selected>重庆</option>
            <option value="">杭州</option>
            <option value="">北京</option>
        </select>
 <!-- selected表示默认该选项在页面上显示 -->

4、多行文本框

textarea

 <textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
<!-- cols表示行的长度，row表示列的长度，且该文本框默认是可拉伸的   
resize: none可控制其固定尺寸，不可拉伸，该属性是CSS中的-->