Patterns/demo/validate/index.html at master · pilz/Patterns · 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
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Form validation</title>
    <link rel="stylesheet" href="../../style/common.css" type="text/css">
    <link rel="stylesheet" href="validate.css" type="text/css">
    <script data-main="../../src/autoinit" src="../../bungledeps/require.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <section>
      <h1>Form validation</h1>
      <section class="description">
        <a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Description::element; target: self::element; trigger: autoload">Description</a>
      </section>

      <section class="demo">
        <h2>Demo</h2>
        <h3>Vertical form</h3>
        <form class="pat-validate vertical" method="get" action="#">
          <label>Full name <input type="text" required="required"/></label>
          <label>Age <input type="number" min="16" max="65" required="required"/></label>
          <label>Phone <input type="text" pattern="[0-9][0-9 -]+[0-9]" placeholder="###-#######" required="required"/></label>
          <fieldset class="checklist radio">
            <legend>Favourite colour</legend>
            <label><input name="colour" required="required" type="radio" value="blue"/> Blue</label>
            <label><input name="colour" required="required" type="radio" value="pink"/> Pink</label>
            <label><input name="colour" required="required" type="radio" value="red"/> Red</label>
            <label><input name="colour" required="required" type="radio" value="yellow"/> yellow</label>
          </fieldset>
          <fieldset class="buttons">
            <button>Test</button>
          </fieldset>
        </form>

        <h3>Horizontal form</h3>
        <form class="pat-validate horizontal" method="get" action="#">
          <label>Full name <input type="text" required="required"/></label>
          <label>Age <input type="number" min="16" max="65" required="required"/></label>
          <fieldset class="checklist radio">
            <legend>Favourite colour</legend>
            <label><input name="colour" required="required" type="radio" value="blue"/> Blue</label>
            <label><input name="colour" required="required" type="radio" value="pink"/> Pink</label>
            <label><input name="colour" required="required" type="radio" value="red"/> Red</label>
            <label><input name="colour" required="required" type="radio" value="yellow"/> yellow</label>
          </fieldset>
          <fieldset class="buttons">
            <button>Test</button>
          </fieldset>
        </form>

      </section>
      <section class="documentation">
        <a href="documentation.md" class="pat-inject" data-pat-inject="source: ## Documentation::element; target: self::element; trigger: autoload">Documentation</a>
      </section>
    </section>

      <a href="../../index.html" class="pat-inject" data-pat-inject="source: #global-navigation::element; target: self::element; trigger: autoload">Global navigation</a>
  </body>
</html>