HTML5-新增type属性

最新推荐文章于 2021-06-15 19:59:20 发布

943学前端

最新推荐文章于 2021-06-15 19:59:20 发布

阅读量832

点赞数

分类专栏： HTML5笔记文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_49924309/article/details/107852516

版权

HTML5笔记专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        用户名: <input type="text" name="userName"> <br> 密码：
        <input type="password" name="userPwd"> <br>
        <!-- email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交 -->
        邮箱：<input type="email"> <br>
        <!-- tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。    如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看 -->
        电话：<input type="tel"> <br>
        <!-- 验证只能输入合法的网址：必须包含http:// -->
        网址：<input type="url"> <br>
        <!-- number: 只能输入数字(包含小数点)，不能输入其他的字符
        max：最大值
        min：最小值
        value：默认值 -->
        数量：<input type="number" value="60" max="100" min="0"> <br>
        <!-- 提交 -->
        <input type="submit"> <br>
        <!-- search: 可以提供更人性化的输入体验 -->
        请输入商品名称：<input type="search"> <br>
        <!-- range:范围 -->
        范围：<input type="range" max="100" min="0" value="50"> <br> 颜色：
        <input type="color"> <br>
        <!-- 日期时间相关 -->
        <!-- time：时间：时分秒 -->
        时间：<input type="time"> <br>
        <!-- date:日期：年月日 -->
        日期：<input type="date"> <br>
        <!-- datetime:大多数浏览器不能支持datetime，只能苹果下面的safari支持 -->
        日期时间：<input type="datetime"> <br>
        <!-- datetime-local:日期和时间 -->
        日期时间：<input type="datetime-local"> <br>
        <!--注释防止中文跑上去  -->
        月份：<input type="month"> <br>
        <!--注释防止中文跑上去   -->
        星期：<input type="week"> <br>
        <!-- 提交 -->
        <input type="submit">
    </form>
</body>

</html>