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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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学习之数据类型之间的转换代码
2011/05/29 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
Python作用域用法实例详解
2016/03/15 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
团代会宣传工作方案
2014/05/08 职场文书
会计岗位职责范本
2015/04/02 职场文书
离职信范本
2015/06/23 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
mysql数据库实现设置字段长度
2022/06/10 MySQL