The form element in-depth

In a previous module, you learned how to use the <form> element. In this module, you learn how a form works, and when to use a form.

Should you use a <form> element?

You don't always need to put form controls in a <form> element. For example, you might provide a <select> element for users to choose a product category. You don't need a <form> element here, as you're not storing or processing data on your backend.

However, in most cases when you store or process data from users, you should use the <form> element. As you learn in this module, using a <form> gives you a lot of built-in functionality from browsers that you would otherwise have to build yourself. A <form> also has many accessibility features built-in by default. If you want to avoid a page reload when a user submits a form, you can still use the <form> element, but enhance it with JavaScript.

How does <form> work?

You learned that a <form> is the best way to handle user data. You may wonder now, how does a form work?

The <form> is a container for interactive form controls.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

How does form submission work?

When you submit a <form>, the browser checks the <form> attributes. The data is sent as a GET or POST request according to the method attribute. If no method attribute is present, a GET request is made to the URL of the current page.

How can you access and process the form data? The submitted data can be handled by JavaScript on the frontend, with a GET request, or by code on the backend, with a GET or POST request. Learn more about request types and transferring form data.

When the form is submitted, the browser makes a request to the URL that is the value of the action attribute. In addition, the browser checks if the Submit button has a formaction attribute. If this is the case, the URL defined there is used.

Furthermore, the browser looks up additional attributes on the <form> element, for example, to decide if the form should be validated (novalidate), autocomplete should be used (autocomplete="off") or what encoding should be used (accept-charset).

Try to build a form where users can submit their favorite color. The data should be sent as a POST request, and the URL where the data is processed should be /color.

<form method="post" action="/color">
    <label for="color">What is your favorite color?</label>
    <input type="text" name="color" id="color">
    <button>Save</button>
</form>

Ensure users can submit your form

There are two ways to submit a form. You can click a Submit button or press Enter, while using any form control.

Always use actionable language when creating your Submit button. For example, Proceed to payment or Save changes. This helps your users understand the next steps of your form.

You can add a Submit button in various ways. One option is to use a <button> element inside your form. As long as you don't use type="button" it works as a Submit button. Another option is to use <input type="submit" value="Submit">.

A third option is to use <input type="image" alt="Submit" src="submit.png">, to create a graphical Submit button. However, now that you can create graphical buttons with CSS, it's not recommended to use type="image".

Finally, avoid adding timeouts. Give users as much time as they want to submit a form. Timeouts cause data loss and frustrate your users. Read the W3C form timeout guidelines.

Enable users to submit files

Use <input type="file"> to enable people to upload and submit files if necessary.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

First, add an <input> element with type="file" to your form. Add the multiple attribute if users should be able to upload multiple files.

One more change is needed to ensure users can upload files—set the enctype attribute on your form. The default value is application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
...
</form>

To make sure files can be submitted, change it to multipart/form-data. Without this encoding, files can't be sent with a POST request.

Check your understanding

Test your knowledge of the form element

Resources

• The form HTML element
• Submit button best practices