GOOD DAY!

PRAYER
CHECKING OF
ATTENDANCE
LET’S PLAY A
GAME!
GUESS THE PICTURES

But with a twist!

Google
Google Forms
Facebook
Facebook Log in form
Comment Form
Evaluation Form
Datetime / Birthdate Form
FORM STYLE
12
STYLING
FORMS
OBJECTIVE:
At the end of the activity, students should be able to:

● Understand the process of styling forms

● Customize and enhance the look of their form section
● Value the essence of knowing the styling forms
Dull or Stylish Forms
1. Why is form in a website important?

2. Which do you prefer, a dull look form or a

stylish form? Why?
Examples of Styled Forms
STYLING HTML5 FORMS
Just like what was mentioned earlier, there are pseudo element and pseudo class
selectors used for styling web forms.

Here are some of the examples:

:focus
This is used to point and style an input field when it gets focus or is currently being
used.

:checked (new in CSS3)

This is used to point and style checked <input> elements (for INPUT types radio
and checkbox only)

:required (new in CSS3)

This is used to select and style <input> elements that have a “required” attribute.
:optional (new in CSS3)
This is used to select and style <input? Elements with no
“required” attribute.

:valid (new in CSS3)

This is used to point and style all <input> elements with a
valid value.

:invalid (new in CSS3)

This is used to point and style all <input> elements with an
invalid data.
 Below are examples of pseudo element selectors that you
can use in styling web forms:

::before
This is used to place a content before the specified element.

Example:

Note: The content property is where you should specify the content
you intent to insert before the element.
 ::after
This is used to place a content after the specified element.

Example:

Note: The content property is where you should specify the content
you intend to insert after the element.
Supplementary
Education/Learning:

https://www.w3school
s.com/css/css_form.a
sp
LET’S TRY IT!
21
FORM
STYLE
Contact Page is where site visitors can leave a
message for the owner of the website. You
noticed that it's a little bit plain and boring that
is why you thought of styling the contact form.
Keep Your forms up-to-date and not boring by
styling its elements.
FORM
STYLE
Instruction: Download
sites.zip file. Enhance the
contact form by applying
the skills you've learned
during the lecture and
hands on exercise of this
meeting.
Values Integration
Knowing the Importance of choosing a proper Designing for
your forms….

A well-designed form enhances the user experience by making it

easy and eye pleasing for users to fill out. A clean and organized
layout with clear labels and instructions reduces confusion and
frustration, leading to higher completion rates.
Quiz Time!
Bring out ¼ sheet of paper!
25
MULTIPLE CHOICE: Read each statement below and then write the letter
of the correct answer.

1 Which among the following selectors points and styles an input field when
it gets focus?
A. :checked
B. :focus
C. :valid

2 Which among the following selectors points and styles input fields that are
not necessary?
A. :invalid
B. :required
C. :optional
3 Which among the following selectors points and style checked input fields?
A. :valid
B. :checked
C. :required

4 Which among the following selects points and styles input fields that
contain valid values?
A. :checked
B. :valid
C. :required

5 Which among the following selectors is NOT new in CSS3?

A. :focus
B. :checked
C. :required
 Any
Questions?