Basic HTML markup from Deform using `deform_bootstrap` -- the standard set of skins within Kotti. Contains a single button, input text, textarea, select, checkbox radio and checkbox group.

deform-bootstrap.html

<form id="deform"
     class="deform form-horizontal deform ng-pristine ng-valid"
     action=""
     method="post"
     enctype="multipart/form-data"
     accept-charset="utf-8"
     name="deform">
  <!-- Hidden inputs and alerts at the top -->
  <input type="hidden"
        name="_charset_" /> <input type="hidden"
        name="__formid__"
        value="deform" /> 
   <!-- Make the tabs -->
   <!-- Populate the tabs -->
  <div class="tab-content layout-container">
     <!-- If we have a basic tab, this should be active -->
     <fieldset id="basic"
               class="tab-pane fade active in">
        <div class="control-group"
             id="item-deformField1"
             title="Test description">
           <label for="deformField1" class="control-label">
                Text 
                <span class="req" id="req-deformField1">*</span>
           </label>
           <div class="controls">
              <input type="text"
                   name="text"
                   value=""
                   id="deformField1" /> <span class=
                   "help-block">Test description</span>
           </div>
        </div>

        <div class="control-group"
             id="item-deformField2"
             title="">
           <label for="deformField2"
                class="control-label">Textarea <span class=
                "req"
                 id="req-deformField2">*</span></label>

           <div class="controls">
              <textarea id="deformField2"
                   name="textarea">
              </textarea>
           </div>
        </div>

        <div class="control-group"
             id="item-deformField3"
             title="">
           <label for="deformField3"
                class="control-label">Checkbox <span class=
                "req"
                 id="req-deformField3">*</span></label>

           <div class="controls">
              <input type="checkbox"
                   name="checkbox"
                   value="true"
                   id="deformField3" />
           </div>
        </div>

        <div class="control-group"
             id="item-deformField4"
             title="">
           <label for="deformField4"
                class="control-label">Select <span class="req"
                 id="req-deformField4">*</span></label>

           <div class="controls">
              <select name="select"
                   id="deformField4">
                 <option value="First">
                    First
                 </option>

                 <option value="Second">
                    Second
                 </option>

                 <option value="Third">
                    Third
                 </option>
              </select>
           </div>
        </div>

        <div class="control-group"
             id="item-deformField5"
             title="">
           <label for="deformField5"
                class="control-label">Radio <span class="req"
                 id="req-deformField5">*</span></label>

           <div class="controls">
              <input type="hidden"
                   name="__start__"
                   value="radio:rename" /> <label class="radio"
                   for="deformField5-0"><input type="radio"
                     name="deformField5"
                     value="First"
                     id="deformField5-0" /> First</label>
                     <label class="radio"
                   for="deformField5-1"><input type="radio"
                     name="deformField5"
                     value="Second"
                     id="deformField5-1" /> Second</label>
                     <label class="radio"
                   for="deformField5-2"><input type="radio"
                     name="deformField5"
                     value="Third"
                     id="deformField5-2" /> Third</label>
                     <input type="hidden"
                   name="__end__" />
           </div>
        </div>

        <div class="control-group"
             id="item-deformField6"
             title="">
           <label for="deformField6"
                class="control-label">Checkboxgroup <span class=
                "req"
                 id="req-deformField6">*</span></label>

           <div class="controls">
              <input type="hidden"
                   name="__start__"
                   value="checkboxgroup:sequence" />
                   <label class="checkbox"
                   for="deformField6-0"><input type="checkbox"
                     name="checkbox"
                     value="First"
                     id="deformField6-0" /> First</label>
                     <label class="checkbox"
                   for="deformField6-1"><input type="checkbox"
                     name="checkbox"
                     value="Second"
                     id="deformField6-1" /> Second</label>
                     <label class="checkbox"
                   for="deformField6-2"><input type="checkbox"
                     name="checkbox"
                     value="Third"
                     id="deformField6-2" /> Third</label>
                     <input type="hidden"
                   name="__end__"
                   value="checkboxgroup:sequence" />
           </div>
        </div>
     </fieldset>
     <!-- If we don't have a basic tab, the first one here should be active -->
  </div><!-- Append the buttons at the end -->
  <div class="form-actions">
     <div class="layout-container">
        <button id="deformsubmit"
             name="submit"
             type="submit"
             class="btn btn-primary"
             value="submit">Submit</button>
     </div>
  </div>
</form>