A form eventually needs a way to be submitted. That's what buttons are for - and more specifically, three different kinds of them.

input type="submit": the submit button

<input type="submit" value="Submit">

With type="submit", value isn't the value to be submitted like elsewhere, but the text displayed on the button. Clicking this button tries to submit the form.

The <button> element

There's also a dedicated <button> element that does the same thing, but is more flexible, because the text goes between the tags instead of in an attribute - so you can, for example, put other elements inside it too:

<button type="submit">Send Message</button>

The three button types

Both <input> and <button> support three possible type values:

• type="submit": submits the form (this is also the default value for <button> if you don't specify a type at all - which is why it's better to always write it out explicitly).
• type="reset": resets all fields in the form back to their original state.
• type="button": does nothing on its own - this type is only meant to later trigger a custom action with JavaScript (not part of this tutorial).

Finishing Finn's form with a submit button

<form>
  <p>
    <label for="first-name">Your first name:</label><br>
    <input type="text" name="first-name" id="first-name" required>
  </p>

  <p>
    <label for="email">Your email:</label><br>
    <input type="email" name="email" id="email" required>
  </p>

  <p>
    <label for="message">Your message:</label><br>
    <textarea name="message" id="message" rows="5" cols="40"></textarea>
  </p>

  <button type="submit">Send Message</button>
</form>

Click the button in your browser. You'll see the page briefly reload (or a browser error message, if required fields were left empty) - that's normal, since there's no server behind the scenes actually processing the data yet.