Sandbox - Forms

<form class="fieldset-content">
    <fieldset>
        <legend>...</legend>
        <div class="fieldset-inset">...</div>
    </fieldset>
</form>

<div class="form-element">
    <label for="[ID]">...</label>
    <div class="form-field form-field-[TYPE]"> // grouped-inputs
        <input type="[TYPE]" name="[NAME]" id="[ID]" class="button [OPTIONS]"> // grouped-element if grouped-inputs (add this class to all elements in div.grouped-inputs)
    </div>
</div>

<div class="form-element form-element-textarea">
    <label for="[ID]">...</label>
    <div class="form-field form-field-textarea">
        <textarea id="[ID]" name="[NAME]" rows="15" cols="40"></textarea>
    </div>
</div>

<div class="form-element form-element-checkbox"> // mini-checkbox || custom-checkbox (with checkbox.css)
    <label for="[ID]">...</label>
    <div class="form-field form-field-checkbox">
        <label class="checkbox" for="[ID]">
            <input type="checkbox" name="[NAME]" id="[ID]">
            <span> <span class="sr-only">...</span></span>
        </label>
    </div>
</div>
// Multiple checkboxes
<div class="form-element"> // inline-checkbox
    <label for="[ID]">...</label>
    <div id="[ID]" class="form-field form-field-multiple-checkbox">
        <div class="form-field-checkbox">
            <label class="checkbox" for="[ID]_1">
                <input type="checkbox" name="[NAME]_1" id="[ID]_1" checked="checked">
                <span>...</span>
            </label>
        </div>
        <div class="form-field-checkbox">
            <label class="checkbox" for="[ID]_2">
                <input type="checkbox" name="[NAME]_2" id="[ID]_2">
                <span>...</span>
            </label>
        </div>
    </div>
</div>

<div class="form-element"> // inline-radio / custom-radio (with radio.css)
    <label for="[ID]">...</label>
    <div id="[ID]" class="form-field form-field-radio-button">
        <div class="form-field-radio">
            <label class="radio" for="[ID]_1">
                <input type="radio" name="[NAME]" id="[ID]_1" checked="checked">
                <span>...</span>
            </label>
        </div>
        <div class="form-field-radio">
            <label class="radio" for="[ID]_2">
                <input type="radio" name="[NAME]" id="[ID]_2">
                <span>...</span>
            </label>
        </div>
    </div>
</div>

<div class="form-element">
    <label for="[ID]">...</label>
    <div class="form-field form-field-select"> //  || form-field-multi-select
        <select name="[NAME]" id="[ID]"> // class="select-to-list" for options with images/font-icons / || name="[NAME][]" && multiple="multiple" for multiple options
            <option value="[VALUE]_0" label="...">...</option> // data-option-img="path-to-picture" for images with "select-to-list"
            <option value="[VALUE]_1" label="...">...</option> // data-option-icon="icon-values" for font-icons with "select-to-list"
        </select>
    </div>
</div>

<div class="dnd-area">
    <div class="dnd-dropzone">
        <label for="inputfiles" class="dnd-label">
            # IF C_MULTIPLE #
                # IF IS_MOBILE_DEVICE #Click here to add files# ELSE #Click here or drag and drop files# ENDIF #
            # ELSE #
                # IF IS_MOBILE_DEVICE #Click here to add one file# ELSE #Click here or drag and drop one file# ENDIF #
            # ENDIF #
            <span class="d-block"></span>
        </label>
        <input type="file" name="${escape(NAME)}# IF C_MULTIPLE #[]# ENDIF #" id="${escape(HTML_ID)}" class="ufiles"# IF C_DISABLED # disabled="disabled" # ENDIF # />
    </div>
    <input type="hidden" name="max_file_size" value="{MAX_FILE_SIZE}">
    <div class="ready-to-load">
        <button type="button" class="button clear-list">Clear list</button>
        # IF C_MULTIPLE #
            <span class="fa-stack fa-lg">
                <i class="far fa-file fa-stack-2x "></i>
                <strong class="fa-stack-1x files-nbr"></strong>
            </span>
        # ENDIF #
    </div>
    <div class="modal-container">
        <button class="button upload-help" data-modal data-target="upload-helper" aria-label="Authorized options for uploading"><i class="fa fa-question"></i></button>
        <div id="upload-helper" class="modal modal-animation">
            <div class="close-modal" aria-label="Close"></div>
            <div class="content-panel">
                <div class="align-right"><a href="#" class="error big hide-modal" aria-label="Close"><i class="far fa-circle-xmark" aria-hidden="true"></i></a></div>
                <h3>Authorized options for uploading</h3>
                # IF IS_ADMIN #
                    <p><strong>Maximum size per file :</strong> {MAX_FILE_SIZE_TEXT}</p>
                # ELSE #
                    <p><strong>Bytes allocated :</strong> {MAX_FILES_SIZE_TEXT}</p>
                # ENDIF #
                <p><strong>Allowed files extensions :</strong> "{ALLOWED_EXTENSIONS}"</p>
            </div>
        </div>
    </div>
</div>
<ul class="ulist"></ul>
 
<script>
    jQuery('#${escape(HTML_ID)}').parents('form').first()[0].enctype = "multipart/form-data";
    jQuery('#${escape(HTML_ID)}').dndfiles({
        multiple:# IF C_MULTIPLE # true# ELSE # false# ENDIF #,
        maxFileSize: '{MAX_FILE_SIZE}',
        maxFilesSize: '{MAX_FILES_SIZE}',
        allowedExtensions: ["{ALLOWED_EXTENSIONS}"],
        warningText: '<strong>Upload has been disabled for one of those reasons : <br /></strong>',
        warningExtension: ' : the extension of this file isn\'t allowed.<br />',
        warningFileSize: ' : the weight of this files is too large.<br />',
        warningFilesNbr: '<br />- the number of files exeeds the allocated space.<br />',
    });
</script>

<fieldset class="fieldset-submit">
    <legend class="sr-only">lorem</legend>
    <div class="fieldset-inset">
        <button id="[ID]" class="button ..." type="[TYPE]" name="[NAME]">
            ...
        </button>
    </div>
</div>