Introduction
A survey form is a form of structured questions or paper employed to collect information from people or groups of persons.
Source Code:
HTML:
<!DOCTYPE
html>
<html>
<head>
<title>Survey Form</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div
class="survey-container">
<h1>Survey Form</h1>
<form
action="#"
method="post">
<label
for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required />
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="role">Which option best describes your current role:</label>
<select id="role" name="role">
<option value="">Select</option>
<option value="student">Student</option>
<option value="employee">Employee</option>
<option value="others">Others</option>
</select>
<label>Which programming language do you prefer:</label>
<div class="checkbox-group">
<label><input type="checkbox" name="python" value="python"/>Python</label><br/>
<label><input type="checkbox" name="c" value="c"/>C</label><br/>
<label><input type="checkbox" name="java" value="java"/>Java</label><br/>
<label><input type="checkbox" name="javascript" value="javascript"/>JavaScript</label>
</div>
<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback" rows="4" placeholder="Enter your feedback..."></textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
CSS:
body
{
font-family
:
Arial, sans-serif;
background-color
:
#f9f9f9;
margin
:
0;
padding
:
0;
}
survey-container
{
max-width
:
600px;
margin
:
50px auto;
background-color
:
#ffffff;
padding
:
20px;
border-radius
:
8px;
box-shadow
:
0 4px 8px rgba(0, 0, 0, 0.1);
}
h1
{
text-align
:
center;
color
:
#333333;
}
p
{
text-align
:
center;
color
:
#666666;
margin-bottom
:
20px;
}
form
{
display
:
flex;
flex-direction
:
column;
}
label
{
font-weight
:
bold;
margin-bottom
:
5px;
color
:
#333333;
}
input,
select,
textarea
{
padding
:
10px;
margin-bottom
:
15px;
border
:
1px solid #cccccc;
border-radius
:
4px;
font-size
:
16px;
}
input:focus,
select:focus,
textarea:focus
{
border-color
:
#007BFF;
outline
:
none;
}
.checkbox-group,
.radio-group,{
margin-bottom
:
15px;
}
.button
{
padding
:
10px;
background-color
:
#007bff;
color
:
white;
border
:
none;
border-radius
:
4px;
cursor
:
pointer;
font-size
:
16px;
transition
:
background-color 0.3s;
}
.button:hover
{
background-color
:
#0056b3;
}