HTML and CSS Reference
Using data-* attributes is simple: prefix the key with data- to form the attribute name
and assign it a value. In this example, you're binding a price to a quantity input field:
<input type="number" data-price="399.99" name="quantity">
You can then listen to this field for changes and multiply the value of the user's input (the
quantity) by the value of the data-price attribute to calculate the total price of the item.
You'll see how to retrieve data-* attribute values a little later. First, we want to talk about
the final feature we're introducing in this section: the new <output> element.
The <output> element
The name of this element explains its purpose—it's used to display output to the user. A
typical use case for the <output> element is displaying the result of a calculation based
on some data, such as that entered by a user in an <input> element. You'll learn how
to update the value of the <output> element later on, as the work progresses. For now,
you'll add these new features to your application code.
Step 4: Create the Order Details form section
The following listing contains the code for the Order Details section. Let's put the number
input type, min / max attributes, data-* attribute, and <output> element to work.
Notice how these new features can simplify programming tasks for HTML5-compatible
browsers. Add this code directly after the code from the previous listing.