-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (90 loc) · 4.29 KB
/
index.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
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<!DOCTYPE html>
<html>
<head>
<title>
Survey Form
</title>
</head>
<body>
<!--<script>
function validate() {
var email = document.getElementById("email");
if (email == /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)
{
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
</script>-->
<div class="form-section">
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Description</p>
</header>
<form id="survey-form">
<fieldset>
<legend>
<br>
<br>
<br>
Basic Information Requirement: </legend>
<div class="label-left">
<label id="name-label" for="name">*Your Name: </label>
<input type="text" name="text-input" id="name" placeholder="Enter your name" required>
</div><br>
<div class="label-left">
<label id="email-label" for="email">*Your Email:</label>
<input type="email" name="text-input" id="email" placeholder="Enter your email" required>
<p id="emailErr"></p>
</div><br>
<div class="label-left">
<label id="number-label" for="age">*Your Phone Number: </label>
<input type="number" name="text-input" id="number" placeholder="Enter your age" required min="16" max="70">
<p id="numErr"></p>
</div>
</fieldset>
<br>
<hr>
<div class="extra-info">
<p>Additional Info: </p>
<div class="dropdown-menu">
<label for="dropdown">*Gender: </label>
<select id="dropdown">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="radio-button">
<p>Rate my site: </p>
<label for="rate-site" id="left-radio">Not bad </label>
<input type="radio" name="rate-site" value="notBad">
<input type="radio" name="rate-site" value="Good">
<input type="radio" name="rate-site" value="Average">
<input type="radio" name="rate-site" value="Very Good">
<input type="radio" name="rate-site" value="Excellent">
<label for="rate-site" id="right-radio"> Excellent</label>
</div>
<div class="checkbox-button">
<p>Improvements for user experience (select all that applies)</p>
<label for="checkbox-button"><input type="checkbox" name="checkbox-button" value="appeareance">More color</label for="checkbox-button">
<label><input type="checkbox" name="checkbox-button" value="More fileds">More input Fields</label>
<label for="checkbox-button"><input type="checkbox" value="betterDesign">A better Design</label>
</div><br>
<div class="text-submit">
<p>Suggestions</p>
<textarea rows="4" cols="20"></textarea><br>
<button type="submit" onclick="validate()" id="submit">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>