Prepared by Mr. Lloyd Jeriel C.
Parayno
Styling Web Forms
Find a web forms online
(3-5mins)
What is Web Forms?
Web forms are interactive elements on
a webpage that allow users to input
and submit information, such as login
details, search queries, or feedback.
Example of Web Forms
Importance of Styling Web Forms
Usability: Good styling helps users understand forms
better by adding clear labels, enough space between
fields, and a simple, user-friendly design.
Aesthetics: A well-styled form makes the webpage look
nicer, more professional, and more interesting for users.
.
Common Input Types
<forms>
<input type=”text” name=”fname”>
<input type=”radio” name=”gender”
value=”male”> Male
<input type=”checkbox” name=”vehi1”
value=”bike”> I have a bike
</forms>
Other Input Types Input Attributes
<input type=”password”> <input required>
<input type=”email”> <input placeholder=”put
your username here”>
<input type=”submit”>
<input disabled>
<input type=”date”>
<input type=”time”>
How can we style web forms?
Let’s Try!
ACTIVITY 3.2
(50mins)
Design and style an “Account Login” form for your client’s company.
You are a part-time web designer, and your client from the US has
hired you for $500 to create a professional-looking login page.
The page should allow users to enter their credentials (like
username and password) and include a “Remember Me” checkbox, giving
users the option to save their login details for future visits.
sample-login-form1.jpg sample-login-form2.jpg
Requirements:
1. The form must include the following elements:
• A text input field for Username.
• A password input field for Password.
• A “Remember Me” checkbox to save user preferences.
2. Style the form using CSS to make it visually appealing
and user-friendly.
3. Ensure the form layout is clean and properly aligned.
Criteria
Criteria Full Marks Partial Marks No Marks Points
All fields
(username,
Missing one or two
Form Structure password, 'Remember Missing essential fields 6
fields
Me', button) are
present
Form works correctly
Some issues with
Functionality (validation, Form doesn't work 7
functionality
'Remember Me')
Clean, professional,
Design and Basic design Poor design 4
user-friendly
Code is clean and Code is messy or Code is difficult to
Code Quality 2
well-organized unorganized read
File name:
ACT3.2_SURNAME.html
What are the 3 things that you
learned today?
What are the 2 topics you are
curious about?
What is the 1 lingering
question about the topic?
21
