HTML Form - 1001 ways to submit a Form and handle the corresponding Event

HTML element

One way is to include a input element of type submit that

• perform an form action
• and creates a submit event when clicked.

Function

The second way is to do it programmatically via one of this two Javascript functions:

• form.requestSubmit( [ submitter ] ) Requests to submit the form. Unlike submit(), this method includes interactive constraint validation and firing a submit event, either of which can cancel submission. The submitter argument can be used to point to a specific submit button, whose formaction, formenctype, formmethod, formnovalidate, and formtarget attributes can impact submission. Additionally, the submitter will be included when constructing the entry list for submission; normally, buttons are excluded.
• form.submit(): Submits the form, bypassing interactive constraint validation and without firing a submit event.

Submit Input

The input/submit ³⁾ element with a inline handler that prevent the submit process by preventing the default behavior.

handleSubmit = () => {  
   // The value of the suhbmitter
   submitterValue = event.submitter.value;
   // You can also get the value of the elements via event.target.elements
   console.log('Form Submitted with the button `'+submitterValue+'`');
   // to stop the submit process and to not get a 404
   return false;
}

<form onSubmit="return handleSubmit();" >
<input type="submit"  value="Send Request" accesskey="s" />
<input type="submit"  value="Delete Request" accesskey="d"/>
</form>

Button

You can add a submit behavior to a button element by adding a type attribute to submit ( reset works also)

<form onSubmit='console.log("Hello Button"); return false;'>
<button type="submit">Click Me</button>
</form>

Image

en-US/docs/Web/HTML/Element/input/image: A graphical submit button.

<form onSubmit="console.log('Stop poking me!'); return false;">
<input 
    type="image" 
    src="/_media/android-chrome-192x192.png" 
    alt="image submit button" 
    height=50 
    width=50 
    />
</form>

Svg

To use a SVG icon as a submit control element, enclose it in a button element.

/** To delete the button default cosmetic **/
button {
   background: none;
   border: 0;
}

<form onSubmit="console.log('Deleted!'); return false;">
<button>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path></svg>
</button>
</form>

Anchor (HyperLink)

You can submit a form with a little bit of Javascript from a anchor (link)

Example:

<form onsubmit="console.log('Submitted with a link!'); return false;">
  <a href="#" onclick="this.closest('form').requestSubmit(); return false;">Submit from a link</a>
</form>

Submit on Load

A form can be submitted on load making CSRF attack on post possible.

Example:

• The HTML form

<form onSubmit="console.log('Submitted on load!'); return false;">
</form>

• The javascript with a event listener added on the load event

window.addEventListener("load",function() {
   document.forms[0].requestSubmit();
});