HTML5中如何实现新表单类型

发布时间:2021-07-21 09:22:29 作者:小新
来源:亿速云 阅读:159

小编给大家分享一下HTML5中如何实现新表单类型,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

demo.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        form {  
            width: 100%;  
            max-width: 640px;  
            min-width: 320px;  
            margin: 0 auto;  
            font-family: "Microsoft Yahei";  
            font-size: 20px;  
        }  
        input {  
            display: block;  
            width: 100%;  
            height: 30px;  
            margin: 10px 0;  
        }  
    </style>  
</head>  
<body>  
    <form action="">  
        <fieldset>  
            <legend>表单属性</legend>  
            <label for="">  
                email: <input type="email" name="email" >  
            </label>  
            <label for="">  
                tel: <input type="tel" name="tel" >  <!-- 本身不验证,自己添加验证 -->  
            </label>  
            <label for="">  
                url: <input type="url" name="url" >  
            </label>  
            <label for="">  
                number: <input type="number" name="number" step="5"> <!--输入的是步长的整倍数-->  
            </label>  
            <label for="">  
                search: <input type="search" name="search" >  <!--移动端出现的小键盘右下角是搜索按钮-->  
            </label>  
            <label for="">  
                range: <input type="range" name="range" value="100" min="0" max="300">  <!--默认最小0 最大100-->  
            </label>  
            <label for="">  
            <label for="">  
                color: <input type="color" name="color" >  
            </label>  
                time: <input type="time" name="time" >  
            </label>  
            <label for="">  
                date: <input type="date" name="date" >  
            </label>  
            <label for="">  
                month: <input type="month" name="month" >  
            </label>  
            <label for="">  
                week: <input type="week" name="week" >  
            </label>  
            <label for="">  
                datetime: <input type="datetime" name="datetime" >  
            </label>  
            <input type="submit" value="提交">  
        </fieldset>  
    </form>  
</body>  
</html>

以上是“HTML5中如何实现新表单类型”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. HTML5新表单元素有哪些
  2. HTML5中新的Input类型有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:Node.js中怎么实现一个AMF

下一篇:如何使用Flow forecast进行时间序列预测和分类的迁移

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》