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>

效果：

email

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="20"  min="10" max="100" step="10">

</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

相关阅读:
关于String
MySQL中count(1)、count(*) 与 count(列名) 的执行区别？
OSC的原理
 [java] 模拟QPS
[java] 简单的ConcurrentHashMap
[java] 线程池
 [Guava] EventBus
[jvm]垃圾回收算法
 [zookeeper] Zookeeper概述
 [NS2]TCL语言基本语法
原文地址：https://www.cnblogs.com/guangzhou11/p/7468974.html