H5中新表单元素(email, url, number, color, date等)在chrome和firefox中支持情况

Html脚本如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form name="myform" action="" method="get">
		E-mail: <input type="email" name="email" /><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		URL: <input type="url" name="url" /><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		Number: <input id="input_num" type="number" name="number" onchange="changeNum()" /><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		Color: <input id="input_color" type="color" name="color" onchange="changeColor()" /><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		Date: <input id="input_date" type="date" name="date" onchange="changeDate()" /><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		Week: <input id="input_week" type="week" name="week"/><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		Month: <input id="input_month" type="month" name="month"/><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		Time: <input id="input_time" type="time" name="time"/><br />
		<input type="submit" />
	</form>
	<br>
	<form action="" method="get">
		DateTimeLocal: <input id="input_datetimeLocal" type="datetime-local" name="datetime_local"/><br />
		<input type="submit" />
	</form>
	<br>
	<progress value="50" max="100"></progress>
</body>
<script>
	function changeNum(){
		var num = document.getElementById("input_num").value;
		console.log("numType:"+typeof(num));
	}

	function changeColor(){
		var color = document.getElementById("input_color").value;
		console.log("color:"+color);
	}

	function changeDate(){
		var date = document.getElementById("input_date").value;
		console.log("dateType:"+typeof(date));
		console.log("date:"+date);
	}
	
</script>
</html>

Chrome(71.0.3578.98)中支持情况如下：
H5中新表单元素(email, url, number, color, date等)在chrome和firefox中支持情况
说明:
1.测试代码中所有input的type均有效。
2.对于E-mail和Url，用户如果输入不符合相关格式的内容，浏览器将拒绝提交并进行相关提示，如下图所示：

3.对于number，如果用户尝试在input上输入非数字，则浏览器会阻止将其输入input.
4.对于progress标签，属性max如果不写，value的值将会用0-1表示百分比。
5.相关的input的value的type为string格式。

Firefox(64.0)中支持情况如下：
H5中新表单元素(email, url, number, color, date等)在chrome和firefox中支持情况
1.对于email和url，如果不符合格式，浏览器也会给出相关提示并拒绝提交。
2.对于week，month和datetime-local，目前该版本火狐浏览器没有给出相关的支持。

H5中新表单元素(email, url, number, color, date等)在chrome和firefox中支持情况

相关推荐