1<form action="#">
 2  <div class="field">
 3    <label for="name">Name</label>
 4    <div class="control">
 5      <input type="text" id="name" class='input' data-controller='input' data-action='keyup->input#changed' required="required" minlength=3 maxlength=9 />
 6    </div>
 7    <p id='name-help' class="help"></p>
 8  </div>
 9  <div class="field">
10    <label for="email">email</label>
11    <div class="control">
12      <input type="email" id="email" class='input' data-controller='input' data-action='keyup->input#changed' required="required">
13    </div>
14    <p class="help"></p>
15  </div>
16  <div class="field">
17    <div class="control">
18      <label class="checkbox">
19        <input type="checkbox" id="accept" data-controller='input' data-action='keyup->input#changed' required="required">
20      </label>
21    </div>
22    <p class="help"></p>
23  </div>
24  <div class="field">
25    <label for="password">password</label>
26    <div class="control">
27      <input type="password" id="password" class='input' data-controller='input' data-action='keyup->input#changed' required="required">
28    </div>
29    <p class="help"></p>
30  </div>
31  <div class="field">
32    <label for="password_confirmation">password confirmation</label>
33    <div class="control">
34      <input type="password" id="password_confirmation" class='input' data-controller='input' data-action='keyup->input#changed' required="required" data-is-equal-to="#password">
35    </div>
36    <p class="help"></p>
37  </div>
38  <div class="field">
39    <div class="control">
40      <button type="submit" id="submit-button">submit</button>
41    </div>
42    <p class="help"></p>
43  </div>
44</form>