正确理解RESET类型的INPUT控件实现重置效果的机制

来源:互联网 发布:网络通信设备 编辑:程序博客网 时间:2024/06/03 07:25

    我们在填写表单的时候,往往都会发现其中有一个“重置”按钮,其作用也就是重置所有的控件,方便大家在填写错误的情况下,一次性恢复所有的控件的值,但这里可能有一个误解,就是点击重置按钮,就是将所有的控件的内容“清空”,这可能跟我们日常的应用有很大的关系,因为大多数情况下,其作用的确是清空所有控件(一般为text)的内容,于是,很有可能会给我们一个印象,是不是reset方法的作用就是清空所有的控件的值……

    其实,不是这样的,reset真正的作用是将处于form中的所有控件都恢复到控件的“初始状态”,这个初始状态可不等于清空其内容,指的是在页面生成、控件生成的时候,控件自身的默认值!每个控件都有其默认值,当然,我们可以选择设置或者不设置,或者通过javascript的方式动态初始化控件的值,但,请一定要理解,只有控件源码中填写了的值才能成为控件的默认值,javascript动态变更控件值的方式,虽然给用户的感觉是初始化了页面控件,但这些值并不是控件的真正默认值哦,下面有一个例子,大家可以试试:

<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>