有初始值的 form 表单在点击默认的 Reset 按钮时,表单元素并不能清空,而是恢复初始值,相信这并不是我们期望的,本文介绍的是用 javascript 解决这一问题的方法。
 1<script language="JavaScript" type="text/javascript"> 
 2<!-- 
 3// 说明:有初始值的 form 表单元素重置(reset)解决方案
 4 
 5function clearForm(formName) 
 6    var formObj = document.forms[formName]; 
 7    var formEl = formObj.elements; 
 8    for (var i=0; i<formEl.length; i++
 9    
10        var element = formEl[i]; 
11        if (element.type == 'submit') continue; } 
12        if (element.type == 'reset') continue; } 
13        if (element.type == 'button') continue; } 
14        if (element.type == 'hidden') continue; } 
15 
16        if (element.type == 'text') { element.value = ''; } 
17        if (element.type == 'textarea') { element.value = ''; } 
18        if (element.type == 'checkbox') { element.checked = false; } 
19        if (element.type == 'radio') { element.checked = false; } 
20        if (element.type == 'select-multiple') { element.selectedIndex = -1; } 
21        if (element.type == 'select-one') { element.selectedIndex = -1; } 
22    }
 
23}
 
24//--> 
25</script>

示例:
 1<form method="post" action="" name="testForm"> 
 2 
 3    <input type="text" value="text" size="30" /> <br /> 
 4    <textarea name="" rows="3" cols="30">textarea</textarea> <br /> 
 5    a<input type="checkBox" name="a" value="a" /> 
 6    b<input type="checkBox" name="a" value="b" checked="checked" /> 
 7    c<input type="checkBox" name="a" value="c" checked="checked" /> 
 8    d<input type="checkBox" name="a" value="d" /> 
 9    e<input type="checkBox" name="a" value="e" /> <br /> 
10    2<input type="radio" name="b" value="2" /> 
11    3<input type="radio" name="b" value="3" checked="checked" /><br /> 
12 
13    test1:<select name="" multiple="multiple"> 
14        <option value="11111111">11111111</option> 
15        <option value="22222222" selected="selected">22222222</option> 
16        <option value="33333333" selected="selected">33333333</option> 
17        <option value="44444444">44444444</option> 
18        <option value="55555555">55555555</option> 
19    </select> 
20 
21    <br /><br /> 
22 
23    test2:<select name=""> 
24        <option value="11">11</option> 
25        <option selected="selected">22</option> 
26        <option value="33">33</option> 
27        <option value="44">44</option> 
28        <option value="55">55</option> 
29    </select> 
30 
31    <br /><br /> 
32 
33    <input type="submit" value="Submit" /> 
34    <input type="reset" value="Reset" /> 
35    <input type="button" value="Button" /> 
36 
37    <input type="button" value="Javascript Clear" onclick="clearForm('testForm')" /> 
38 
39</form>