阅读 42

# 表格、表单

一、表格

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中的-->
    复制代码

\

文章分类
前端
文章标签