HTML5 forms - HTML5 and CSS3 - page 53

Web addresses
Forms in which you enter a URL are also common. Think about the
last time you posted a comment on a blog; it's likely the form included a
URL field. Like email addresses, valid URL s have some esoteric rules,
but HTML5 means you don't need to worry about what they are.

Creating a URL control is as easy as
changing the type:

<input type="url">

Again, there's no visual indication that a
URL is required. But when you attempt
to submit an invalid URL , you get a
similar message.

Elements for user feedback
Sometimes you may want to show the user a result—something calcu-
lated from the values on the rest of the form. Think of a shopping cart
that shows the running total of the user's expenditures. In HTML4 , you
could use JavaScript to insert the value into a read-only field, or you
might have written the value into the HTML content, but there was no
way to indicate that the field or the value had any sort of relationship to
the form values or even was part of the
form at all. HTML5 changes all that with
its three built-in form controls for user
feedback: output, progress, and meter.

Output Progress Meter

13 8 8

The <output> element
The <output> element allows you to
declare a relationship between one or
more <input> elements and its own
value. The value of the <output> element
can be anything you'd have been happy
to put in an <input> element in HTML4 ,
such as text, numbers, and dates.

4 6 6

10 10 ~

9 11 11

5 ~ ~