If you're expecting the reset button to empty out the form, that's not the way reset works. It will reset the form fields to what they were when the page was loaded. In this case, you have pre-filled content in your form, so clicking reset will simply undo any user changes since the page-load.
To reset all form fields to blank/nothing, you will need javascript. First get the form DOM object, then iterate over all the input types you want to reset, and set each field.value = '' (input text types / textarea), or modify attributes (for select, radio, checkbox etc.) to deselect and so on. Turn that into a function (there's probably a ready piece somewhere out there, I seem to have lost mine), and attach it to your reset button's click event -- or your form's reset event.
Edit: On a quick search, here's a basic example of how to clear a form to empty values.
Edit: If you're not concerned over anything but text fields, here's a simple way to do this. We add a "reset" event listener to the form, and when it fires, all fields are set to empty string.
function setFormCleanReset(formId) {
let formEl = document.querySelector(formId);
// Add event listener for reset event
formEl.addEventListener('reset', function(e) {
// Iterate all non-hidden fields, set values to ''
for(const fieldEl of formEl.querySelectorAll('input:not([type=hidden])')) {
// @todo check input type and handle "select" etc.
fieldEl.setAttribute('value', '');
}
});
}
// usage: setFormCleanReset('my_form_id');
