HTML and CSS Reference
In-Depth Information
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.
