表格和表单扩展

九阈

已于 2022-04-24 16:13:08 修改

阅读量112

点赞数

分类专栏： # CSS 文章标签： css

于 2021-08-17 14:26:07 首次发布

本文链接：https://blog.csdn.net/weixin_46048542/article/details/119737350

版权

CSS 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

表格扩展学习
border-collapse:collapse添加单线
empty-cells:hide隐藏空单元
border/rotate斜线分类
colgroup/col列分组
表单扩展之美化控件
:checked
position+opacity
表单扩展之新input控件
email电子邮件地址输入框
url网址输入框
number数值输入框
range滑动条
date/month/week日期控件
search搜索框
color颜色控件
tel电话号码输入框
time时间控件’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="hhtps://www.baidu.com">
        <input type="email"><br>
        <input type="url"><br>
        <input type="number"><br>
        <input type="range" min="0" max="10" value="8"><br>
        <input type="date"><br>
        <input type="month"><br>
        <input type="week"><br>
        <input type="color"><br>
        <input type="search"><br>
        <input type="tel"><br>
        <input type="time"><br>
        <input type="submit"><br>
    </form>
</body>
</html>

加粗样式 在这里插入图片描述
表单扩展之新属性
autocomolete自动完成默认on
autofocus获取焦点
required不能为空
pattern正则验证
只能包含三个字母的输入字段（不允许数字或特殊字符）：

pattern="[A-Za-z]{3}"

请添加图片描述

 <form action="https://www.baidu.com">
        <input type="text" name="username" autocomplete="off" autofocus required pattern="[a-z]+" >
    </form>

在这里插入图片描述
请添加图片描述

表单扩展之数据传输
method数据传输方式
enctype数据传输类型
name/value数据的键值对

 <form action="./data.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="filename">
        <input type="submit">
    </form>

在这里插入图片描述
表单扩展之标签
fieldset表单内元素分组
legend为fieldset元素定义标题
optgroup定义选项组

<body>
    <fieldset>
        <legend>登录</legend>
        <p>
            用户名：<input type="text">
        </p>
        <p>
            密码：<input type="password">
        </p>
    </fieldset>
    <select name="" id="">
        <optgroup label="水果"></optgroup>
        <option value="">苹果</option>
        <option value="">香蕉</option>
        <optgroup label="蔬菜"></optgroup>
        <option value="">空心菜</option>
        <option value="">茄子</option>
    </select>
</body>

在这里插入图片描述

增强表单—数据列表

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="" list="a">
    <datalist id="a">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手镯"></option>
    </datalist>
</body>
</html>