码迷,mamicode.com
首页 > Web开发 > 详细

html5 新增和改良的input 类型实例

时间:2017-09-03 12:22:12      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:min   form   doctype   time   content   onchange   pos   str   change   

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

 

html5 新增和改良的input 类型实例

标签:min   form   doctype   time   content   onchange   pos   str   change   

原文地址:http://www.cnblogs.com/guangzhou11/p/7468974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!