-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
126 lines (117 loc) · 5.3 KB
/
form.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="form.css">
<title>Survey Form</title>
</head>
<body>
<div class="container ">
<header class="header">
<h1 id="title">
Survey about Career Interests
</h1>
<p id="description">
Please share the fields of your interest
</p>
</header>
<form action="" id="survey-form">
<!-- Text section -->
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="formControl" placeholder="Enter your name" required>
</div>
<!-- end of text section -->
<!-- Type Email section -->
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="formControl" placeholder="Enter your Email" required>
</div>
<!-- end of Email section -->
<!-- Type Number section -->
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="number" name="phone" id="phone" class="formControl" placeholder="Enter your phone number" required>
</div>
<!-- end of Number section -->
<!-- Type Number section -->
<div class="form-group">
<label for="address">Address <span class="clue">(optional)</span></label>
<input type="text" name="address" id="address" class="formControl" placeholder="Enter your address">
</div>
<!-- end of number section -->
<!-- select section -->
<div class="form-group">
<p id="quest">Which option best describe your current role</p>
<select name="role" required id="dropdown" class="formControl">
<option value disabled selected >Select current role</option>
<option value="1st year student">1st year student</option>
<option value="2nd year student">2nd year student</option>
<option value="3rd year student">3rd year student</option>
<option value="4th year student">4th year student</option>
</select>
</div>
<!-- end of select section -->
<!-- radio button section -->
<div class="form-group">
<p id="quest">How do you know more about your interested subjects?</p>
<label for="">
<input type="radio" name="source" value="seniors"
class="inputRadio"
checked> Seniors
</label>
<label for="">
<input type="radio" name="source" value="vlogs"
class="inputRadio"
> YT Vlogs
</label>
<label for="">
<input type="radio" name="source" value="social-media"
class="inputRadio"
> Social Media
</label>
<label for="">
<input type="radio" name="source" value="newspaper"
class="inputRadio"
> Newspaper
</label>
<label for="">
<input type="radio" name="source" value="other"
class="inputRadio"
> Other
</label>
</div>
<!-- end of radio button -->
<!-- Checkbox section -->
<div class="form-group">
<p id="quest">What would you like to make as your career? </p>
<label for="">
<input type="checkbox" name="prefer" class="checkbox" value="front-end-dev"> Front-end Developer
</label>
<label for="">
<input type="checkbox" name="prefer" class="checkbox" value="back-end-dev"> Back-end Developer
</label>
<label for="">
<input type="checkbox" name="prefer" class="checkbox" value="app-dev"> Android App Developer
</label>
<label for="">
<input type="checkbox" name="prefer" class="checkbox" value="soft-engineering"> Software Engineering
</label>
<label for="">
<input type="checkbox" name="prefer" class="checkbox" value="other"> Other
</label>
</div>
<!-- End of checkbox section -->
<!-- Textarea section -->
<div class="form-group">
<p id="quest">Give us your feedback</p>
<textarea name="feedback" cols="30" rows="5" id="feedback" class="textarea" placeholder="Enter your feedback here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn">Submit</button>
</div>
</form>
</div>
</body>
</html>