Showing the Submitted Data in the Form

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: