HTML and CSS Reference
In-Depth Information
The min and max attributes
min
and
max
at-
tributes
6.0
N/A
10.0
10.6
5.0
These attributes define the minimum and maximum numbers that a user can enter in a
number
input field (or the bounds of a slider input using the
range
input type). Yet
data-*
attributes, another new form of attribute, allow an elegant solution for automatic-
ally calculating updated totals when users enter numbers.
Data-* attributes
The order form you're building will allow a user to enter a quantity for each of the products
in the form. The form should then automatically calculate the total price for this item and
the total order price. In order to do this, you'll need to know the price of a given item. In
the past, you may have inserted a hidden field in each row to hold the price for that item, or
perhaps you would have stored the price data in a JavaScript array and performed a look-
up to get the price for a given product. Neither solution is elegant—that's where HTML5
data-*
attributes come into play.
data-*
attributes
7.0
6.0
N/A
11.1
5.1
HTML5
data-*
attributes allow you to bind arbitrary key/value pair data to any element.
JavaScript can then read this data to perform calculations and further client-side manipula-
tion.
