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)中支持情况如下：
说明:
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)中支持情况如下：
1.对于email和url，如果不符合格式，浏览器也会给出相关提示并拒绝提交。
2.对于week，month和datetime-local，目前该版本火狐浏览器没有给出相关的支持。
787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
