Forms are a core part of the web, and that’s not going away anytime soon. It’s practically a way to collect information on the web that may be utilized elsewhere. Given how vital forms are to the web, I've set out to learn about them as much as possible. In this article, I look at form actions, its default behavior, and potential bugs we might run into if we ignore such behaviours.
HTML supplies us with a form tag that allows us to use forms on the web. This tag works as a container for input elements, which are form elements by extension. If certain default actions in a form are left unchecked, they can create minor issues. An example is a recent bug I ran into that nicely captured what occurs when you ignore some of the default behaviors on a form. I had wrapped two different check input components in a form element tag with a button that had a "Next" CTA. The expected behaviour was that when a check component is selected and the button is clicked, the current selection value is set, and the user is sent to the next page. However, when the button was clicked, a page reload occurred that resulted in the current selection being cleared. This bug prevented me from getting past the current page, so I tried debugging the issue. Turns out that the reason for the page reload on click was because the form action attribute wasn't set, and as a result, a page reload occurs every time the form is submitted.
The form action attribute captures the action that will be executed when a form is submitted. When we submit a form, we usually transfer the data collected on the form to a server. A form's action is triggered for execution when its button or input element with a type="submit" attribute is clicked or the enter key is pressed after the value of its last element has been set. Usually, the expected behaviour of a form's submit event is to run the value of the provided action attribute. So, in the absence of an action, most browsers will point the form to the current URL loaded in the browser, and a page reload occurs. Because I didn't set the action attribute on the form which enclosed the check components, the bug that I described earlier occurred.
A helpful way of bypassing this behaviour is to listen for the submit event on the form and then call the .preventDefault() method. This method cancels an event from taking place, if possible. When used on a form, it cancels the default action that happens when a form's submit event is triggered. Of course, depending on the frontend framework in use, there are various approaches to this. In vanilla JavaScript, one approach is to use an addEventListener inside a script - as shown in the code example below - to listen for the submit event on the form.
<pre><code class="language-HTML">
&#x3C;form id="form">
 &#x3C;input value="name" >
 &#x3C;input value="submit" type="submit">
&#x3C;/form>

</code></pre>
<pre><code class="language-JS">&#x3C;script>
 document.getElementById("form").addEventListener("submit", function(event){
 event.preventDefault();
 });
&#x3C;/script>

</code></pre>
Frontend frameworks like Vue provide a <a href="https://vuejs.org/guide/essentials/event-handling.html">v-on</a> directive on the form to listen for events. The directives can be called as inline or method handlers. The examples below show ways to add the .preventDefault method as an inline or a method handler
As an inline handler
<pre><code class="language-HTML">
&#x3C;!-- the .prevent means that submit event will no longer reload the page -->
&#x3C;form @submit.prevent>&#x3C;/form>

</code></pre>
As a method handler
<pre><code class="language-HTML">&#x3C;!-- Template -->
&#x3C;form id="form" @submit="handleSubmit">
 &#x3C;input value="name" >
 &#x3C;input value="submit" type="submit">
&#x3C;/form>

</code></pre>
<pre><code class="language-JS">// Script
methods: {
 handleSubmit(event) {
 event.preventDefault();
 }
}

</code></pre>
<h3>Notes</h3>
Here are some resources on form behaviours and event propagation:
<a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attributes-for-form-submission">HTML Spec Docs</a>,
<a href="https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/">FreecodeCamp</a>,
<a href="https://vuejs.org/guide/essentials/event-handling.html">Vue</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">MDN</a>

Form Actions