reset.html (3236B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>input type reset</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/#reset-button-state-(type=reset)"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="log"></div> 9 <form> 10 <input type=text id=input1 value="foobar"> 11 <input type=text id=input2> 12 <input type=reset id=r1> 13 </form> 14 15 <input type=text id=input3 value="barfoo"> 16 17 <table> 18 <form> 19 <tr> 20 <td> 21 <input type=text id=input4 value="foobar"> 22 <input type=reset id=r2> 23 </td> 24 </tr> 25 </form> 26 </table> 27 28 <div> 29 <form> 30 <input type=text id=input5 value="foobar"> 31 </div> 32 <input type=reset id=r3> 33 </form> 34 35 <div> 36 <form> 37 <input type=reset id=r4> 38 </div> 39 <input type=text id=input6 value="foobar"> 40 </form> 41 42 <form id=form5> 43 <input type=reset id=r5> 44 </form> 45 <input form=form5 type=text id=input7 value="foobar"> 46 47 <form id=form6> 48 <input type=text id=input8 value="foobar"> 49 </form> 50 <input type=reset form=form6 id=r6> 51 52 <script> 53 var input1 = document.getElementById('input1'), 54 input2 = document.getElementById('input2'), 55 input3 = document.getElementById('input3'), 56 input7 = document.getElementById('input7'), 57 input8 = document.getElementById('input8'), 58 r1 = document.getElementById('r1'); 59 60 test(function(){ 61 assert_equals(input1.value, "foobar"); 62 assert_equals(input2.value, ""); 63 assert_equals(input3.value, "barfoo"); 64 input1.value = "foobar1"; 65 input2.value = "notempty"; 66 input3.value = "barfoo1"; 67 assert_equals(input1.value, "foobar1"); 68 assert_equals(input2.value, "notempty"); 69 assert_equals(input3.value, "barfoo1"); 70 r1.click(); 71 assert_equals(input1.value, "foobar"); 72 assert_equals(input2.value, ""); 73 assert_equals(input3.value, "barfoo1"); 74 }, "reset button only resets the form owner"); 75 76 test(function(){ 77 assert_false(r1.willValidate); 78 }, "the element is barred from constraint validation"); 79 80 test(function(){ 81 assert_equals(input1.value, "foobar"); 82 assert_equals(input2.value, ""); 83 assert_equals(input3.value, "barfoo1"); 84 r1.disabled = true; 85 r1.click(); 86 assert_equals(input1.value, "foobar"); 87 assert_equals(input2.value, ""); 88 assert_equals(input3.value, "barfoo1"); 89 }, "clicking on a disabled reset does nothing"); 90 91 function testReset(inputId, buttonId) { 92 var inp = document.getElementById(inputId); 93 assert_equals(inp.value, "foobar"); 94 inp.value = "barfoo"; 95 assert_equals(inp.value, "barfoo"); 96 document.getElementById(buttonId).click(); 97 assert_equals(inp.value, "foobar"); 98 } 99 100 test(function(){ 101 testReset("input4", "r2"); 102 testReset("input5", "r3"); 103 testReset("input6", "r4"); 104 }, "reset button resets controls associated with their form using the form element pointer"); 105 106 test(function(){ 107 testReset("input7", "r5"); 108 }, "reset button resets controls associated with a form using the form attribute"); 109 110 test(function(){ 111 testReset("input8", "r6"); 112 }, "reset button associated with a form using the form attribute resets all the form's controls"); 113 </script>