Show Output
<!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>
