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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 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
Yii中创建自己的Widget实例
2016/01/05 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php5与php7的区别点总结
2019/10/11 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python 检测图片是否有马赛克
2020/12/01 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
绿色环保标语
2014/06/12 职场文书
北京英语导游词
2015/02/12 职场文书
我爱我班主题班会
2015/08/13 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书