webDesignProjects/Survey-Form at main · busbusra/webDesignProjects · GitHub

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
<!DOCTYPE html>
<html>
<h1 id="title">A Simple Survey Form</h1>
<p id="description">Thank you for your time </p>
<form id="survey-form">
  <fieldset>
    <div class="form-group">
    <label for="name" id="name-label">Name</label>
    <input id="name" type="name" placeholder="Enter your name" class="form-control" required>
    </div>

    <div class="form-group">
    <label for="email" id="email-label">E-mail</label>
    <input id="email" type="email" placeholder="Enter your e-mail" class="form-control" required>
    </div>

    <div class="form-group">
    <label for="number" id="number-label">Age</label>
    <input id="number" type="number" placeholder="Enter your age" class="form-control" min="5" max="30">
    </div>

    <div class="form-group">
    <p>Occupation</p>
    <select id="dropdown" class="form-control">
      <option disabled selected value>Select one job</option>
      <option value="doctor">doctor</option>
      <option value="engineer">engineer</option>
      <option value="student">student</option>
      <option value="baker">baker</option>
      <option value="other">other</option>
    </select>
    </div>
    <div class="form-group">
      <p>Are you married?</p>
    <input type="radio" name="single-married" id="single" value="single" class="radio-input">
    <label for="single">Single</label>
    <input type="radio" name="single-married" id="married" value="married" class="radio-input">
    <label for="married">Married</label>
    </div>

    <div class="form-group">
      <p>What are your hobbies?</p>
      <label for="reading"><input type="checkbox"class="checkbox-input" value="reading">Reading</label>
      <label for="movies"><input id="movies" type="checkbox" name="hobby" value="movies"class="checkbox-input">Movies</label>
       <label for="travelling"><input id="travelling" type="checkbox" name="hobby" value="travelling"class="checkbox-input">Travelling</label>
       <label for="hiking"><input id="hiking" type="checkbox" name="hobby" value="hiking"class="checkbox-input">Hiking</label>
       <label for="cooking"><input id="cooking" type="checkbox" name="hobby" value="cooking" class="checkbox-input">Cooking</label>
    </div>

    <div class="form-group">
      <p>Tell us more about you</p>
      <textarea id="comments" placeholder="enter your comment here"></textarea>
    </div>

    <div class="form-group">
      <button id="submit" type="submit" >Submit</button>
    </div>

    </fieldset>
  </form>
  </html>

  <style>
  body{
  text-align:center;
  font-size:30px;
  background-color:#D9D7ED;
}
#survey-form{
  background-color:#B5B5B9;
  margin:50px 200px auto 200px;
}
.form-group{
  line-height:50px;
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}
.form-control{
  display:block;
  width:50%;
  height:2.375rem;
  color:green;
  margin:auto;
}

.checkbox-input,radio-input{
  display:line-block;

}
#submit{
  font-size:20px;
  display:block;
  margin:auto;
  background:green;
  cursor:pointer;
}

  </style>