Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

HTML5 Spinbox Control

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.

<input type="number">

A more complete example is shown below.

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

Spinbox Control Attributes

minminimum value
maxmaximum value
stepamount of increment or decrement
valuestarting value
sizewidth 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 SPAN Basics
• HTML title Tag
• Most Usefull ASCII Character Code Entities
• Image Map Basics
• The HTML BODY tag
• HTML center Tag
• HTML Horizontal Rule
• HTML Textarea Basics
• Set Form Controls Tab Order With tabindex Attribute
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections


Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268