Showing the Submitted Data in the Form
Learn how to prevent the form from getting empty when the user provides the wrong data.
We'll cover the following
Populating the form fields with normalized data
Everything works well, except the form isn’t very user-friendly.
As you may have noticed, when something is wrong with the data, the form returns to being empty.
To fix this, we should take the normalized data and use it to populate the form fields, but only if it is defined.
For most input
-type fields, we can set the value
attribute to what was submitted (don’t forget to escape the output!).
For some types of form fields, we need to use other tricks as well.
In Forms, we already saw how to re-select a submitted <select>
element’s <option>
by adding a selected
attribute to it.
Now, we learn how to check a submitted <input type="checkbox">
element dynamically:
Get hands-on with 1200+ tech skills courses.