The form element in depth
Learn all about the form element, when you should use a form, and how a form works in detail.
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 will 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
How does a
<form> work? #
You learned that a
<form> is the best way to handle user data. You may wonder now, how does a form work?
<form> is a container for interactive form controls.
<input type="text" name="name" id="name">
How does form submission work? #
When you submit a
<form>, the browser checks the
<form> attributes. The data is sent as a
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.
GET request, or by code on the backend using a
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 (
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 will be processed should be
Show form One possible solution is using this form:
<form method="post" action="/color">
<label for="color">What is your favorite color?</label>
<input type="text" name="color" id="color">
Ensure users can submit your form #
There are two ways to submit a form. You can click the Submit button, or press
Enter while using any form control.
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
Enable users to submit files #
<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
<form method="post" enctype="multipart/form-data">
To make sure files can be submitted, change it to
multipart/form-data. Without this encoding, files can't be sent with a
What value for
enctype is needed to submit files?
Is it possible to send user data without a
How can you submit a
Enter. Click on an
<input type="image">. All the above.