Scribd
Upload
21 views22 pages

Styling Web Forms

Uploaded by

drdhonz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views22 pages

Styling Web Forms

Uploaded by

drdhonz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like