HTML and CSS Reference
In-Depth Information
Placeholder
You can use the
placeholder
attribute with most of the
<input>
types in a form to give the person who's filling out the form a
hint about the kind of content you expect him to enter into the
control. For instance, if you have a text field that expects a first and
last name, you can provide a sample first and last name using the
placeholder
attribute. The value in the attribute is shown in the
control, but is fainter than normal content that you add to a control,
and as soon as you click into the text field, the placeholder text will
disappear so it doesn't get in the way of what you're typing.
The placeholder attribute allows you
to provide a hint about the kind
of content you're expecting in this
part of the form.
<input type="text" placeholder="Buckaroo Banzai">
Required
This is an attribute you can use with any form control; it indicates
that a field is required, so you shouldn't submit the form without
specifying a value for the controls that have this attribute set. In
browsers that support this attribute, if you try to submit the form
without specifying a value for a
required
field, you'll get an error
message and the form will not be submitted to the server.
Notice that this attribute is another
Boolean
attribute, like we saw in
the
<video>
element. That just means that the value of the attribute
is simply “there” or “not there.” That is, if the attribute's there, then
it's set, and if the attribute's not there, then it's not set. So in this
example,
required
is there, so that means the attribute is set and
the field is required to submit the form.
required is a
Boolean attribute, so if it's in
the form con
trol, that means the field must
have a value
for the form to submit correctly.
<input type="text" placeholder="Buckaroo Banzai" required>
Edit your “styledform.html” file and add placeholders to each of the text <input>s and the tel <input>. Choose
values that will give the customer a good hint about what kind of content is expected in each field.
Next, edit the same file and add the required attribute to each form field that is required by the Starbuzz Bean
Machine (all the “Ship to” fields). Because beans and beantype have default values, do you really need required
on those fields? What happens if you remove the checked attribute from beantype; do you need required then?
Experiment with different browsers and see which browsers support placeholder and required.
