不是html5中新增的input类型,HTML5--新增和改良的input元素类型

image

将图片从本地提交到服务器上。

image demo

Url

输入正确网址才能提交，否则不能提交。

url demo

email

输入正确邮箱地址才能提交，否则不能提交。

email demo

date、time、datetime、datetime-local、month、week

date demo

number

用于应该包含数值的输入域。

number demo

number简用

乘法运算

function calculation(){

//valueAsNumber:转换为数值类型

var n1 = document.getElementById("num_one").valueAsNumber;

var n2 = document.getElementById("num_two").valueAsNumber;

document.getElementById("result").valueAsNumber = n1 * n2;

}

range与output

range:进度条。output:输出。以下示例为range与output混用。

output demo

function setter(){

var range_value = document.getElementById("range").value;

console.log(range_value);

document.getElementById("output").value = range_value;

}

color

系统颜色选择器。

color demo

文件一

文件二