Index
Sr.No Contents Page no
01. Introduction 2
02. Code 3
03. Output 10
04. Advantage 12
05. Disadvantage 13
06. Conclusion 14
07. Reference 14
1
Introduction
Basically, the survey form is all about HTML input. In this project, you learn
about Html input like input fields, input validation without JavaScript,
checkbox, radio button, file upload, date pick-up input, text-area field, and
many more.
A form is an essential component of a website that helps in logging in, signing
up, sending orders, pieces of information, queries, uploading files, and carrying
out online transactions. In other words, forms are the stepping stone to making a
website interactive.
Creating an HTML form is a simple yet critical project. In this project, you'll
create a standard survey form through which information can be captured and
sent to the database.
In the survey form project, you will be practicing how to create a website form.
You will be able to create all the elements of a form using HTML.
Using CSS, you will be able to style the form to resemble the original design.
You won’t need any Javascript for this project.
This form will not be able to send data in its current state. Think of this project
as building a strong foundation.
You can still learn how to send data using a form at a later stage. When you do,
you can come back and add that functionality.
Front-end web development has experienced a dramatic evolution over the past
several years, in large part driven by the JavaScriptification of everything via
front-end frameworks like React and Vue. Part of this evolution has been the
introduction of CSS-in-JS tools to abstract CSS into JavaScript or a JavaScript-
friendly layer.
I'm embarking on a project to get a better understanding of not just which CSS-
in-JS tools people are using, but also why they are using specific tools. Are
2
people following real or perceived industry standards? Are there legacy issues
at play? Or are there other reasons?
To get started on what will likely become a huge research project, I've created a
CSS-in-JavaScript survey, and I invite you to share your insight with me. The
anonymous survey will take about 5 minutes to fill out and has an option at the
end to take part in a round of in-depth one-on-one interviews with me to explore
the subject further.
Once the survey period is over, I will analyze and further anonymize the data
before publishing the results on my personal blog at mor10.com. The data and
analysis may also become part of a future conference talk on the same subject.
Code
Css1.html:
<!DOCTYPE html>
<html>
<head>
<title>Online shopping survey form</title>
</head>
<body style="background-image: url(background1.jpeg); background-size:
100%">
<Center>
<form name="myForm" onsubmit="return validate()" method="post">
<h1 style="text-decoration: underline">
<font color="black" face="cursive"><b>Online shopping</b></font>
</h1>
<p>
<font color="black" face="cursive">
You are one of just a few people we are asking, so your answers are very
important to us. Please be as honest as possible as the result are anonymous. For
most, you need only check a box or enter a line for your answer. The survey
will prompt you to complete all questions. Overall, it will take about 10 minutes
of your time.
</p>
<br>
3
Your Gender:<br><br>
<input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female
<input type="radio" name="Gender" value="others">Others
<br><br>
Your age:<br><br>
<input type="radio" name="age" value="Teenage">Teenage
<input type="radio" name="age" value="20-30">20-30
<input type="radio" name="age" value="30-40">30-40
<br><br>
What do you do?
<br><br>
<input type="checkbox" name="C1" value="Student">Student<br>
<input type="checkbox" name="C1"
value="Freelancer">Freelancer<br>
<input type="checkbox" name="C1" value="Job holder">Job
holder<br>
<input type="checkbox" name="C1" value="Businessman/Bussiness
woman">Businessman/Business woman
<br><br>
Have you ever shop online?<br><br>
<input type="radio" name="n1" value="Yes">Yes
<input type="radio" name="n1" value="No">No
<br><br>
<button><a href="css2.html">Next</a></button>
4
</font>
</form>
</center>
</body>
</html>
Css2.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-image: url(background2.jpeg); background-size:
100%">
<form>
<font face="cursive">
Question 1:<br>
How frequently do you purchase things online?<br>
<input type="radio" name="Q1" value="Once in a month">Once in a
month<br>
<input type="radio" name="Q1" value="Twice or five times in a
month">Twice or five times in a month<br>
<input type="radio" name="Q1" value="More than 5 Times in a
month">More than 5 Times in a month<br>
<input type="radio" name="Q1" value="Once in a year">Once in a
year<br>
<input type="radio" name="Q1" value="Never">Never
<br><br>
Question 2:<br>
Why do you prefer online shopping?<br>
<input type="checkbox" name="q2" value="Security">Security<br>
<input type="checkbox" name="q2" value="Saves Time">Saves
Time<br>
<input type="checkbox" name="q2" value="Home Delivery">Home
Delivery<br>
5
<input type="checkbox" name="q2" value="Flexibility of
prices">Flexibility of prices<br>
<input type="checkbox" name="q2" value="wide range of choices">wide
range of choices<br>
<input type="checkbox" name="q2" value="Convenient and
flexible">Convenient and flexible<br>
<input type="checkbox" name="q2" value="Fun doing shopping on
web">Fun doing shopping on web<br>
<input type="checkbox" name="q2" value="Can find products store
Doesn't have">Can find products store Doesn't have<br>
<br><br>
Question 3:<br>
If you do not purchase things online why?<br>
<input type="checkbox" name="q3" value="Shipping expenses">Shipping
expenses<br>
<input type="checkbox" name="q3" value="Using your credit
card">Using your credit card<br>
<input type="checkbox" name="q3" value="It is difficut to shop online">It
is difficut to shop online<br>
<input type="checkbox" name="q3" value="I do not find what I look
for">I do not find what I look for<br>
<input type="checkbox" name="q3" value="Waiting for the item to
arrive">Waiting for the item to arrive<br>
<input type="checkbox" name="q3" value="I do not trust online
shopping">I do not trust online shopping<br>
<input type="checkbox" name="q3" value="I do not receive what i pay
for">I do not receive what i pay for<br>
<input type="checkbox" name="q3" value="I heard bad things about
online shopping">I heard bad things about online shopping<br>
<br><br>
Question 4:<br>
Do you by anything from listen items?<br>
<input type="checkbox" name="q4" value="Clothing">Clothing<br>
<input type="checkbox" name="q4" value="Men Wallets">Men
Wallets<br>
6
<input type="checkbox" name="q4" value="Men T-shirts">Men T-
shirts<br>
<input type="checkbox" name="q4" value="Ladies Dresses">Ladies
Dresses<br>
<input type="checkbox" name="q4" value="Ladies Handbags">Ladies
Handbags<br>
<input type="checkbox" name="q4" value="Men Belts">Men Belts<br>
<input type="checkbox" name="q4" value="Fashion
Accessories">Fashion Accessories<br>
<br><br>
Question 5:<br>
How much have you spent for online shopping in past year?<br>
<input type="radio" name="q5" value="Nothing">Nothing<br>
<input type="radio" name="q5" value="1-2500 Rs">1-2500 Rs<br>
<input type="radio" name="q5" value="2500-5000 Rs">2500-5000 Rs<br>
<input type="radio" name="q5" value="5000-10000 Rs">5000-10000
Rs<br>
<input type="radio" name="q5" value="10000-20000 Rs">10000-20000
Rs<br>
<input type="radio" name="q5" value="More than 20000 Rs">More than
20000 Rs
<br><br>
Question 6:<br>
How much would you like to spend on single online purchase?<br>
<input type="radio" name="q6" value="500-1500 Rs">Nothing<br>
<input type="radio" name="q6" value="1500-3000 Rs">1-2500 Rs<br>
<input type="radio" name="q6" value="3000-5000 Rs">2500-5000 Rs<br>
<input type="radio" name="q6" value="5000-7500 Rs">5000-10000
Rs<br>
<input type="radio" name="q6" value="7500-10000 Rs">10000-20000
Rs<br>
<input type="radio" name="q6" value="More than 10000 Rs">More than
20000 Rs
<br><br>
7
Question 7:<br>
What would be your best payment method if you buy on Trenders.pk?<br>
<input type="radio" name="q7" value="EasyPaisa">EasyPaisa<br>
<input type="radio" name="q7" value="Credit card">Credit card<br>
<input type="radio" name="q7" value="Bank Transfer">Bank Transfer<br>
<input type="radio" name="q7" value="Cash on Delivery">Cash on
Delivery<br>
<input type="radio" name="q7" value="EasyPay(through mobile
balance)">EasyPay(through mobile balance)<br>
<br><br>
Question 8:<br>
What would you rather have as a discount on Trenders.PK?<br>
<input type="radio" name="q8" value="Fast Shipping">Fast Shipping<br>
<input type="radio" name="q8" value="Free shipping">Free shipping<br>
<input type="radio" name="q8" value="Buy one get one free">Buy one get
one free<br>
<input type="radio" name="q8" value="25% off on total order">25% off on
total order<br>
<input type="radio" name="q8" value="Good customer service">Good
customer service<br>
<br><br>
Question 9:<br>
What would you prefer most when shop with Trenders.pk?<br>
<input type="radio" name="q9" value="Cheap Prices">Cheap Prices<br>
<input type="radio" name="q9" value="Quality of product">Quality of
product<br>
<br><br>
Question 10:<br>
Which products you would like to see on Trenders.pk?<br>
<input type="checkbox" name="q4" value="Cosmetics">Cosmetics<br>
<input type="checkbox" name="q4" value="Laptop Bags">Laptop
Bags<br>
<input type="checkbox" name="q4" value="Ladies Shirts">Ladies
Shirts<br>
8
<input type="checkbox" name="q4" value="Ladies Jeans">Ladies
Jeans<br>
<input type="checkbox" name="q4" value="Ladies shoes">Ladies
shoes<br>
<input type="checkbox" name="q4" value="Ladies watches">Ladies
watches<br>
<input type="checkbox" name="q4" value="Ladies Jackets">Ladies
Jackets<br>
<input type="checkbox" name="q4" value="Ladies Designer
Dresses">Ladies Designer Dresses<br>
<br><br>
<button><a href="css3.html">Next</a></button>
</form>
</body>
</html>
Css3.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function done()
{
alert("DONE");
}
</script>
</head>
<body style="background-image: url(background3.jpeg); background-size:
100%">
<center>
<h1><B>You are almost done.....</B></h1>
<br><br>
<p>
9
<h3><b>Do you like this survey or not?</b></h3>
<Button><img src="like image.png" width="50"></Button>
<Button><img src="dislike.png" width="55"></Button>
<h3><b>Your suggestions and recommendations for
Trenders.PK</b></h3>
<textarea name="t1" cols="20" rows="5"></textarea>
<br><br>
<h3>Would you like to listen back from us?<br>
<textarea name="t1" cols="20" rows="2"></textarea><br><br>
<button>Save</button>
<input type="submit" value="submit" onclick="done()">
</h3></p></center>
</body>
</html>
Output:
Css1.html:
10
Css2.html:
11
Css3.html:
Advantages:
1) Faster Page Speed
More code means slower page speed. And CSS enables you to use less code.
CSS allows you to use one CSS rule and apply it to all occurrences of a certain
tag within an HTML document.
2) Better User Experience
CSS not only makes web pages easy on the eye, it also allows for user-friendly
formatting. When buttons and text are in logical places and well organized, user
experience improves.
12
3) Quicker Development Time
With CSS, you can apply specific formatting rules and styles to multiple pages
with one string of code. One cascading style sheet can be replicated across
several website pages. If, for instance, you have product pages that should all
have the same formatting, look, and feel, writing CSS rules for one page will
suffice for all pages of that same type.
4) Easy Formatting Changes
If you need to change the format of a specific set of pages, it’s easy to do so
with CSS. There’s no need to fix every individual page. Just edit the
corresponding CSS stylesheet and you’ll see changes applied to all the pages
that are using that style sheet.
5) Compatibility Across Devices
Responsive web design matters. In today’s day and age, web pages must be
fully visible and easily navigable on all devices. Whether mobile or tablet,
desktop, or even smart TV, CSS combines with HTML to make responsive
design possible.
Disadvantage:
1. Cross-Browser Issues
Different browsers work differently. So, you have to check that changes
implemented in the website via CSS codes are reflected properly among all
browsers.
2. Security Issues
Security is important in today’s world driven by technology and data.
One of the major disadvantages of CSS is that it has limited security.
13
Conclusion:
Here we had created online shopping survey form. In which we learned about
various form elements like <input>, <textarea>, <button>, etc. we also
connected multiple webpages with each other using <a> (anchor) tag.
References:
https://devmountain.com/blog/what-is-css-and-why-use-it/
https://css-tricks.com/forums/topic/css-etc-for-surveys/
https://www.questionpro.com/a/showEntry.do?
classID=117&sourceRef=features
14
