codeup-web-exercises/forms.html at main · cybermatt76/codeup-web-exercises · 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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Register With US</title>
  <link rel="stylesheet" href="css/resets.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/forms.css">
</head>
<body>

<div class="page-wrapper">
  <div class="container grow justify-center">
    <div class="row">
      <div class="column align-center justify-center">
        <h1>Register With Us</h1>
      </div>
    </div>
    <div class="row">
      <div class="column align-center justify-center">
        <form method="post" action="https://request-inspector.glitch.me">
          <fieldset>
            <legend><h4>Log In</h4></legend>
            <div class="row">
              <div class="column justify-center align-center">
                <div class="input-wrapper">
                  <label for="email address">Email Address:</label>
                  <input type="text" id="email address" name="email address">
                </div>
                <div class="input-wrapper">
                  <label for="password">Password:</label>
                  <input type="password" id="password" name="password">
                </div>
              </div>
            </div>
          </fieldset>

          <fieldset>
            <legend><h4><label for="bio">Please provide a short biography:</label></h4></legend>
            <textarea name="bio" id="bio" cols="48" rows="10"></textarea><br>
          </fieldset>

          <fieldset>
            <legend><h4>How did you hear about us?</h4></legend>
            <div class="input-wrapper">
              <label for="billboard">billboard:</label>
              <input type="checkbox" name="advertisements" value="billboard" id="billboard">
            </div>
            <div class="input-wrapper">
              <label for="radio advertisement">Radio Advertisement:</label>
              <input type="checkbox" name="advertisements" value="radio advertisement" id="radio advertisement">
            </div>
            <div class="input-wrapper">
              <label for="internet advertisement">Internet Advertisement:</label>
              <input type="checkbox" name="advertisements" value="internet advertisement" id="internet advertisement">
            </div>
            <div class="input-wrapper">
              <label for="other">Other:</label>
              <input type="checkbox" name="advertisements" value="other" id="other">
            </div>
          </fieldset>


          <fieldset>
            <legend><h4><label for="browser">What browser are you using?</label></h4></legend>
            <select name="browser" id="browser">
              <option value="Chrome">Chrome</option>
              <option value="Safari">Safari</option>
              <option value="Firefox">Firefox</option>
              <option value="Edge">Edge</option>
              <option value="Duck Duck Go">Duck Duck Go</option>
              <option value="Internet Explorer">Internet Explorer</option>
              <option value="AOL">AOL</option>
              <option value="Netscape">Netscape</option>
            </select>
          </fieldset>
          <fieldset class="slidecontainer">
            <legend><h4><label for="browser satisfaction">How satisfied are you with the browser you are using?</label></h4></legend>
            <input name="browser satisfaction" type="range" min="1" max="100" value="50" class="slider" id="browser satisfaction">
            <div class="sliderlabel">
              <span class="left">Not Satisfied</span>
              <span class="right">Extremely Satisfied</span>
            </div>
          </fieldset>
          <div class="row justify-center">
            <input type="submit" value="Submit Form">
          </div>
        </form>

      </div>
      <div class="column">
        <aside class="column right-form">

        </aside>
      </div>

    </div>
  </div>
</div>
</body>
</html>

</body>
</html>