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控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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 面向对象 final类与final方法
2010/05/05 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
PHP实现的简单日历类
2014/11/29 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP实现图片压缩
2020/09/09 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
再论Javascript的类继承
2011/03/05 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python列表推导式操作解析
2019/11/26 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python代码如何注释
2020/06/01 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
十八届三中全会宣传方案
2014/02/21 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
新员工考核评语
2014/12/31 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js