SOW : Form advanced
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.form_advanced.js
Advanced Lists/expanders
1.
2.
3. AJAX content is loaded once, on option click! SOW : Ajax : Content can also used to load the content (on page load).
required attribute is removed when containers are hidden so you can submit the form having required hidden fields!2.
disable attribute is added when containers are hidden. .js-form-advanced-list-ignore class added on element will cancel this feature!3. AJAX content is loaded once, on option click! SOW : Ajax : Content can also used to load the content (on page load).
Simple List
Simple & Advanced examples are woring exactly the same!
So this is just a very simple example!
Advanced Lists
<!-- Simple List -->
<div class="form-advanced-list px-4 py-2 shadow-primary-md rounded-xl">
<!-- Trigger : 1 -->
<label class="form-radio form-radio-primary d-block py-3">
<input type="radio" name="adancedlist_1" class="form-advanced-list-reveal" checked>
<i></i> Option 1
</label>
<!-- Trigger : 2 -->
<label class="form-radio form-radio-danger d-block py-3">
<input type="radio" name="adancedlist_1" class="form-advanced-list-reveal" data-form-advanced-target="#simple2_expand">
<i></i> Option 2
</label>
<!-- Expand 3 -->
<div id="simple2_expand" class="form-advanced-list-reveal-item bg-light rounded hide p-4">
Simple & Advanced examples are woring exactly the same!
</div>
<!-- /Expand -->
<!-- Trigger : 3 -->
<label class="form-radio form-radio-warning d-block py-3">
<input type="radio" name="adancedlist_1" class="form-advanced-list-reveal" data-form-advanced-target="#simple3_expand">
<i></i> Option 3
</label>
<!-- Expand 3 -->
<div id="simple3_expand" class="form-advanced-list-reveal-item bg-warning-soft rounded hide p-4">
So this is just a very simple example!
</div>
</div>
<!-- form-advanced-list -->
<form novalidate class="bs-validate" id="listExpandersForm" method="post" action="#">
<!--
Disabled elements (within hidden containers)
are not included in form submit (get or post)
skip disable function within hidden container (inputs/textarea/etc)
.js-form-advanced-list-ignore
remove required when container is hidden (default: false)
data-form-advanced-list-hidden-required="true"
disable when container is hidden (skipped if disable class used) (default: false)
data-form-advanced-list-hidden-disable="true"
disable when container is hidden using a class (default: '')
data-form-advanced-list-hidden-disable-class=".js-advanced-list-hidden-disable-class"
-->
<div class="form-advanced-list p-4 shadow rounded"
data-form-advanced-list-hidden-required="true"
data-form-advanced-list-hidden-disable="true"
data-form-advanced-list-hidden-disable-class=".advanced-list-hidden-disable-class">
<!-- Trigger 1 -->
<label class="form-radio form-radio-primary d-block py-3">
<input type="radio" name="form_advanced_list" class="form-advanced-list-reveal" value="1" checked="" data-form-advanced-target="#optionA_expand">
<i></i> Using form reset!
</label>
<!-- Expand 1 -->
<div id="optionA_expand" class="form-advanced-list-reveal-item border-bottom">
<!--
REQUIRED INPUT
when this container is hidden, "required" is removed.
Is added back when/if the container is visible again!
Only add the required param to any input, datepicker, etc
-->
<label class="d-block">Required input</label>
<input required type="text" class="form-control" value="">
<!--
DISABLE BY A CLASS
required input and also disabled
disabled input using class
-->
<label class="d-block mt-4">Disabled when hidden, using a class<small></small></label>
<input required type="text" class="form-control js-advanced-list-hidden-disable-class" value="">
<code class="smaller">.js-advanced-list-hidden-disable-class</code>
<!--
IGNORE (required/disabled are not affecting this field)
disabled input and ignored by the plugin
js-form-advanced-list-ignore = ignore plugin
-->
<label class="d-block mt-4">Always Disabled <small>.js-form-advanced-list-ignore</small></label>
<input disabled type="text" class="form-control js-form-advanced-list-ignore" value="">
<!--
Reset Button
data-target-reset="" (id or class ; multiple separated by comma ; href might be used instead for a single #id)
data-exclude-reset="" (id or class ; multiple separated by comma)
.js-ignore (always visible ; also remove .hide-force)
-->
<div class="my-4">
<a href="#optionA_expand" class="form-advanced-reset js-ignore btn btn-sm btn-light">
<i class="fi fi-close"></i>
reset section
</a>
</div>
</div>
<!-- Trigger 2 -->
<label class="form-radio form-radio-primary d-block py-3">
<input type="radio" name="form_advanced_list" class="form-advanced-list-reveal" value="2" data-form-advanced-target="#optionB_expand">
<i></i> Required fields
</label>
<!-- Expand 2 -->
<div id="optionB_expand" class="form-advanced-list-reveal-item border-bottom hide">
<!--
REQUIRED INPUT
when this container is hidden, "required" is removed.
Is added back when/if the container is visible again!
Only add the required param to any input, datepicker, etc
-->
<label class="d-block">Required input</label>
<input required type="text" class="form-control" value="">
<!--
DISABLE BY A CLASS
required input and also disabled
disabled input using class
-->
<label class="d-block mt-4">Disabled when hidden, using a class<small></small></label>
<input required type="text" class="form-control js-advanced-list-hidden-disable-class" value="">
<code class="smaller">.js-advanced-list-hidden-disable-class</code>
</div>
<!-- /Expand -->
<!-- Trigger 3 : Ajax -->
<label class="form-radio form-radio-primary d-block py-3">
<input type="radio" name="form_advanced_list" class="form-advanced-list-reveal" value="3" data-form-advanced-target="#optionC_expand" data-form-advanced-ajax-url="_ajax/dummy_text2.html" data-form-advanced-ajax-icon="true">
<i></i> Ajax Content
</label>
<!-- Expand 3 : Ajax -->
<div id="optionC_expand" class="form-advanced-list-reveal-item border-top hide">
<!-- populated by ajax -->
</div>
</div>
<div class="mt-4">
<!--
SUBMIT FORM
-->
<button type="submit" class="btn btn-primary">submit</button>
<!--
Reset Button
data-target-reset="" (id or class ; multiple separated by comma)
data-exclude-reset="" (id or class ; multiple separated by comma)
.js-ignore (always visible ; also remove .hide-force)
-->
<a href="#" data-target-reset="#listExpandersForm" data-exclude-reset=".form-advanced-list-reveal" class="form-advanced-reset js-ignore btn btn-light">
Reset All
</a>
</div>
</form>
Required Form hidden fields
There are situations we have required fields but hidden inside a container.
Smarty solve this by adding .js-form-advanced-required to the container that is hidden/visible.
...
Bulk options
<form class="bs-validate" novalidate id="form_id" method="post" action="#">
<!--
IMPORTANT
The "action" hidden input is updated by javascript according to button params/action:
data-js-form-advanced-hidden-action-id="#action"
data-js-form-advanced-hidden-action-value="delete"
In your backend, should process data like this (PHP example):
if($_POST['action'] === 'delete') {
foreach($_POST['item_id'] as $item_id) {
// ... delete $item_id from database
}
}
-->
<input type="hidden" id="action" name="action" value=""><!-- value populated by js -->
<div class="form-check mb-2">
<input data-checkall-container="#item_list" class="checkall form-check-input form-check-input-default" type="checkbox" id="adv-checkall-top">
<label class="form-check-label" for="adv-checkall-top">
Check All
</label>
</div>
<hr>
<div id="item_list">
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" name="item_id[]" value="1" id="adv-check-1">
<label class="form-check-label" for="adv-check-1">
Item 1
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" name="item_id[]" value="2" id="adv-check-2">
<label class="form-check-label" for="adv-check-2">
Item 2
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" name="item_id[]" value="3" id="adv-check-3">
<label class="form-check-label" for="adv-check-3">
Item 3
</label>
</div>
</div>
<hr>
<div class="form-check mb-2">
<input data-checkall-container="#item_list" class="checkall form-check-input form-check-input-default" type="checkbox" id="adv-checkall-bottom">
<label class="form-check-label" for="adv-checkall-bottom">
Check All
</label>
</div>
<!-- options -->
<div class="mt-4 text-center-xs">
<!-- SELECTED ITEMS -->
<div class="clearfix"><!-- using .dropdown, autowidth not working -->
<a href="#" class="btn btn-sm btn-pill btn-light" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-dots-vertical-full"></i>
<i class="fi fi-close"></i>
</span>
<span>Selected Items</span>
</a>
<div class="dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-250">
<div class="scrollable-vertical max-vh-50">
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="active"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Selected Items!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-required-custom-modal=""
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-required-modal-type="success"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm"
data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}"
data-js-form-advanced-bulk-required-modal-txt-body-txt="Set active {{no_selected}} selected products?"
data-js-form-advanced-bulk-required-modal-txt-body-info=""
data-js-form-advanced-bulk-required-modal-btn-text-yes="Confirm"
data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-check"></i>
Set : Active
</a>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="inactive"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Selected Items!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-required-custom-modal=""
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-required-modal-type="warning"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm"
data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}"
data-js-form-advanced-bulk-required-modal-txt-body-txt="Set inactive {{no_selected}} selected products?"
data-js-form-advanced-bulk-required-modal-txt-body-info=""
data-js-form-advanced-bulk-required-modal-btn-text-yes="Confirm"
data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-close"></i>
Set : Inactive
</a>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="delete"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Selected Items!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-required-custom-modal=""
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-required-modal-type="danger"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm"
data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}"
data-js-form-advanced-bulk-required-modal-txt-body-txt="Are you sure? Delete {{no_selected}} selected products?"
data-js-form-advanced-bulk-required-modal-txt-body-info="Please note: this is a permanent action!"
data-js-form-advanced-bulk-required-modal-btn-text-yes="Yes, Delete"
data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-thrash text-danger"></i>
Set : Delete
</a>
<div class="dropdown-divider"></div>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="myactionhere3"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Selected Items!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-submit-without-confirmation="true"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-mollecules text-danger"></i>
Submit : No Confirm.
</a>
<div class="dropdown-divider"></div>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="myactionhere1"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Selected Items!"
data-js-form-advanced-bulk-required-custom-modal="#my_custom_modal"
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-heart-slim text-success"></i>
Inline Custom Modal
</a>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="myactionhere2"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Customers Selected!"
data-js-form-advanced-bulk-required-custom-modal="#my_custom_modal_ajax"
data-js-form-advanced-bulk-required-custom-modal-content-ajax="../_ajax/form_advanced_bulk_custom_modal_content.html"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-heart-slim"></i> Inline + Ajax Content
</a>
<!--
NO INLINE HTML CODE NEEDED!
Fully customizable
see html_frontend/ajax/form_advanced_bulk_custom_modal_content_full.html
-->
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="myactionhere1"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Items Selected!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-type="custom"
data-js-form-advanced-bulk-required-modal-backdrop="static"
data-js-form-advanced-bulk-required-custom-modal-content-ajax="../_ajax/form_advanced_bulk_custom_modal_content_full.html"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-lightning text-warning"></i>
Full Ajax Content
</a>
</div>
</div>
</div>
<!-- /SELECTED ITEMS -->
</div>
<!-- /options -->
<!-- Inline custom modal (should stay inside <form> to be able to post data) -->
<div class="modal fade show" id="my_custom_modal" role="dialog" tabindex="-1" aria-labelledby="modal-title-confirm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--
Header color - optional
.bg-[primary|danger|warning|success|info|pink|indigo]-soft
-->
<div class="modal-header border-0 bg-primary-soft">
<h5 id="modal-title-confirm" class="modal-title fw-light fs-4">
Inline custom modal
</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span class="fi fi-close fs-4" aria-hidden="true"></span>
</button>
</div>
<!-- /header -->
<!-- body -->
<div class="modal-body py-5">
Selected items: <span class="js-form-advanced-selected-items">0</span>
<div class="fs-4">
Customize as you like! <br><br>
<!-- FILE UPLOADER -->
<div class="clearfix">
<!--
2. AJAX UPLOAD : DYNAMIC PROGRESS UNDER BUTTON
No any extra html code needed for the progress bar.
-->
<label class="btn btn-warning btn-sm cursor-pointer position-relative">
<!--
We use .absolute-full class instead of .viewport-out
Just to make sure the element is working crossbrowser!
.show-hover-container = show delete button only on hover (always visible on mobile)
-->
<input name="ajax_files_progress_dynamic[]"
multiple=""
type="file"
data-file-ext="jpg,png,gif"
data-file-max-size-kb-per-file="3000"
data-file-max-size-kb-total="5000"
data-file-max-total-files="3"
data-file-ext-err-msg="Allowed:"
data-file-exist-err-msg="File already exists:"
data-file-size-err-item-msg="File too large!"
data-file-size-err-total-msg="Total allowed size exceeded!"
data-file-size-err-max-msg="Maximum allowed files:"
data-file-toast-position="bottom-center"
data-file-preview-container=".js-form-advanced-container-table-form-test"
data-file-preview-img-height="120"
data-file-preview-show-info="true"
data-file-preview-class="show-hover-container shadow-md m-2 rounded float-start"
data-file-preview-img-cover="false"
data-file-btn-clear="a.js-form-advanced-btn-multiple-ajax-remove"
data-file-ajax-upload-enable="true"
data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php"
data-file-ajax-upload-params="['action','upload']['param2','value2']"
data-file-ajax-delete-enable="true"
data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php"
data-file-ajax-delete-params="['action','delete_file']"
data-file-ajax-reorder-enable="true"
data-file-ajax-reorder-url="../demo.files/php/demo.ajax_file_upload.php"
data-file-ajax-reorder-params="['action','reorder']"
data-file-ajax-reorder-toast-success="Order Saved!"
data-file-ajax-reorder-toast-position="bottom-center"
data-file-ajax-toast-success-txt="Successfully Uploaded!"
data-file-ajax-toast-error-txt="One or more files not uploaded!"
data-file-ajax-callback-function=""
data-file-ajax-progressbar-custom=""
data-file-ajax-progressbar-disable="false"
class="custom-file-input absolute-full">
<span class="group-icon">
<i class="fi fi-arrow-upload"></i>
<i class="fi fi-circle-spin fi-spin"></i>
</span>
<span>Ajax Uploader</span>
</label>
<div class="js-form-advanced-container-table-form-test position-relative mt-3 clearfix hide-empty"></div>
<small class="d-block text-gray-400">Upload few images and then... reorder them :)</small>
</div>
<!-- /FILE UPLOADER -->
<br>
<small>Yes, ajax content for modals also supported!</small><br>
<small>Check <a href="plugins-sow-form-advanced.html" class="js-ajax link-muted">SOW : Form Advanced</a> for more & documentation!</small>
</div>
</div>
<!-- /body -->
<!-- footer ; buttons -->
<div class="modal-footer">
<!-- submit button - actually submitting the form -->
<button type="submit" class="btn pt-10 pb-10 fs-6 btn-primary">
<i class="fi fi-check"></i> Oh, Great!
</button>
<!-- cancel|close button -->
<a href="#" class="btn pt-10 pb-10 fs-6 btn-light" data-bs-dismiss="modal">
<i class="fi fi-close"></i> Close
</a>
</div>
<!-- /footer ; buttons -->
</div>
</div>
</div>
<!-- /Inline custom modal -->
<!-- Inline custom modal + Ajax Content -->
<div class="modal fade show" id="my_custom_modal_ajax" role="dialog" tabindex="-1" aria-labelledby="modal-title-confirm" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<!-- Ajax content is added here -->
<!--
Content: ../_ajax/form_advanced_bulk_custom_modal_content.html
Note: is full modal content: header, body and footer.
So you can fully customize each ajax content.
-->
<!-- ajax loading icon : optional -->
<div class="p-5 text-center">
<i class="fi fi-circle-spin fi-spin fs-1 text-muted"></i>
</div>
<!-- /ajax loading icon : optional -->
</div>
</div>
</div>
<!-- /Inline custom modal + Ajax Content -->
</form>
Limits & Counters
please, order between 1 and 48.
155 chars limit
characters left: 155
1000 chars limit
characters left: 1000
100 chars limit
characters: 0 / 100
100 chars limit
characters: 0 / 100
<!-- input limit + hidden message -->
<div class="position-relative">
<span class="js-form-advanced-limit-info badge bg-warning text-dark hide animate-bouncein position-absolute absolute-top m-1">
please, order between 1 and 48.
</span>
<input type="number" value="8" min="1" max="48" class="form-control js-form-advanced-limit">
</div>
<!-- char count down : input -->
<div class="position-relative">
<span class="js-form-advanced-limit-info badge bg-warning hide animate-bouncein position-absolute absolute-top m-1">
155 chars limit
</span>
<input type="text" name="-" class="form-control js-form-advanced-char-count-down" data-output-target=".js-form-advanced-char-left" value="" maxlength="155">
<div class="smaller text-muted text-align-end mt-1">
characters left: <span class="js-form-advanced-char-left">155</span>
</div>
</div>
<!-- char count down : textarea -->
<div class="position-relative">
<span class="js-form-advanced-limit-info badge bg-warning hide animate-bouncein position-absolute absolute-top m-1">
1000 chars limit
</span>
<textarea class="js-form-advanced-char-count-down form-control" data-output-target=".js-form-advanced-char-left2" maxlength="1000"></textarea>
<div class="smaller text-muted text-align-end mt-1">
characters left: <span class="js-form-advanced-char-left2">1000</span>
</div>
</div>
<!-- char count up : input -->
<div class="position-relative">
<span class="js-form-advanced-limit-info badge bg-warning hide animate-bouncein position-absolute absolute-top m-1">
100 chars limit
</span>
<input type="text" name="-" class="form-control js-form-advanced-char-count-up" data-output-target=".js-form-advanced-char-total" value="" maxlength="100">
<div class="smaller text-muted text-align-end mt-1">
characters: <span class="js-form-advanced-char-total">0</span> / 100
</div>
</div>
<!-- char count up : textarea -->
<div class="position-relative">
<span class="js-form-advanced-limit-info badge bg-warning hide animate-bouncein position-absolute absolute-top m-1">
100 chars limit
</span>
<textarea class="js-form-advanced-char-count-up form-control" data-output-target=".js-form-advanced-char-total2" maxlength="100"></textarea>
<div class="smaller text-muted text-align-end mt-1">
characters: <span class="js-form-advanced-char-total2">0</span> / 100
</div>
</div>
Input Formatters
<!--
credit card type : autodetected on user type
amex
diners
jcb
laser
visa
mastercard
maestro
discover
-->
<input type="text" name="cc_type" id="cc_type" value="" class="form-control form-control-sm mb-3" readonly="">
<div class="form-floating">
<input placeholder="Card Number" id="cc_number" type="text" data-card-type="#cc_type" class="form-control cc-format cc-number">
<label for="cc_number">Card Number</label>
</div>
<!-- date -->
<div class="form-floating">
<input placeholder="MM / YY" id="cc_date" type="text" value="" class="form-control cc-format cc-expire" maxlength="5">
<label for="cc_date">MM / YY</label>
</div>
Form Reset
<div id="form_content" class="mb-4">
<div class="form-floating mb-3">
<input placeholder="First Name" id="first_name" type="text" value="" class="form-control">
<label for="first_name">First Name</label>
</div>
<div class="form-floating mb-3">
<textarea placeholder="Textarea" id="description" class="form-control" rows="3"></textarea>
<label for="description">Textarea</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="radio" name="radio_form" value="1" id="radio-f1">
<label class="form-check-label" for="radio-f1">
option 1
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="radio" name="radio_form" value="2" id="radio-f2">
<label class="form-check-label" for="radio-f2">
option 2
</label>
</div>
</div>
<!--
Reset Button
data-target-reset="" (id or class ; multiple separated by comma)
data-exclude-reset="" (id or class ; multiple separated by comma)
.js-ignore (always visible ; also remove .hide-force)
-->
<a href="#" data-target-reset="#form_content" data-exclude-reset="" class="form-advanced-reset hide-force btn btn-light">
reset form
</a>