html css survey form

My codding spot January 01, 2022

Forms are always useful part of collecting information and opinions from users. In previous post we have learnt about login form creation.

In this article, you will learn how to design survey form with basic skills of HTML and CSS.

Precap

What is survey form in HTML?

Why survey form is used?

Questions asked in survey form

Skills requirements for creating survey form

HTML source code of survey form

Designing survey form with CSS

What is survey form in HTML?

The survey form is nothing but collect information, opinions, interest from user, customer, students, etc..

The survey form in HTML is created by form element and input elements such as text boxes, radio buttons, check boxes, text area.

It is just list of questionnaires.

online survey form using HTML and CSS

html css survey form

Why survey form is used?

Survey form used to improve system, product, services etc.. by gathered feedback from users or public.

Which types of questions asked in survey form?

Some personal information like name, gender, phone number, address, etc..

Next questionnaires based on subject of your survey. The common questions asked about your satisfaction, ask for rating , like, dislike and your experience.

Skills required:

It is beginners friendly project so it only require some basic skills of HTML and CSS.

Components required for survey form

A heading.
A short paragraph for description about survey form.
Different Input types (text, number, text area, radio buttons, check boxes, drop-down and email).
At last submit button for submitting data.

In this post I make survey form for students opinions about online classes.

HTML source code of survey form of online classes

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Survey form for school students</title>
<link rel="stylesheet" href="surveyfrm.css">
</head>
<body>
<div class="main">
   <h1>survey form of online classes</h1>
  <div class="box">
  <p>This survey form is created for school students to know their opinions about online classes running during lockdown due to COVID-19 pandemic. </p>
  <form id="f1" name="surveyform" method="post" >
    <fieldset>
	<legend>Personal info:</legend>
	<label for="name">*Enter your name?</label><br>
	<input type="text" name="name" placeholder="Enter your name" required><br>
	<label for="age">*Select age:</label><br>
	<select name="age" required>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	<option value="19">19</option>
	<option value="20">20</option>
	</select><br>
	<label for="email">*Email address:</label><br>
	<input type="email" name="email" placeholder="Enter your email" required><br>
	</fieldset> <br>
	<label for="rno">Your Roll number:</label><br>
	<input type="number" placeholder="Roll number"><br>
	<label for="std">*Which standard you studying?:</label><br>
	<select name="age" required>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	</select><br>
	<label for="grades">Enter your Annual Grade:</label><br>
	<input type="radio" name="grade">A+ <br>
	<input type="radio" name="grade">A <br>
	<input type="radio" name="grade">B+ <br>
    <input type="radio" name="grade">B <br>
	<input type="radio" name="grade">C <br>
	<input type="radio" name="grade">D <br>
	<label for="deviceyn">Do you have any device for online classes?</label><br>
	<input type="radio" name="dev">YES <br>
	<input type="radio" name="dev">No, I share with others. <br>
	<label for="resource">Which device you use for online classes?</label><br>
	<input type="checkbox" name="resource1">Desktop <br>
	<input type="checkbox" name="resource2">Laptop  <br>
	<input type="checkbox" name="resource3">Tablet  <br>
	<input type="checkbox" name="resource4">Smartphone <br>
	<label for="attend">Have you attend online classes regularly?</label><br>
	<label for="irregular">irregular</label>
	<input type="range" min="30" max="100">
	<label for="regular">regular</label> <br>
	<label for="internetspeed">Do you have high-speed internet at home?<br>
	<input type="radio" name="speed">Yes <br>
	<input type="radio" name="speed">No<br>
    <label for="time">How much time you spend each day for online classes?</label><br>
	<input type="radio" name="time">1-3 hours <br>
	<input type="radio" name="time">4-6 hours  <br>
	<input type="radio" name="time">7-10 hours  <br>
	<label for="homework">Do you get enough time to complete homework and assignment submission?</label><br>
	<input type="radio" name="homework">Yes <br>
	<input type="radio" name="homework">No <br>
	<label for="stressfull_learning">How stressfull is online learning during COVID-19 pandemic?</label><br>
	<input type="radio" name="learning">Very stressfull <br>
	<input type="radio" name="learning">Not at all <br>
	<input type="radio" name="learning">slightly stressfull <br>
    <input type="radio" name="learning">Moderately stressfull <br>
	<label for="homeenvr">How is your environment of your home during online classes?</label><br>
	<input type="radio" name="homeenvironmet">Very peaceful <br>
	<input type="radio" name="homeenvironmet">Slightly peaceful <br>
	<input type="radio" name="homeenvironmet">Moderately helpful <br>
    <input type="radio" name="homeenvironmet">Very noisey  <br>
	<label for="discusssion">How often do you have a 1-1 discussion with your teachers during online classes?</label><br>
	<input type="radio" name="discussiontime">Never <br>
	<input type="radio" name="discussiontime">Once in aweek <br>
	<input type="radio" name="discussiontime">Most of the time <br>
    <input type="radio" name="discussiontime">Always  <br>
	<label for="effectiveness">How effective has online classes been for you?</label><br>
	<label for="very effective">Not effective</label>
	<input type="range" min="5" max="100">
	<label for="not effective">Very effecctive</label> <br>
	<label for="experience">How is your overall experience learning from home?</label><br>
	<input type="radio" name="exprience">Very good experience<br>
	<input type="radio" name="exprience">slighlty bad experience<br>
	<input type="radio" name="experience">Moderate <br>
    <input type="radio" name="experience">Very bad experience   <br>
	<label for="enjoyment">Have you enjoy your online classes?</label><br>
	<input type="radio" name="enjoy">Yes<br>
	<input type="radio" name="enjoy">No<br>
	<label for="aboutparents">How much is your parents helpful during online classes?</label><br>
	<input type="radio" name="parents">Very helpful<br>
	<input type="radio" name="parents">Slightly helpful<br>
	<input type="radio" name="parents">Not helpful<br>
	<input type="radio" name="enjoy">I can manage myself<br>
	<label for="clasessoption">Which classes do you prefer for further studies?</label><br>
	<input type="radio" name="classes">Online<br>
	<input type="radio" name="classes">Offline<br>
	<label for="reason">Why? Give reason in detail.</label> <br>
	<textarea rows="3" cols="70"></textarea><br>
	<label for="issue">Describe issue you face during online classes?</label> <br>
	<textarea rows="3" cols="70"></textarea><br>
	<label for="reason">What improvement you need in online classes?</label> <br>
	<textarea rows="3" cols="70"></textarea><br>
	<button type="submit" value="Submit">SUBMIT FORM</button>
  </form>	
  </div>
</div>
</body>
</html>

Designing survey form of online classes with CSS

.main
{
position:relative;
top:50%;
left:50%;
height:2250px;
width:50%;
background-color:#333333;
transform:translate(-50%);
border-radius:30px;
}
*
{
font-family:Georgia, "Times New Roman", Times, serif;
}
h1
{
padding-top:10px;
text-align:center;
color:#CC0033;
}
.box
{
position:absolute;
height:auto;
width:auto;
margin:0px 20px 0px 20px;
padding:15px;
background-color:#FFFF99;
border:7px ridge #990000;
}
input[type="text"],input[type="number"],input[type="email"]
{
width:80%;
padding:10px;
margin:5px;
}
select
{
width:50%;
padding:10px;
margin:5px;
}
input[type="radio"],input[type="range"],input[type="checkbox"],textarea
{
margin:5px;
}
button
{
width:50%;
padding:10px;
margin-left:20%;
margin-top:5px;
}
button
{
background-color:#0033CC;
color:#CC0066;
font-weight:bold;
}

Output of survey form of online classes:-

Post a Comment

0 Comments