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 ...
随机推荐
- Java 中冒泡排序
package com.nf147.test; public class sort { public static void main(String[] args) { int arr[] = {11 ...
- EXCEL生成随机密码函数
CHAR(INT(RAND()*26+65))&INT(RAND()*9+1)&CHAR(INT(RAND()*26+97))&INT(RAND()*900+100)& ...
- python正则表达式整理
正则表达式在处理字符串时很大的作用,爬虫中也经常用到,下面就将一些常用正则表达式做一整理记录,方便以后查看. ^d 表示匹配以d开头的字符串 . 表示匹配任意字符串 * 表示前面 ...
- 【ABAP系列】SAP 获取工单和工序的状态
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 获取工单和工序的状态 ...
- 阅读笔记12-Java 面试题 —— 老田的蚂蚁金服面试经历
电话一面 1.自我介绍.自己做的项目和技术领域 2.项目中的监控:那个监控指标常见的哪些? 3.微服务涉及到的技术以及需要注意的问题有哪些? 4.注册中心你了解了哪些? 5.consul 的可靠性你了 ...
- UVa 11582 Colossal Fibonacci Numbers! 紫书
思路是按紫书上说的来. 参考了:https://blog.csdn.net/qwsin/article/details/51834161 的代码: #include <cstdio> # ...
- YOLOv3 算法的详细说明
YOLOv3没有太多的创新,主要是借鉴一些好的方案融合到YOLO里面.不过效果还是不错的,在保持速度优势的前提下,提升了预测精度,尤其是加强了对小物体的识别能力. 本文主要讲v3的改进,由于是以v1和 ...
- boost的libboost_system问题
最近把cpp代码从开发机放到eclipse时,遇到了不少路径问题. 安装boost的时候,其实很简单 wget http://sourceforge.net/projects/boost/files/ ...
- java 历年版本特征(简化)
无论是学习任何新知识,我都是从历史的角度着手,这让我对这些新知识是如何孕育出来的,有一个很好的理解 只从java 5-8,之后我也开始转nodejs了,感谢java伴随的这几年 Java5的新特性 ...
- hdu-4185.loiol_skimming(简单二分匹配模型)
/************************************************************************* > File Name: hdu-4185. ...