forked from kokonior/HTML-Projects
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSurveyForm.html
More file actions
140 lines (133 loc) · 5.62 KB
/
SurveyForm.html
File metadata and controls
140 lines (133 loc) · 5.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<!-- This is how HTML comments look like -->
<html lang="en">
<!-- the title will appear on the page-->
<head>
<title>Employee Interests Survey</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@0;1&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='article' property='og:type'/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<style type="text/css">
*{
font-family: 'Open Sans', sans-serif;
font-family: 'Love Ya Like A Sister', cursive;
}
.background-color{
background-color: color:rgb(153, 153, 255);;
background-size: cover;
background-repeat: no-repeat;
}
.text-center{
font-family: 'Indie Flower', cursive;
color:rgb(153, 153, 255);
}
.btn:hover{
transition: 0.5s;
box-shadow:0 0 2px lightblue,
0 0 5px lightcoral,
0 0 10px cyan,
0 0 20px blue,
0 0 30px green;
}
.col-91{
border: transparent;
border-bottom:2px solid purple;
width:100%;
position:relative;
left: 30px;
font-family: 'Source Code Pro', monospace;
color:rgb(153, 153, 255);;
background-color: transparent;
}
.card{
background:rgba(183, 241, 255, 0.63)
}
</style>
</head>
<body>
<!-- as it is a survey form, we will need to submit the details, hence we use form -->
<!-- We can give absolute url, or relative url like /nextpage.jsp, and specify POST or GET method -->
<div class="background-image">
<div class="container p-3">
<form action="http://google.co.in" class="">
<!-- If we remove this, every thing will move to the left of the page-->
<div class="card">
<div class="card-header">
<!--Adds a heading to the form-->
<h1 class="text-center">BIODATA FORM</h1>
</div>
<div class="card-body p-3 col-10 m-auto" >
<div class="my-4 col-12 d-flex p-3 ">
<span class="ms-3 w-25">Enter your name:</span>
<!-- Input type text for small texts, specify size -->
<input type="text" name="UserName" class="col-91">
<!--Adds spaces - remove and see what happens -->
<!-- </br></br> -->
</div>
<div class=" my-4 col-12 d-flex p-3">
<span class="ms-3 w-25">Enter your Region:</span>
<input type="text" name="Deptt" class="col-91">
</div>
<div class="my-4 col-12 d-flex p-3">
<span class="ms-3 w-25">Enter your Address:</span>
<!-- For writing lot of text like descriptions with text wrapping,
if you dont want text wrapping, you can add wrap = "off" (horizontal scrollbar -->
<textarea name="Comments" cols=30 rows=2 class="col-91"></textarea>
</div>
<div class="my-4 col-12 d-flex p-3 ">
<span class="ms-3 w-25">Do you Single?</span>
<!-- Radio buttons help you choose one out of the many values -->
<div class="row-4 col-9">
<input type="radio" name="exe" class="mx-2" value=1>Yes
<input type="radio" name="exe" class="mx-2" value=2>No
</div>
</div>
<div class="my-4 col-12 d-flex p-3">
<span class="ms-3 w-25">How do you like to read about your favorite topics?</span>
<div class="row-4 col-9">
<!--Checkbox lets you select multiple options -->
<input type="checkbox" name="Books" class="mx-2">Books
<input type="checkbox" name="Web" class="mx-2">Online resources
<input type="checkbox" name="Phone" class="mx-2">Phone apps
<input type="checkbox" name="Magazines" class="mx-2">Magazines
</div>
</div>
<div class="my-4 col-12 d-flex">
<span class="ms-4 w-26">What genre of movies do you like?</span>
<!--Select box lets you choose one of the multiple dropdown options-->
<div class="col-9 ">
<select name="moviepref" class="ms-3"><option>
<option value=1 selected = "true">comedy
<option value=2 >romance
<option value=3 >thriller
<option value=4 >horror
<option value=5 >scifi
</select>
</div>
</div>
<div class="mx-4">
<!--submits the information entered in the form by the user -->
<input type=submit value="Submit form" class="btn btn-primary btn-lg">
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>