Html5新的表单输入类型和元素(email,url,datalist,number,range,date,search,color,keygen,output)

最新推荐文章于 2022-04-01 18:20:24 发布

zyx198793

最新推荐文章于 2022-04-01 18:20:24 发布

阅读量1.7k

点赞数

分类专栏： Html5 文章标签： date search email output url html5

本文链接：https://blog.csdn.net/zyx198793/article/details/6714869

版权

Html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Html5 中input新增type:email,url,datalist,number,range,date,search,color,keygen,output(注意不同的浏览器支持不同)

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="js/modernizr.js"></script>
<script src="js/html5base.js"></script>
<script type="text/javascript">
 function showEmail()
 {
	document.getElementById("resault").value=document.getElementById("email").value
	 }
</script>

<title>Html5 中input新增type:email,url,datalist,number,range,date,search,color,keygen,output(注意不同的浏览器支持不同)</title>
</head>
<body>
<form action="back.html">
<table>
	<tr>
		<!-- email标签只验证是否输入@-->
		<td>email:</td>
		<td><input type="email" id="email" name="email"></input></td>
	</tr>
	<tr>
		<!-- url标签只验证是否输入http://  firefox支持datalist-->
		<td>url:</td>
		<td><input type="url" id="url" list="url_list"></input> <datalist
			id="url_list">
		<option label="baidu" value="www.baidu.com"></option>
		<option label="baidu" value="www.baidu.com"></option>
		<option label="baidu" value="www.baidu.com"></option>
		</datalist></td>
	</tr>
	<tr>
		<!-- firefox暂不支持number类型 -->
		<td>Number:</td>
		<td><input type="number" id="number" name="number" min="1"
			max="100" step="10" value="10"></input></td>
	</tr>
	<tr>
		<!-- range type 各种属性和number标签是一样的，value的意思是为它设置一个初始的值 -->
		<td>Range:</td>
		<td><input type="range" id="range" name="range" value="100"
			min="1" max="1000" step="100"></input></td>
	</tr>
	<tr>
		<!-- Date Tpyes:date,month,week -->
		<td>dateDate:</td>
		<td><input type="date" id="date1" name="date1"></input></td>

		<td>dateMonth:</td>
		<td><input type="month" id="date2" name="date2"></input></td>
		<td>dateWeek:</td>
		<td><input type="week" id="date3" name="date3"></input></td>
	</tr>
	<tr>
		<td>dateTime:</td>

		<td><input type="time" id="date4" name="date4"></input></td>
		<td>dateDatetime:</td>
		<td><input type="datetime" id="date5" name="date5"></input></td>
		<td>dateDatetime-local:</td>
		<td><input type="datetime-local" id="date6" name="date6"></input></td>
	</tr>
	<tr>
		<!-- Search Tpye -->
		<td>Search:</td>
		<td><input type="search" id="search" name="search"></input></td>
	</tr>
	<tr>
		<!-- Color Type 暂时只有opera支持 -->
		<td>color:</td>
		<td><input type="color" id="color"></input></td>
	</tr>
	<tr>
		<!-- kengen Type-->
		<td>kengen:</td>
		<td><keygen name="security"></td>
	</tr>
	<tr>
		<!-- output Type-->
		<td>output:</td>
		<td><output id="resault" name="output"
			onforminput="showEmail()"></output></td>
	</tr>
	<tr>
		<td><input type="submit" id="submit" name="submit"></input></td>
	</tr>

</table>
</form>
</body>
</html>

chrome:

firefox:

oprea:

safari:

IE暂时不支持

zyx198793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5新的表单输入类型和元素(email,url,datalist,number,range,date,search,color,keygen,output)

Html5 中input新增type:email,url,datalist,number,range,date,search,color,keygen,output(注意不同的浏览器支持不同) function showEmail() { doc
复制链接

扫一扫

专栏目录