HTML5 - Kiểu nhập số
Kiểu nhập số
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Number Input Type</title>
<style>
input[type="number"]:valid{
outline: 2px solid green;
}
input[type="number"]:invalid{
outline: 2px solid red;
}
</style>
<script>
function getValue() {
var number = document.getElementById("mynumber").value;
alert(number);
}
</script>
</head>
<body>
<form>
<label for="mynumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="mynumber">
<button type="button" onclick="getValue();">Get Value</button>
</form>
<p><strong>Note</strong>: If you try to enter the number out of the range (1-10) or text character it will show error.</p>
</body>
</html>