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中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python实现微信接口(itchat)详细介绍
2017/10/23 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
使用python3实现操作串口详解
2019/01/01 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
护士毕业实习感言
2014/03/05 职场文书
红色经典观后感
2015/06/18 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书