HTML Course 8.4 Submit and reset buttons (button, input type=’submit’)

8.4 Submit and Reset Buttons

Submit and reset buttons are essential controls within HTML forms. They allow users to send form data to a server or clear all input fields in a form. HTML offers two syntaxes for each action:

Input-based:
- <input type=’submit’>
- <input type=’reset’>
Button-based:
- <button type=’submit’>
- <button type=’reset’>

1. Input Elements

The input element with type='submit' or type='reset' is the traditional way to add buttons.

Element	Action	Key Attributes
<input type=’submit’>	Sends form data to the server	`value` (button label) `form`, `formaction`, `formmethod`, `formenctype`, `formtarget`, `formnovalidate` `disabled`
<input type=’reset’>	Clears all form controls to their initial values	`value` (button label) `form` `disabled`

2. Button Elements

The button element provides more flexibility: you can include HTML content (images, spans) inside the button. Its default type is submit.

Element	Action	Notes
<button type=’submit’>	Sends form data	Inner HTML sets the label or icon
<button type=’reset’>	Resets form	Inner HTML sets the label or icon
<button> (no type)	Sends form (default behavior)	Equivalent to `type='submit'`

3. Common Attributes for Submit/Reset Controls

name: Name of the button, submitted with form data.
value: Text label (for input) or submitted value.
disabled: Disables the button.
form: ID of the form the button belongs to (allows placing button outside the form).
formaction (submit only): URL to which to submit, overrides action on <form>.
formmethod (submit only): HTTP method (get or post).
formenctype (submit only): Encoding type for file uploads (multipart/form-data).
formnovalidate (submit only): Skips form validation.
formtarget (submit only): Target window or frame for submission.

4. Simple Example

<!-- A basic form with submit and reset buttons -->
<form id='contactForm' action='/submit' method='post'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='name' required>
  <br>

  <label for='email'>Email:</label>
  <input type='email' id='email' name='email'>
  <br>

  <!-- Input-based submit and reset -->
  <input type='submit' value='Send'>
  <input type='reset' value='Clear'>
</form>

5. Advanced Example with Button Element and Form Attributes

<!-- Using button, form attributes, and custom content -->
<form id='registration' action='/register' method='post'>
  <label for='username'>Username:</label>
  <input type='text' id='username' name='username'>
  <br>

  <!-- Submit button with icon inside -->
  <button type='submit' formaction='/register?ref=promo' formmethod='get' formnovalidate>
    <img src='icon-send.svg' alt='Send Icon'> Register Now
  </button>

  <!-- Reset button placed outside the form via form attribute -->
</form>

<!-- Reset button outside the form -->
<button type='reset' form='registration'>
  Reset Form
</button>

6. Differences and Best Practices

Use input when you need a simple text label; use button to embed HTML or icons.
Be mindful that <button> without a type acts as submit.
Prefer semantic names and values for accessibility and server-side processing.
When placing buttons outside the form, always use the form attribute.
Use formnovalidate sparingly—only when skipping client-side validation is intentional.

Understanding these options and attributes ensures flexible and accessible form controls for your web applications.