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 ...
随机推荐
- SQL JOIN INNER LEFT RIGHT FULL
1.引用2个表(效果同INNER JOIN) SELECT Persons.LastName, Persons.FirstName, Orders.OrderNo FROM Persons, Ord ...
- 用CSS代码编写简易轮播图
废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...
- 大数据笔记（九）——Mapreduce的高级特性（B）
二.排序 对象排序 员工数据 Employee.java ----> 作为key2输出 需求:按照部门和薪水升序排列 Employee.java package mr.object; impo ...
- 如何实现echarts组织结构图节点的收缩
echarts本身没有组织结构图的节点收缩功能,因为项目需求要用到此功能. 引入的echarts必须是2版本的,因为3.0取消了对组织结构图的支持.下载2版本的源码,找到关于onclick事件那部分的 ...
- Vue点击切换Class变化，实现Active当前样式
刚自学Vue不久,所以还不太熟,所以直接上代码. 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个 ...
- mktime夏令时处理
https://www.cnblogs.com/dongzhiquan/archive/2011/11/05/2237075.html 我们的最终目的是把字符串格式的时间转换为内部使用的“日历时间”, ...
- canvas万花筒案例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Ti ...
- 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第3节 线程同步机制_1_线程安全问题的概述
- MySQL 修改密码，
ALTER USER 'root'@'localhost' IDENTIFIED BY 'admin';
- C#线程中安全访问控件（重用委托，避免繁复的delegate,Invoke）总结
1.第一种,不安全,当线程过多后,timer控件和线程中同时访问窗体控件时,有时会出现界面重绘出错. public frmMain() { InitializeComponent(); System. ...