html5中的表格和表单总结

小李USER

已于 2022-03-15 16:34:51 修改

阅读量780

点赞数 3

分类专栏：待整理文章标签： html5

于 2022-03-15 16:29:12 首次发布

本文链接：https://blog.csdn.net/m0_59110131/article/details/123490528

版权

待整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、table

1、数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

2、单独创建table标签会发现网页不会显示任何内容，原因是table标签代表一个表格整体，只有往里面填充元素才会把table撑起来（网页有展现），证明table标签是块级元素，但是table宽度是由内容来决定。

3、tr （table rows）定义表格行，th 元素定义表头单元格（居中），td （table data）元素定义标准单元格（垂直靠左居中），1个表格定义一个caption。浏览器呈现顺序：thead、tfoot、tbody。

4、col标签不可与colgroup同时使用span属性。

5、cellpadding：单元边沿与内容之间的空白，cellspacing单元格之间的空白。

<!-- colgroup标签要放到caption之后，thead之前 -->
<colgroup colgrouspan="2" style="width:100px;">
<col style="background: red">
</colgroup>

表格案例：

    <table>
        <caption>简历</caption>
        <thead>
            <tr>
                <th colspan="2">编号和姓名</th>
                <th>性别</th>
                <th>家庭住址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" rowspan="2">照片</td>
                <td rowspan="2">男</td>
                <td>云南·昆明</td>
            </tr>
            <tr>
                <td>云南·丽江</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>照片</td>
                <td>云南·大理</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

        table {
            /* 指定边框之间距离 */
            /* border-spacing: 0px; */
            /* 表格塌陷（合并） */
            border-collapse: collapse;
            margin: 150px auto;
            border: 1px solid black;
        }

        td {
            border: 1px solid black;
            vertical-align: middle;
            text-align: center;
        }

        tbody>tr:nth-child(odd) {
            background-color: #bfa;
        }

表格的应用：

<div class="box1">
    <div class="box2"></div>
</div>

        .box1 {
            width: 300px;
            height: 300px;
            background-color: #bfa;
            /* 将元素设置为单元格 */
            display: table-cell;
            vertical-align: middle;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin:auto;
        }

二、表单

1、数据提交到服务器，有的指定一个name值，有的指定value值。

2、一个表单由三个部分组成，表单标签、表单域（表单控件）、表单按钮。

3、readonly只读 disabled禁用 hidden隐藏 required必须要填写字段非空判断 pattern正则表达式

4、action指定表单向服务器发送提交数据地址，可以是网站html地址，也可以是一个请求处理地址。get提交：输入信息显示在地址栏中，请求内容长度有限制（不可以传输大文件），请求速度快高效。post提交：输入信息不会显示在地址栏，请求内容长度无限制(可以传输大文件，重要数据)，请求速度慢。

5、value是元素的初始值，指定input 元素 value 的值。type为value时必须指定一个值。

label方式一:

for属性,让标签和指点的input元素建立关联,多数使用在单选或复选

给单选或复选后面的文字加入label标签,for属性值是input的id值

label方式二:

将input元素包含在lable标签中

如果将input放置在label标签之间,那么for属性就可以不可以用。

optgroup定义选项组，用label属性来命名。

6、datalist数据列表，input的list属性值和datalist的id属性值保持一致，option来定义列表项。option里面的文本不是作为展示内容，而是作为补充说明部分。我们只需要给input输入框设置大小，datalist会随之适配大小。

7、文件域，文件类型为accept ，值为image、png、audio、video、MIME_type，一次允许选择多个文件 multiple="multiple"。

    <style>
        .dinput {
            width: 450px;
            height: 30px;
            line-height: 30px;
        }
    </style>

 <!-- text默认宽度为 20 个字符 -->
    <form action="result.html" method="get">
        <input type="text" id="demoInput">
        <p>姓名: <input type="text" name="username" maxlength="8" size="30" value="admin"></p>
        <p><label>姓名: </label><input type="text" name="李克伟" placeholder="请填写完整"></p>
        <p>密码：<input type="password" name="pwd"></p>
        <!-- 数组/字母/下划线[5位数以上]@字母/数字[2-5位].com/cn/[.ccom.cn] -->
        <p>邮箱: <input type="email" name="email" id=""></p>
        <p>搜索: <input type="search" name="search" id=""></p>
        <p>URL:<input type="url" name="url" id=""></p>
        <p>号码: <input type="tel" name="tel" id=""></p>
        <p>正则：<input type="text" name="diymail"
                pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$//^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
        </p>
        <p>数值框: <input type="number" name="num" id="" min="1999" max="" step="12"></p>
        <p>日期字段（时分）: <input type="time" name="date" id=""></p>
        <p>日期字段（年月）: <input type="mouth"></p>
        <p>日期字段（年周）: <input type="week"></p>
        <p>日期字段(年月日): <input type="date"></p>
        <p>日期字段（年月日时分）: <input type="datetime-local"></p>
        <p>数值模块\滑块: <input type="range" name="range" id="" min="0" max="100" step="2">100</p>
        <p>
            <input type="radio" value="boy" name="sex" checked>男
            <input type="radio" value="girl" name="sex" />女
        </p>
        <p>
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="chat" name="hobby">聊天
        </p>
        <p>工作日：
            <select name="列表名称" id="">
                <option value="">星期一</option>
                <option value="">星期二</option>
            </select>
        </p>
        <p>拾色器: <input type="color" name="color" id=""></p>
        <p>
            <input type="text" name="course" list="datalist" class="dinput">
            <datalist id="datalist">
                <option value="HTML5">最新版本的HTML</option>
                <option value="Java">最热门的编程语言</option>
                <option value="JavaScipt">最流行的脚本语言</option>
                <option value="CSS">层叠样式表</option>
                <option value="BootStrap">响应式框架</option>
                <option value="Vue">最流行的JS框架</option>
            </datalist>
        </p>
        <fieldset>
            <legend>个性展示:</legend>
            Name: <input type="text" size="30"><br>
            Email: <input type="text" size="30"><br>
            Date of birth: <input type="text" size="10">
        </fieldset>
        <p><input type="image"src="https://img2.baidu.com/it/u=4098779797,3907415900&fm=253&fmt=auto&app=120&f=JPEG?w=870&h=492"></p>
        <!--文本域默认字体是等宽字体,通常是 Courier-->
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
        <p><input type="file" name="files"></p>
        <button type="submit">提交</button>
        <input type="submit" name="submit" value="提交">
        <p><input type="button" value="上传" name="upload"></p>
        <button type="reset">重置</button>
        <p><input type="button" name="btn1" value="点击变长"></p>
    </form>

        //demoInput   去页面中查找id为demoInput的元素
        var demoInput = document.getElementById("demoInput");
        demoInput.oninput = function () {
            console.log(this.value)
        }