html5 新增的input元素

最新推荐文章于 2023-05-02 11:48:17 发布

xiaopengyaonixi

最新推荐文章于 2023-05-02 11:48:17 发布

阅读量587

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/W3Chhhhhh/article/details/52714095

版权

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

新增的元素如下，不过测试目前在chrom支持相对较好，但也有不兼容，总体来说新特性在当前主流的浏览器中实现的不是特别好，最好辅助第三方js插件来实现。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>html5新增input类型用法</title>
</head> 
<body>
	<header >
		<h1>html5新增input输入类型</h1>		
	</header><!-- /header -->
	<article>
		<section>
			<header >
				<h2>emial类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="email" name="user_emial"/>
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>url类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="url" name="user_url"/>
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>number类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="number" name="user_number" min="1" max="20" step="4"/>
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>range类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="range" name="user_range" min="1" max="20"/>
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>data类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="date" name="user_date" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>month类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="month" name="user_month" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>week类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="week" name="user_week" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>time类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="time" name="user_time" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>datetime类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="datetime" name="user_datetime" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>datetime-local类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="datetime-local" name="user_datetime" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>search类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="search" name="user_datetime" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
		<section>
			<header >
				<h2>tel类型的使用</h2>
			</header> 
			<article>
				<form action="#" method="get">
					 <input type="tel" name="user_datetime" />
					 <input type="submit" value="提交" />
				</form>
			</article>
		</section>
	</article>
</body>
</html>

xiaopengyaonixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 新增的input元素

新增的元素如下，不过测试目前在chrom支持相对较好，但也有不兼容，总体来说新特性在当前主流的浏览器中实现的不是特别好，最好辅助第三方js插件来实现。 html5新增input类型用法 html5新增input输入类型 emial类型的使用
复制链接

扫一扫