The mechanism of correct understanding of reset type input control to implement reset effect

When we fill out the form, we often find that there is a "reset" button, its role is to reset all the controls, so that everyone in the wrong fill in the case, a one-time recovery of all the control values, but there may be a misunderstanding, that is, click the Reset button, that is, all the contents of the control "empty", This may have a lot to do with our day-to-day applications, because in most cases, its role is to clear all the controls (generally text) content, so it is likely to give us the impression that the reset method is to empty the value of all the controls ...

Actually, it's not, reset. The real effect is to restore all the controls in the form back to the "initial state" of the control, which is not equal to emptying its contents, referring to the default value of the control itself when page generation, control generation. Each control has its default value, of course, we can choose to set or not set, or dynamically initialize the value of the control through JavaScript, but be sure to understand that only the value that is filled out in the control's source code becomes the default value of the control, and JavaScript dynamically changes the value of the control. Although the feeling to the user is that the page control is initialized, these values are not the true default values of the control. Oh, here's an example, you can try:

<form name= "Form1" action= "regx.htm" >

<input type= "text" value= "AAA"/>

<input type= "text" value= "BBB"/>

<input type= "text" value= ""/>

<select>

<option value= "AAA" >aaa</option>

<option value= "BBB" selected>bbb</option>

<option value= "CCC" >ccc</option>

</select>

<input type= "reset" value= "reset"/>

</form>