form-reset

Syntax

form-reset: (form reference) [every (time)] [after (time)][, (form reference)...];

form reference = Form that will be reset to its initial values. It accepts the following values:

me, self, or this - the target selector, if the target selector is a form.
form selector - Any CSS selector that references a form.

This command performs a reset on all form elements back to their initial state.

If there is more than one form selected, it will reset only the first one (currently). To do more than one form at once, use a comma to separate the form selectors.

If any fields have responded to the Active CSS "mimic" command, they will restore to their original state also, as in the example below.

Note: A regular HTML input tag of type "reset" will reset any mimic-into fields by default without any additional coding, so you don't have to use the form-reset command if you have a reset button already set up in your HTML.

form-reset

This button here is outside the form tag.

#formResetButton:click {
    form-reset: #mimicForm;
}

.mimicClass:draw {
    mimic-into: #resultOfMimic{@data-ref};
}
.mimicClass:input {
    mimic-into: #resultOfMimic{@data-ref};
}
#mimicFormField6:input {
    mimic-into: title;
}

<p>This button here is outside the form tag.</p>
<button id="formResetButton">Reset form</button>
<hr>

<form id="mimicForm">
    <p><input id="mimicFormField1" class="mimicClass" data-ref="1" type="text" placeholder="Mimic to A" value="Cheryl"></p>
    <p>A: <span id="resultOfMimic1"></span></p>
    <p><input id="mimicFormField2" class="mimicClass" data-ref="2" type="text" placeholder="Mimic to B"></p>
    <p>B: <span id="resultOfMimic2"></span></p>
    <p><input id="mimicFormField3" class="mimicClass" data-ref="3" type="text" placeholder="Mimic to C" value="Bob"></p>
    <p>C: <span id="resultOfMimic3"></span></p>
    <p><input id="mimicFormField4" class="mimicClass" data-ref="4" type="text" placeholder="Mimic to D"></p>
    <p>D: <span id="resultOfMimic4"></span></p>
    <p><input id="mimicFormField5" class="mimicClass" data-ref="5" type="text" placeholder="Mimic to E" value="Dave"></p>
    <p>E: <span id="resultOfMimic5"></span></p>
    <p>Browser page title: <input id="mimicFormField6" type="text" value="mimic-into" placeholder="Type here"></p>
    <input type="reset" value="Reset form">
</form>

Action commands: focus-on-previous-cycle Action commands: fullscreen