Getting Interactive - Head First HTML and CSS - page 670

Hey, 80% of our customers
order ground beans. Can you
make it so the ground bean type
is already selected when the
user loads the page?

If you add a Boolean attribute named “checked” into your radio input
element, then that element will be selected by default when the form
is displayed by the browser. Add the checked attribute to the "ground"
radio <input> element and give the page a test. You'll find the solution
in the back of this chapter.

(Remember that Boolean attributes don't need a value; if the attribute
checked is present, then the input control is checked.)

Using more input types
Next, we need to get the number of bags of coffee the customer wants to purchase, and
the arrive by date. Both of these are <input> elements, but rather than just using basic
text inputs, we can be more specific about the exact type of content we want in these
<input> elements by using the “number” type for the number of bags, and the “date”
type for the arrive by date.

For the number of bags, we can get even more specific, by specifying both a minimum
and maximum number of bags allowed:

By using the “number” t ype and sp ecifying t he min and max num ber of

bag s, we can r estrict th e input to a value th at works for us (we don't wan t

cust omers ord ering more than 10 bags of on e kind of coffee at a time!)

Number of bags: <input type="number" name="bags" min="1" max="10">

Must arrive by date: <input type="date" name="date">

You'll get an error message if you try to enter more
(or less) tha n the allowed max or min.

Now, if you try to enter more than 10 bags or fewer
than 1 bag, in browsers that support the “number”
<input> type, you'll get an error message when you
try to submit the form indicating that the value you've
entered is not correct.