image
將圖片從本地提交到服務(wù)器上。
<html>
<head>
<title>
image demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form action="">
<!--將圖片從本地提交到服務(wù)器-->
<input type="image" width="100%" height="100%" src="E:\前端學(xué)習(xí)\image\dog.jpg">
</form>
</body>
</html>
Url
輸入正確網(wǎng)址才能提交，否則不能提交。
<html>
<head>
<title>
url demo
</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<!--輸入正確網(wǎng)址才能提交，否則不能提交-->
<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時(shí)間-->
<input type="time">
<!--datetime UTC時(shí)間-->
<input type="datetime">
<!--datetime-local 本地時(shí)間-->
<input type="datetime-local">
<!--month月-->
<input type="month">
<!--week周-->
<input type="week">
</body>
</html>
number
用于應(yīng)該包含數(shù)值的輸入域。
<html>
<head>
<title>
number demo
</title>
<meta charset="UTF-8">
</head>
<body>
<input type="number" max="100" min="-10" value="10" step="5">number簡(jiǎn)用</number>
<h1>乘法運(yùn)算</h1>
<input type="number" id="num_one">
<input type="number" id="num_two">
<input type="number" id="result">
<input type="button" value="計(jì)算" onclick="calculation()">
<script>
function calculation(){
//valueAsNumber:轉(zhuǎn)換為數(shù)值類型
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:進(jìn)度條。output:輸出。以下示例為range與output混用。
<html>
<head>
<title>
output demo
</title>
<meta charset="UTF-8">
</head>
<body>
<!--range:進(jìn)度條-->
<input type="range" max="50" id="range" step="2" min="0" value="0" onchange="setter()">
<!--output標(biāo)簽:定義不同類型的輸出，比如腳本的輸出-->
<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
系統(tǒng)顏色選擇器。
<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>
