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 ...
随机推荐
- [CSP-S模拟测试]:string（线段树）
题目描述 给定一个由小写字母组成的字符串$s$. 有$m$次操作,每次操作给定$3$个参数$l,r,x$. 如果$x=1$,将$s[l]~s[r]$升序排序: 如果$x=0$,将$s[l]~s[r]$ ...
- 大数据笔记（十二）——使用MRUnit进行单元测试
package demo.wc; import java.util.ArrayList; import java.util.List; import org.apache.hadoop.io.IntW ...
- VS2015中添加QT5.9.0插件
https://blog.csdn.net/hhhuang1991/article/details/79768595 VS2015里使用QTDIR路径查找QT开发包目录 路径配置操作系统环境变量里添加 ...
- 关于【C++项目：无法解析的外部符号】
1,基本原因,[链接器]->[附加库目录]没有填写相关库的路径.或没有在[链接器]->[输入]->[附加依赖项]中填写相关库的名称 2,高级原因:如果不是1的原因,那就有可能是平台与 ...
- Laravel 在homestead 平台上命令
使用以下命令查看 Heroku 站点地址: $ heroku domains
- oracle 表连接 - sort merge joins 排序合并连接
https://blog.csdn.net/dataminer_2007/article/details/41907581一. sort merge joins连接(排序合并连接) 原理 指的是两个表 ...
- 【转】mackbook wifi卡死未响应的问题
原文:http://tieba.baidu.com/p/6140144143?traceid= 1. wifi未响应了,紧急处理法:打开活动监视器,搜索airportd,结束掉进程 2. 彻底解决办法 ...
- mysql_Qcahce
.cpu mem disk 如果是固态硬盘ssd那就是高速公路 火箭 高铁 普通公路 mysql 配置文件:windows 下 mysql.ini linux:my.cnf lamp路径:/opt/l ...
- 非web工程，打jar放shell执行
作为6年经验的程序员,一直在搞web服务应用开发,今天领导被吐槽了,只会web方面的东东,最基本的打包啥啥都不会.. 一般开发工程都是web项目,突然要求开发非web,不用tomcat装(浪费端口号) ...
- VMware vMotion 配置要求
目录 目录 vCenter 支持 vMotion 的前提 条件 vMotion 的主机配置 vMotion 共享存储器要求 vMotion 网络要求 最后 vCenter 支持 vMotion 的前提 ...