Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does the reset button on html forms not reset hidden fields?

I discovered something surprising:

<html>
<head>
<script type="text/javascript">
function f()
{
document.getElementById("h").value++;
document.getElementById("x").value++;
}
</script>
</head>
<body>

<form>
<input type="hidden" name="hidden" id="h" value="5"/>
<input type="text" id="x" value="5"/>
<input name='clear' type='reset' id='clear' value='Clear'>
</form>

<button type="button" onclick="f()">Increment</button>
<button type="button" onclick="alert(document.getElementById('h').value)">Show hidden</button>

</body>
</html> 

Trying this in Firefox 4.0.1, clicking clear always resets the text input to 5, but never resets the hidden field.

I (and others) did not expect this behavior at all: we expected the hidden value to get reset too!

Can anyone point to either documentation or specs that explain why the hidden input is treated differently by the reset button?

Explanations as to why such behavior is desirable are also welcome.

like image 486
trutheality Avatar asked Jun 16 '11 06:06

trutheality


People also ask

How do you reset fields in HTML?

The <input type="reset"> defines a reset button which resets all form values to its initial values.

How do I get the reset button to work in HTML?

Type the <input type="reset"> tag into the code towards the top and/or bottom of the HTML form. Close the form after all input fields are entered with a final </form> tag. Save and preview your new adjusted form with the new reset button.

How does reset work in HTML?

The reset input type creates a button that resets the form to the default values. If the value attribute is present, the value of that attribute will be the text on the button. If not, the default wording on the reset button is “Reset”. The reset button brings the form back to it's initial, default state.

How do you reset form fields?

The HTMLFormElement. reset() method restores a form element's default values. This method does the same thing as clicking the form's <input type="reset"> control. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method.


2 Answers

FWIW, I think I can put together the full story from the answers and comments.

Usage rationale: The clear button is intended for clearing user input, and since hidden inputs are not directly accessible by the user, it doesn't make sense to allow the user to reset the hidden input's value.

Documentation and behavior: The bug report that AR pointed out is explicit about what is happening: The hidden field's value's mode is default, as is intended in the specs.
Particularly, this means that changing the value (as in the sample code in the question) changes the default value, and the reset button resets input fields to the default value, hence there is no change.
The behavior for the text input is different (even though its value is also changed programmatically) because its value's mode is not default but value, which means that there is a distinction between the default value of the input and the current value.

like image 178
trutheality Avatar answered Oct 05 '22 12:10

trutheality


The user can't see or modify the hidden field, therefore it wouldn't make any sense for them to be able to clear it by pressing a button.

like image 29
William Lawn Stewart Avatar answered Oct 05 '22 13:10

William Lawn Stewart