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

html5 css3表单新特性

时间:2015-01-10 22:24:25      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:html5   css3   表单   url   email   

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr


补丁下载

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css"></style>
<script type="text/javascript">
function showValue(newValue)
 {
 document.getElementById("range").innerHTML=newValue;
 }
</script>
</HEAD>

<BODY>
<p>
	<label for="email">Your Email address</label>
	<input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required aria-required="true">
</p>
<p>
	<label for="yearOfCrime">Year Of Crime</label>
	<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required aria-required="true">
</p>
<p>
	<label for="web">Your Web address</label>
	<input type="web" name="web" type="url" placeholder="www.mysite.co">
</p>
<p>
	<label for="search">Search the site...</label>
	<input id="search" name="search" type="search" placeholder="Wyat Earp" autofocus>
</p>
<p>
	<label for="tel">Thphone(so we berate you if you're wrong)</label>
	<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true">
</p>
<p>
	 <label for="name">Your Name (first and last)</label>
	 <input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}"
	 placeholder="Dwight Schultz" required aria-required="true">
</p>
<p>
	 <label for="color">Your favorite color</label>
	 <input id="color" name="color" type="color">
</p>
<p>
	 <label for="date">Your favorite date</label>
	 <input id="date" name="date" type="date">
</p>
<p>
	 <label for="week">Your favorite date</label>
	 <input id="week" name="week" type="week">
</p>
<p>
	 <label for="time">Your favorite time</label>
	 <input id="time" name="time" type="time">
</p>
<p>
	 <label for="datetime">Your favorite datetime</label>
	 <input id="datetime" name="datetime" type="datetime">
</p>
<p>
	 <label for="range1">Your favorite datetime</label>
	 <input id="range1" name="range1" type="range" min="1" max="10" value="5">
</p>
<p>
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"
value="5" onchange="showValue(this.value)"><span id="range">5</span>
</p>
</BODY>
</HTML>


html5 css3表单新特性

标签:html5   css3   表单   url   email   

原文地址:http://blog.csdn.net/ztt_1119/article/details/42588411

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