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 List Basics
• Meta Tag Basics
• Creating a Subscript or Superscript with HTML
• HTML noscript Tag
• Checkbox Basics
• The Font Tag
• HTML Text Tags Basics
• HTML Bulleted or Unordered List
• HTML Definition List
• Aligning an Image on Your Web Page