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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
js选项卡的制作方法
2017/01/23 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
vue实现评价星星功能
2020/06/30 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python实现控制台进度条功能
2016/01/04 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
详解python eval函数的妙用
2017/11/16 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python 代码调试技巧示例代码
2020/08/11 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
材料加工硕士生求职信
2013/10/10 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
JavaScript 数组去重详解
2021/09/15 Javascript