HTML5 新表单类型示例代码


Posted in HTML / CSS onMarch 20, 2018

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 新表单类型示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 #HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 #HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 #HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 #HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 #HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 #HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 #HTML / CSS
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Django models.py应用实现过程详解
2019/07/29 Python
python同时替换多个字符串方法示例
2019/09/17 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
铭立家具面试题
2012/12/06 面试题
工程项目经理岗位职责
2013/12/15 职场文书
加工操作管理制度
2014/01/19 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
保安队长职务说明书
2014/02/23 职场文书
大学毕业感言200字
2014/03/09 职场文书
党员实事承诺书
2014/03/26 职场文书
幸福终点站观后感
2015/06/04 职场文书
红色电影观后感
2015/06/18 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
浅谈MySQL中的六种日志
2022/03/23 MySQL
Python利用capstone实现反汇编
2022/04/06 Python