HTML and CSS Reference
In-Depth Information
2.2. Building a form's user interface
The work in this section—building the UI—involves defining the HTML document struc-
ture, building the individual form sections, and allowing users to determine whether to save
or submit form details.
In this section, you'll learn
• How to provide users with widgets and data validation using HTML5 form
<in-
put>
element types and attributes
• How to store the price of each product with
data-*
attribute
s
• How to present subtotals and grand totals using the
<output>
element
• How to bypass form validation and save an incomplete form using the form attrib-
ute properties,
formnovalidate
and
formaction
We'll walk you through the UI work in seven steps:
• Step 1: Create index.html and load external files.
• Step 2: Create the Contact Details form section.
• Step 3: Build the Login Details form section.
• Step 4: Build the Order Details form section.
• Step 5: Build the Payment Details form section.
• Step 6: Bypass form validation and save form data.
• Step 7: Change the form action in older browsers.
First up, the HTML document.
2.2.1. Defining a form's basic HTML document structure
Before you begin, we recommend that you create a new directory on your system. Ideally,
it would be a location on a web server, but that's not a requirement for the example.
