Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

HTML5 Spinbox Control

By Stephen Bucaro

One of the new elements added with html5 is the number control (<input type="number" ) which most web designers call the "spinbox" control because it is rendered as a box tiny up/down arrows. You can click on one of the arrows to increase or decrease the number displayed in the box. If you prefer, you can type directly into the field. The basic html code for a spinbox is shown below.

A more complete example is shown below.

<input type="number" min="2" max="10" step="2" value="6" size="4">

Spinbox Control Attributes

min minimum value

max maximum value

step amount of increment or decrement

value starting value

size width of input box based on current font size

Shown below is some practical code to access the contents of the spinbox control. The additional attributes are id which allows the JavaScript getElementById method to access the element, and the onchange event to call the JavaScript function.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>

<script>
function displayNumber()
{

   var spinNum = document.getElementById("test").value;
   document.getElementById("show").value = spinNum;
}
</script>

</head>
<body>

<input type="text" id="show" size="4"><br />
<input type="number" id="test" min="0" max="12" step="2" value="4" size="4" onchange="displayNumber()">

</body>
</html>

More HTML Code:
• HTML Definition List
• HTML Blockquote Basics
• The HTML BODY tag
• Line Break Basics
• HTML Text Tags Basics
• Add an Image to a Web Page
• The HTML Head Tag
• HTML Numbered or Ordered List
• Checkbox Basics
• HTML5 Input Type - Email