html5 新增和改良的input 类型实例
url
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>s</title>
</head>
<body>
url提交成功
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form action="test1.html" method="post">
<input type="url" name="url" value="http://baidu.com">
<input type="submit" value="提交">
</form>
</body>
</html>
效果：
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>s</title>
</head>
<body>
email提交成功
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form action="test1.html" method="post">
<input type="email" name="email" value="1774761877@qq.com">
<input type="submit" value="提交">
</form>
</body>
</html>
效果：
date
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form >
<input type="date" name="date" value=""> </form>
</body>
</html>
效果：
time
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form >
<input type="time" name="time" value="10:00"> </form>
</body>
</html>
效果：
month
test..html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form>
<input type="month" name="month" value="2017-9-3"> </form>
</body>
</html>
效果：
week
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form>
<input type="week" name="week" value=""> </form>
</body>
</html>
效果：
number
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form>
<input type="number" name="number" value="" min="" max="" step=""> </form>
</body>
</html>
效果：
range
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form>
<input type="range" name="range" value="20" min="10" max="100" step="5"> </form>
</body>
</html>
效果：
color
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form>
<input type="color" name="color"
onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value" >
<span id="currentColor"> </span>
</form>
</body>
</html>
效果：
2017-09-03 11:02:15
html5 新增和改良的input 类型实例的更多相关文章
- [html5] 学习笔记-改良的input元素种类
在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...
- HTML5增加与改良的input元素
h5中form表单中input新增的属性值 在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法.那么在HTML5中新加入的这个功能与之前咱们使用的功能区 ...
- HTML5 改良的 input 元素的种类
html5中增加改良的input 元素 . 在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用 ...
- 使用 HTML5 input 类型提升移动端输入体验
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 使用 HTML5 input 类型提升移动端输入体验（键盘）
在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
- HTML/HTML5 Input类型&&表单
1.HTML 中"不常用"input类型中的属性值: disabled:输入字段禁用: maxlength:输入字段的最大字符长度: readonly:输入字符只读,无法修改: s ...
- 使用 HTML5 input 类型提升移动端输入体验(转翻译)
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...
- Html5学习进阶三 Input 类型
HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range Date ...
随机推荐
- andriod\iphone视频禁止全屏播放
x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" ...
- 北风设计模式课程---最少知识原则（Least Knowledge Principle）
北风设计模式课程---最少知识原则(Least Knowledge Principle) 一.总结 一句话总结: 最少知识原则(Least Knowledge Principle),或者称迪米特法则( ...
- 尚硅谷Docker---1-5、docker简介
尚硅谷Docker---1-5.docker简介 一.总结 一句话总结: docker是环境打包:有点像windows镜像 docker的实质:缩小版.精细版.高度浓缩版的一个小型的linux系统 1 ...
- 关于MonoBehaviour的单例通用规则
长久以来,对于基于MonoBehaviour的单例总是心有梗结,总觉得用得很忐忑,今天,终于有时间思考和总结了下,理清了想通了.代码和注释如下: 其中GameLogic是我们自己的控制游戏生命周期的管 ...
- 基础：高通bring up camera【转】
本文转载自:http://blog.csdn.net/liwei16611/article/details/53056710 bring UP 需要做的工作 1.kernelspace senso ...
- Oracle12c ASMM和hugepage
在Oracle 12c,测试发现默认并不启用AMM 特性,而是使用了ASMM.因为在X86 架构下的linux 平台中,配置hugepage时,也是需要关闭AMM,使用ASMM特性. AMM分配内存的 ...
- shell脚本一一项目5
主题:一键查看占用内存.cpu高的进程 echo "----------------cpu top 10 list----------------"ps -eo pid,pcpu, ...
- Week 9 - 638.Shopping Offers - Medium
638.Shopping Offers - Medium In LeetCode Store, there are some kinds of items to sell. Each item has ...
- axios 获取不到数据错误
1.问题: 打算学习下vue,但是vue-resource作者已经不更新了,并且大家都建议用axios来进行前后端交互,所以就从学习axios开始. 但是在使用 axios 的过程中,自己写的接口竟然 ...
- Krustal重构树
zz:https://blog.csdn.net/ouqingliang/article/details/81206050 Kruskal重构树基于Kruskal算法.在执行算法过程中,Kruskal ...