Scribd
Upload
24 views23 pages

Projects Ppts

Projects ppts

Uploaded by

Mohammed umar Farhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views23 pages

Projects Ppts

Projects ppts

Uploaded by

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

Internship

Report On
Evaluation of form
Registration
Using
Responsive Web
Design
By BOZAI NUMAAN ALI KHAN

Roll : 160322862024 College :

DCET

Course : MCA

Organization : IntelliCloud Apps

Under the guidance of

Mr. Sathesh Patnana


Purpose
• The purpose of this project is to make sure that when people
fill out forms on websites, like signing up for an account or
entering their information, it’s easy for them no matter what
device they’re using-whether it’s a computer, a phone, or a
tablet. We want to find out how well these forms work and if
there are any ways to make them better, so everyone can use
them easily.
• This version breaks down the purpose into straightforward
language, focusing on ensuring ease of use for all users
across different devices.
Abstract
•This project, called "Evaluation of Registration Form
Using Responsive Web Design," looks at how well
registration forms work on different devices like
computers, phones, and tablets. We're focusing on
making sure these forms are easy to use and look
good on any screen size.

• We'll be checking things like how easy it is to fill out


the form, if there are any problems if you make a
mistake, and how it looks on different devices. By
doing this, we hope to find ways to make
registration forms better for everyone. We'll give
suggestions on how to improve them so they're
easier to use and understand.
Goals
• Check How Well Forms Work
We Want to see if registration forms on websites are easy to use and
understand.

• Make Sure They Look Good Everywhere


We’ll check if the forms look nice and work well on different devices
like computers, phones and tablets.

• Find Ways to Improve


If we find any problems with the forms, we’ll figure out how to fix them
and make the forms better for everyone.
Modules
• Evaluation of Structure and Arrangement

• Functionalities

• Html and Css Code

• Output

• Conclusion
Evaluation of
Structure and Arrangement.
ARRANGEMENT
STRUCTURE

Visual
Overall Structure
Presentation
Field Grouping
Layout
Label Input
Margins, Padding,
Association
And Spacing
Structur
e
Overall Structure
•The form is logically
structured with
sections enclosed
within <fieldset>
tags, which aids in
grouping related
input fields together.

•Each <fieldset>
represents a distinct
category of
information, such as
personal details,
account type, and
additional
information.
Field Grouping
• The forms begins
with basic
personal
information
• The account type
is presented in its
own <fieldset>,
making it distinct
and easily
identifiable
• Additional
information such
as profile picture
upload, age
input, referrer
selection and bio
text area within
separate
<fieldset>
Label-Input
• Each input field
is associated
with its
corresponding
<label>,
enhancing
usability and
accessibility

• Labels are
placed above
their respective
input fields,
providing clear
instructions on
what
information is
required
Arrangment
Visual Representation
• The CSS code
provides styling
that creates a
visually appealing
layout for the
registration form.

• Fieldsets are
styled with
padding and
borders to visually
separate different
sections of the
form , enhancing
readability and
organization
Styling for Responsiveness
• The CSS code includes
responsive design
techniques to ensure
the form layout
adapts well to
different screen sizes.
• The ‘width’ property
is set using viewport
width units
• Input fields have a
width of ‘100%’,
allowing them to fill
the available space
within their container,
making them
responsive to screen
size changes
Margins , Padding and Spacing
for Readability and Usability.
• Margins and padding are used
strategically to create space
between elements, improving
readability and usability.
• Margins and padding are
applied to various elements
such as <h1>, <p>, <label>
and input fields to provide
adequate spacing between
them.
• The Spacing is consistent
throughout the form,
ensuring a balanced and
harmonious layout
Functionalities

• Input Validation.
• Submission Process.
• File Upload Functionality.
Input Validation:

Input validation is like having a


digital gatekeeper for forms on
websites. Its job is to check the
information users type into
fields to make sure it’s correct
and fits what the website
needs.
Submission Process
The submission process is what
happens when you’ve filled out a
form on a website and you’re ready
to send it off. It’s like putting your
letter in an envelope and dropping
it in the mailbox

Once you’ve entered all your


information into the form, you
usually click a button that says
something like “Submit” or “Send”.
When you do this, the website
takes all the information you’ve
typed and sends it to where it
needs to go, like saving it in a
database or sending it to
someone’s email
File Upload
File upload functionality is like
adding an attachment to an email.
It's how you can send files, like
pictures or documents, along with
your form submission on a website

When a website asks you to upload


a file, your’re usually given a
button that syas something like
“Choose File” or “Upload”

When you click this button, it lets


you pick a file from your computer
Once you’ve selected the file you
want to upload, you just hit
”Submit” or “Upload” and the
website adds that file to your
submission.
CODE HTML AND CSS
OUTPUT
CONCLUSIONS

In Conclusion, evaluating and improving registration


forms is essential for a better user experience online.
By assessing layout, validation, submission, and file
upload , we can enhance usability for all users.

You might also like