HTML5--新增和改良的input元素类型
2018-10-28 本文已影响0人
废废_siri
image
将图片从本地提交到服务器上。
<html>
<head>
<title>
image demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form action="">
<!--将图片从本地提交到服务器-->
<input type="image" width="100%" height="100%" src="E:\前端学习\image\dog.jpg">
</form>
</body>
</html>
Url
输入正确网址才能提交，否则不能提交。
<html>
<head>
<title>
url demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<!--输入正确网址才能提交，否则不能提交-->
<input type="url" name="url">
<input type="submit" value="提交">
</form>
</body>
</html>
输入正确邮箱地址才能提交，否则不能提交。
<html>
<head>
<title>
email demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form method="POST" action="http://localhost:5000/api/formtest/email">
<!--输入正确邮箱地址才能提交，否则不能提交-->
<input type="email" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
date、time、datetime、datetime-local、month、week
<html>
<head>
<title>
date demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--date日期-->
<input type="date">
<!--time时间-->
<input type="time">
<!--datetime UTC时间-->
<input type="datetime">
<!--datetime-local 本地时间-->
<input type="datetime-local">
<!--month月-->
<input type="month">
<!--week周-->
<input type="week">
</body>
</html>
number
用于应该包含数值的输入域。
<html>
<head>
<title>
number demo
</title>
<meta charset="UTF-8">
</head>
<body>
<input type="number" max="100" min="-10" value="10" step="5">number简用</number>
<h1>乘法运算</h1>
<input type="number" id="num_one">
<input type="number" id="num_two">
<input type="number" id="result">
<input type="button" value="计算" onclick="calculation()">
<script>
function calculation(){
//valueAsNumber:转换为数值类型
var n1 = document.getElementById("num_one").valueAsNumber;
var n2 = document.getElementById("num_two").valueAsNumber;
document.getElementById("result").valueAsNumber = n1 * n2;
}
</script>
</body>
</html>
range与output
range:进度条。output:输出。以下示例为range与output混用。
<html>
<head>
<title>
output demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--range:进度条-->
<input type="range" max="50" id="range" step="2" min="0" value="0" onchange="setter()">
<!--output标签:定义不同类型的输出，比如脚本的输出-->
<output id="output"></output>
<script>
function setter(){
var range_value = document.getElementById("range").value;
console.log(range_value);
document.getElementById("output").value = range_value;
}
</script>
</body>
</html>
color
系统颜色选择器。
<html>
<head>
<title>
color demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<input type="color" onchange="document.form.style.backgroundColor;">
<input type="text" list="greetings">
<datalist id="greetings">
<option>文件一</option>
<option>文件二</option>
</datalist>
</form>
</body>
</html>
