330 CHAPTER 7 Working with forms
Styling the validations
You can apply style rules to valid and invalid input by implementing style rules on the :valid,
:invalid, :required, and :optional pseudo classes. The following is an example of setting the
pseudo classes to control the look of the webpage.
:valid {
border:solid lime;
font-weight:normal;
}
:invalid {
border:solid red;
font-weight:bold;
}
:required{
background-color:Yellow;
}
:optional{
background-color:LightGray;
}The :valid and :invalid pseudo classes are opposites. When the form submission element’s
value is determined to be invalid, it matches the :invalid selector, and when the form submis-
sion element’s value is determined to be valid, it matches the :valid selector. If a form sub-
mission element has the required attribute, it matches the :required selector, and if the form
submission element does not have the required attribute, it matches the :optional selector.Lesson summary
■■Use the required attribute to specify that input is required.
■■Browsers render validation errors differently.
■■The placeholder attribute provides prompting text to the user when the field is empty.
■■To create a slider, use the <input type=”range”> element.
■■You can provide alternate style rules to validation elements by implementing style
rules on the :valid, :invalid, :required, and :optional pseudo classes.Lesson review
Answer the following questions to test your knowledge of the information in this lesson. You
can find the answers to these questions and explanations of why each answer choice is correct
or incorrect in the “Answers” section at the end of this chapter.- You are creating a webpage that prompts for a new user’s profile information. The pro-
file page requires the user to provide a user name, and if no user name is provided, the
user will not be able to submit the page to the server. Which attribute must be placed
on the user name text box to enforce this requirement?
A. enforced
B. mandatory