Survey-Form/index.html at main · DrowsyKitty/Survey-Form · 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
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
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <!--Links to the Bulma CSS framework hosted on a Content Delivery Network (CDN).
    This framework provides pre-styled classes for responsive, modern web designs.-->
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet"/>
  </head>

  <body>
    <!--<section> and <div class="container"> wrap the main content.
    The Bulma classes section and container add padding and centering to the content.-->
    <section class="section">
      <div class="container">
        <h1 id="title" class="title has-text-centered">Survey Form</h1>
        <p id="description" class="subtitle has-text-centered">Please answer all questions and fill in the required information.</p>

        <!--<form> is a container for collecting user input. The ID survey-form allows for
          targeting with JavaScript or CSS, and the box class from Bulma
          adds padding and a border around the form.-->
        <form id="survey-form" class="box">

          <!--Name field-->
          <div class="field">
            <label class="label" for="name">Name</label>
            <div class="control"> <!--The control class from Bulma ensures that form elements like <input>, <textarea>, and <select> get consistent padding, margin, and alignment.-->
              <input id="name" type="text" class="input" placeholder="Enter your full name" required/>
            </div>
          </div>

          <!--Email field-->
          <div class="field">
            <label class="label" for="email">Email</label>
            <div class="control">
              <input id="email" type="email" class="input" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$]" placeholder="Enter your email" required/></label>
            </div>
          </div>

          <!--Password field-->
          <div class="field">
            <label class="label" for="password">Password</label>
            <div class="control">
              <input id="number" type="password" class="input" pattern="[0-9]" min="0" max="9" placeholder="Enter your password" required></label>
            </div>
          </div>

          <!--Dropdown for ownership status-->
          <div class="field">
            <label class="label" for="current-role">Which option best describes your current ownership status?</label>
            <div class="control">
              <div class="select">
                <select id="dropdown" name="current-role">
                  <option value="">(select one)</option>
                  <option value="1">No ownership</option>
                  <option value="2">Own 1 pet</option>
                  <option value="3"> Own 2 pets</option>
                  <option value="4">Own 3+ pets</option>
                </select>
              </div>
            </div>
          </div>

          <!--Radio buttons for animal type-->
          <div class="field">
            <legend>What kind of pet do you have? (required)</legend>
            <div class="control">
              <label class="radio">
                <input id="type-cat" type="radio" name="animal-type" value="cat" checked>
                Cat
              </label>

              <label class="radio">
                <input id="type-dog" type="radio" name="animal-type" value="dog">
                Dog
              </label>

              <label class="radio">
                <input id="type-other" type="radio" name="animal-type" value="other">
                Other obscure animal
              </label>
            </div>
          </div>

          <!--Checkboxes for dream pets-->
          <div class="field">
            <legend>What kind of pets have you always dreamed of having?(Check all that apply)</legend>
            <div class="control">
              <label class="checkbox">
                <input id="dream-cat" type="checkbox" value="cat">
                Cat
              </label>

              <label class="checkbox">
                <input id="dream-dog" type="checkbox" value="dog">
                Dog
              </label>

              <label class="checkbox">
                <input id="dream-tiger" type="checkbox" value="tiger">
                Tiger
              </label>
            </div>
          </div>


          <!--Comments section-->
          <div class="field">
            <label class="label" for="comments">Comments and concerns?</label>
            <div class="control">
              <textarea id="comments" name="comments" rows="3" cols="30" placeholder="I think that...or I have concerns about..."></textarea>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <button id="submit" type="submit" class="button is-primary is-fullwidth" >Submit</button>
            </div>
          </div>


        </form>


        </form>

      </div>


    </section>

  </body>
</html>