HTML5中inpunt新增

YourLie_in_April

已于 2022-04-01 14:12:10 修改

阅读量1.6k

点赞数 1

分类专栏： HTML、CSS 文章标签： css html5

于 2022-04-01 14:10:48 首次发布

本文链接：https://blog.youkuaiyun.com/YourLie_in_April/article/details/123895822

版权

HTML、CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML5中input元素新增的type属性值，如email、url、color等，以及新增的属性，如max、min、step等，用于实现更丰富的输入类型和验证功能。同时，还提及了placeholder、required和pattern属性，提供了更佳的用户体验和数据验证能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

type新增属性值：

email：电子邮箱地址文本框（提交表单时会自动校验email格式）。

url：网页地址文本框（提交表单时会自动校验网站格式）。

color：选取颜色（后面通过js方法：decodeURIComponent('上传颜色数据')颜色转化为16进制表达）。

search：搜索框。

number：数字框。

range：数字滑块。

date：年、月、日。

month：年、月。

week：年、周。

time：时间（小时、分钟）。

datetime：UTC时间。

datetime-local：本地时间。

input新增属性：

max：最大值。

min：最小值。

step：数据间隔（步长）。

value：默认文本值。

placeholder：文本框提示信息（在输入内容后提示内容消失）。（适合于text、search、url、email和password 等类型。）

required：添加非空验证。（适合于text、search、url、email、password、number、checkbox、radio、file 等类型。）

pattern：添加正则验证。（^X：表示以x开头、[ABC]：表示在abc中任意选取一个、、\d：表示数字、{X,Y}：表示x-y位字符、A-Za-z：表示大小写英文字母、u9FA5：表示中文、|：表示或。）

示例：

<!DOCTYPE html>
<html>
<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>
    <style>
        *{padding: 0;margin: 0;}
        ul{
            width: 100%;
            height: 60px;
            line-height: 60px;
            list-style: none;
            background: #FE2631;
        }
        li{
            color: #EBECEA;
            font-weight: 700;
            font-family: 幼圆;
            font-size: 14px;
            display: inline-block;
            padding: 0 15px;
        }
        .title{
            padding-left: 15px;
        }
        .yi{
            padding-left: 30px;
            padding-right: 20px;
        }
        .xj{
            padding-left: 13px;
            width: 0px;
            height: 35px;
            background: url(./素材/image/home_sprite.png) no-repeat;
            background-position: 0px -62px;
        }
        .er{
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div><img src="./素材/image/logo.jpg" class="title"></div>
        <nav>
            <div>
                <ul>
                    <li class="yi">全部商品详细分类</li>
                    <li class="xj"></li>
                    <li class="er">尾品会</li>
                    <li>图书</li>
                    <li>电子书</li>
                    <li>服装</li>
                    <li>运动户外</li>
                    <li>婴孕童</li>
                    <li>家具</li>
                    <li>当当优品</li>
                    <li>电器城</li>
                    <li>当当超市</li>
                    <li>海外购</li>
                </ul>
            </div>
        </nav>
    </div>
</body>
</html>

总结：望各位大佬指正。