A submit control, when clicked, first triggers the browser's built-in form validation (checking `required` fields, `type="email"` formatting, `min`/`max` ranges, etc.) — if anything fails, the browser shows its native validation message and blocks submission. If validation passes, the form's data is sent according to its `action`/`method`, or, if a JavaScript `submit` event listener calls `event.preventDefault()`, the default navigation is cancelled so the code can handle the data itself (e.g. via `fetch`).
1Understanding Submit
A submit control, when clicked, first triggers the browser's built-in form validation (checking required fields, type="email" formatting, min/max ranges, etc.) — if anything fails, the browser shows its native validation message and blocks submission. If validation passes, the form's data is sent according to its action/method, or, if a JavaScript submit event listener calls event.preventDefault(), the default navigation is cancelled so the code can handle the data itself (e.g. via fetch).
A form can have multiple submit buttons with different name/value pairs — whichever one the user actually clicks has its own value included in the submitted data, letting the server distinguish which button was pressed (e.g. 'Save Draft' vs 'Publish').
<form>
<input type="email" name="email" required>
<button type="submit">Sign Up</button>
</form>2Practical Example
Here is a real-world application of Submit showing how it is used in production HTML.
<!-- Two differently-named submit buttons in one form -->
<button type="submit" name="action" value="save_draft">Save Draft</button>
<button type="submit" name="action" value="publish">Publish</button>3Best Practices
Follow these guidelines when working with Submit:
1. Use a clear, action-oriented label ('Create Account', not just 'Submit')
2. Rely on native HTML validation (required, type, pattern) before adding custom JavaScript validation
3. Disable the submit button (or show a loading state) while an async submission is in progress, to prevent duplicate submits
Tip: A form can have multiple submit buttons with different name/value pairs — whichever one the user actually clicks has its own value included in the submitted data, letting the server distinguish which button was pressed (e.g. 'Save Draft' vs 'Publish').
<form>
<input type="email" name="email" required>
<button type="submit">Sign Up</button>
</form>