marx-js/index.html at master · Sparkmasterflex/marx-js · 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
<!doctype html>
<html class="no-js">
<head>
  <link rel="stylesheet" href="/stylesheets/vendor/reset.css">
  <link rel="stylesheet" href="/stylesheets/src/base.css">
  <link rel="stylesheet" href="/stylesheets/src/structures.css">
  <script>window.jQuery || document.write('<script src="/javascripts/vendor/jquery-1.11.0.min.js"><\/script>')</script>
  <script src="/javascripts/marx.js"></script>

  <script>
    $(document).ready(function() {
      new Marx({
        controls: 'toggle-all',
        onload: true
      });
    });
  </script>
</head>
<body>
  <!--[if lt IE 8]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div id="content">
    <section>
      <div class="per-75 whitebox centered">
        <h1>First Test Form</h1>
        <form action="#action" class="form-1 pad-20">
          <label for="sally">Sally
            <input type="text" name="sally" id="sally" />
            <input type="hidden" name="sally-hidden" value="sally's hidden value" />
          </label>

          <label for="brendon">Brendon
            <input type="text" name="brendon" id="brendon" />
            <input type="hidden" name="brendon-hidden" value="brendon's hidden value" />
          </label>

          <label for="password">Password
            <input id="password" type="password" name="password" />
          </label>
        </form>

        <h1>Form Demo</h1>
        <form id="my-form" action="/" class="form-2 pad-20">
          <label for="bob">Bob
            <input type="text" name="bob" id="bob" />
            <input type="hidden" name="bob-hidden" value="bob's hidden value" />
          </label>

          <label for="fred">Fred
            <input type="text" name="fred" id="fred" />
            <input type="hidden" name="fred-hidden" value="fred's hidden value" />
          </label>

          <label for="fred-email">Fred Email
            <input type="email" name="fred-email" id="fred-email" />
          </label>

          <label for="fred-url">Fred url
            <input type="url" name="fred-url" id="fred-url" />
          </label>

          <label for="fred-birthdate">Fred Birthdate
            <input type="date" name="fred-birthdate" id="fred-birthdate" />
          </label>

          <label for="how_many">How Many
            <input type="number" name="how_many" id="how_many" />
          </label>

          <label for="holly">
            <input type="checkbox" name="holly" id="holly" value="1" />
            Holly
          </label>

          <label for="molly">
            <input type="checkbox" name="molly" id="molly" value="1" />
            Molly
          </label>

          <label for="lolly">
            <input type="checkbox" name="lolly" id="lolly" value="1" />
            Lolly
          </label>

          <label for="who-1">
            <input type="radio" name="who" id="who-1" value="William" /> William
          </label>

          <label for="who-2">
            <input type="radio" name="who" id="who-2" value="Hank" /> Hank
          </label>

          <label for="who-3">
            <input type="radio" name="who" id="who-3" value="Billy" /> Billy
          </label>

          <label for="who-4">
            <input type="radio" name="who" id="who-4" value="Because" /> Because
          </label>

          <label for="who-5">
            <input type="radio" name="who" id="who-5" value="Don't Know" /> Don't Know
          </label>

          <label for="description">
            Description
            <textarea name="description" id="description"></textarea>
          </label>

          <label for="select-it">
            <select name="select-it" id="select-it">
              <option>Please Select</option>
              <option value="Him">Him</option>
              <option value="Her">Her</option>
              <option value="Them">Them</option>
              <option value="Us">Us</option>
              <option value="You">You</option>
            </select>
          </label>

          <input type="submit" value="submit" />
        </form>
      </div>
    </section>
  </div>
</body>
</html>