HTML and CSS Reference
In-Depth Information
Placeholder
The placeholder HTML5 attribute provides a hint or tip within the form control of an
<input> or <textarea> element that disappears once the control is clicked in or gains
focus (see Figure 10.21 ) . This is used to give users further information on how the form
input should be filled in, for example, the email address format to use.
Click here to view code image
1. <label>
2. Email Address
3. <input type="email" name="email-address"
placeholder="name@domain.com" >
4. </label>
Figure 10.21 An email input form control with a placeholder attribute
The main difference between the placeholder and value attributes is that the value
attribute value text stays in place when a control has focus unless a user manually deletes
it. This is great for pre-populating data, such as personal information, for a user but not for
providing suggestions.
Required
The required HTML5 Boolean attribute enforces that an element or form control must
contain a value upon being submitted to the server. Should an element or form control not
have a value, an error message will be displayed requesting that the user complete the re-
quired field. Currently, error message styles are controlled by the browser and cannot be
styled with CSS. Invalid elements and form controls, on the other hand, can be styled using
the :optional and :required CSS pseudo-classes.
Validation also occurs specific to a control's type. For example, an <input> element with
a type attribute value of email will require not only that a value exist within the control,
but also that it is a valid email address (see Figure 10.22 ).
Click here to view code image
1. <label>
2. Email Address
3. <input type="email" name="email-address" required >
4. </label>
Search WWH ::




Custom Search