<form class="form-simple">
    <h2 class="divider">
        <div>
            <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is an item divider added by Perch
        </div>
    </h2>

    <div class="field-wrap annotated"><label for="myfield">Things here</label>
        <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
        <p class="inline-help">This is the help text for this field.</p>
    </div>

    <div class="field-wrap input-error"><label for="myfield">Things here <span class="required-value">(required)</span></label>
        <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"><span class="error">An optional message might say that this field is required.</span></div>
    </div>

    <div class="field-wrap annotated"><label for="myfield">Things here</label>
        <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
        <p class="inline-help">This is the help text for this field.</p>
    </div>

    <div class="field-wrap">
        <label for="myfield">Things here</label>

        <div class="form-entry">
            <input type="text" data-display-as="tags" required="required" aria-required="true" placeholder="Enter some tags" class="input-simple m" value="foo,bar,baz">

            <input type="hidden" required="required" aria-required="true" placeholder="Enter some tags" class="input-simple m" value="foo,bar,baz">

            <script src="/assets/js/jquery.min.js"></script>
            <script src="/assets/js/jquery-ui.min.js"></script>
            <script src="/assets/js/selectize.min.js"></script>
            <script>
                $('[data-display-as=tags]').selectize({
                    plugins: ['drag_drop'],
                    delimiter: ',',
                    persist: false,
                    create: function(input) {
                        return {
                            value: input,
                            text: input
                        }
                    },
                    sortField: '#sort'
                });
            </script>
            <p class="inline-help">This is the help text for this field.</p>

        </div>
    </div>

    <div class="field-wrap"><label for="myfield">Things here</label>
        <div class="form-entry"><input type="file" id="" class="input-simple" title="Upload a file">
            <p class="inline-help">This is the help text for this field.</p>
        </div>
    </div>

    <div class="divider">
        <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is content in a divider added with divider-before
    </div>

    <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
        <div class="form-entry"><input type="checkbox" id="">
        </div>
    </div>

    <div class="asset-badge field-wrap" data-for="perch_image_assetID">
        <div class="asset-badge-inner">
            <div class="asset-badge-thumb ">
                <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" width="100" height="150" alt="Preview">
                <div class="asset-badge-remove">
                    <span class="asset-ban hidden"><svg width="64" height="64" class="icon icon-ban-alt"><use xlink:href="/assets/svg/assets.svg#ban-alt" /></svg></span>
                    <span class="asset-badge-remove-fields js">
					<label for="perch_image_remove" class="inline">Remove</label>
					<input type="checkbox" class="check" id="perch_image_remove" name="perch_image_remove" value="1">
				</span>
                    <a href="#" class="asset-badge-remove-action">
					<svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
				</a>
                </div>
            </div>
            <div class="asset-badge-meta">
                <h3 class="title">Default image</h3>
                <ul class="meta">
                    <li><svg width="12" height="12" class="icon icon-o-photo"><use xlink:href="/assets/svg/assets.svg#o-photo" /></svg> Image / JPEG</li>
                    <li><svg width="12" height="12" class="icon icon-o-crop"><use xlink:href="/assets/svg/assets.svg#o-crop" /></svg> 600 &times; 898 px @ 67KB</li>
                </ul>
                <div class="asset-add">
                    <a href="#">Select or upload an image</a>
                </div>

            </div>
        </div>
    </div>

    <fieldset class="fieldset-clean">
        <div class="fieldset-inner">

            <div class="legend-wrap">
                <legend>May be created by</legend>
            </div>

            <div class="checkbox-group">

                <div class="checkbox-single">
                    <label for="subpage_roles_0" class="">Everyone</label>
                    <div class="form-entry">
                        <input type="checkbox" id="subpage_roles_0" name="subpage_roles[]" value="*">
                    </div>
                </div>

                <div class="checkbox-single">
                    <label for="subpage_roles_1" class="">Admin</label>
                    <div class="form-entry"><input type="checkbox" id="subpage_roles_1" name="subpage_roles[]" value="2" checked disabled></div>
                </div>

                <div class="checkbox-single">
                    <label for="subpage_roles_2" class="">Editor</label>
                    <div class="form-entry"><input type="checkbox" id="subpage_roles_2" name="subpage_roles[]" value="1"></div>
                </div>
            </div>

        </div>

    </fieldset>

    <div class="submit-bar ">

        <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
            <div class="form-entry"><input type="checkbox" id="">
            </div>
        </div>

        <div class="submit-bar-actions">
            <input type="submit" class="button button-simple" value="Submit"> or <a href="/perch/core/users">Cancel</a>
        </div>
    </div>

</form>
<form class="form-simple">
  {{render "@divider--h2" }}
  {{render "@input-pair" }}
  {{render "@input-pair-error" }}
  {{render "@input-pair" }}
  {{render "@tag-input-pair" }}
  {{render "@file-field-pair" }}
  {{render "@divider" }}
  {{render "@single-checkbox" }}
  {{render "@asset-badge--default" }}
  {{render "@checkbox-group" }}
  {{render "@submit-bar--default" }}
</form>
{
  "label_id": "myfield",
  "field_id": "myfield",
  "label_label": "Things here"
}

There are no notes for this item.