constructor-formelement.html (5376B)
1 <!DOCTYPE html> 2 <title>FormData: constructor (with form element)</title> 3 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> 4 <link rel="help" href="https://xhr.spec.whatwg.org/#dom-formdata"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#constructing-form-data-set"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <form> 11 <output name="do-not-submit-me-1"></output> 12 13 <datalist> 14 <input type="text" name="do-not-submit-me-2" value="bad"> 15 <select name="do-not-submit-me-3"> 16 <option value="bad" selected></option> 17 </select> 18 <input type="checkbox" name="do-not-submit-me-4" checked> 19 </datalist> 20 21 <input type="text" name="do-not-submit-me-5" disabled value="bad"> 22 <fieldset disabled> 23 <input type="text" name="do-not-submit-me-6" value="bad"> 24 </fieldset> 25 26 <button name="do-not-submit-me-7">bad</button> 27 <input type="submit" name="do-not-submit-me-8" value="bad"> 28 <input type="reset" name="do-not-submit-me-9" value="bad"> 29 <input type="image" name="do-not-submit-me-10" value="bad"> 30 31 <input type="checkbox" name="do-not-submit-me-11"> 32 <input type="radio" name="do-not-submit-me-12"> 33 34 <input type="text" value="do-not-submit-me-13"> 35 <input type="text" name="" value="do-not-submit-me-14"> 36 37 <object name="do-not-submit-me-15"></object> 38 39 <select name="select-1"> 40 <option disabled value="do-not-submit-me-16"></option> 41 <option value="do-not-submit-me-17"></option> 42 <option disabled value="do-not-submit-me-18" selected></option> 43 </select> 44 45 <select name="select-2"> 46 <option value="do-not-submit-me-19"></option> 47 <option value="submit-me-1" selected></option> 48 </select> 49 50 <select name="select-3" multiple> 51 <option value="do-not-submit-me-20"></option> 52 <option value="submit-me-2" selected></option> 53 <option value="do-not-submit-me-21"></option> 54 <option value="submit-me-3" selected></option> 55 </select> 56 57 <input type="checkbox" name="submit-me-4" value="checkbox-1" checked> 58 <input type="checkbox" name="submit-me-5" checked> 59 60 <input type="radio" name="submit-me-6" value="radio-1" checked> 61 <input type="radio" name="submit-me-7" checked> 62 63 <!-- not tested: <input type="file"> with selected files --> 64 65 <input type="file" name="file-1"> 66 67 <!-- not tested: <object>s that allow form submission --> 68 69 <input type="text" name="submit-me-8" value="text-1"> 70 <input type="text" name="submit-me-8" value="text-2"> 71 <input type="search" name="submit-me-9" value="search-1"> 72 <input type="url" name="submit-me-10" value="url-1"> 73 <input type="hidden" name="submit-me-11" value="hidden-1"> 74 <input type="password" name="submit-me-12" value="password-1"> 75 <input type="number" name="submit-me-13" value="11"> 76 <input type="range" name="submit-me-14" value="11"> 77 <input type="color" name="submit-me-15" value="#123456"> 78 79 <textarea name="submit-me-16">textarea value 80 with linebreaks set to LF</textarea> 81 82 <!-- this generates two form data entries! --> 83 <input type="text" name="dirname-is-special" dirname="submit-me-17" value="dirname-value"> 84 85 <input type="text" name="submit-me-21"> 86 </form> 87 88 <script> 89 "use strict"; 90 91 test(() => { 92 93 const form = document.querySelector("form"); 94 95 const input = document.createElement("input"); 96 input.name = "submit-me-18-\uDC01"; 97 input.value = "value-\uDC01"; 98 assert_equals(input.name, "submit-me-18-\uDC01", "input.name accepts unpaired surrogates"); 99 assert_equals(input.value, "value-\uDC01", "input.value accepts unpaired surrogates"); 100 form.appendChild(input); 101 102 const input2 = document.createElement("input"); 103 input2.name = "submit-me-\r19\n"; 104 input2.value = "value\n\r"; 105 assert_equals(input2.name, "submit-me-\r19\n", "input.name accepts \\r and \\n"); 106 assert_equals(input2.value, "value", "input.value when type=text should not contain newlines"); 107 form.appendChild(input2); 108 109 const formData = new FormData(form); 110 111 const expected = [ 112 ["select-2", "submit-me-1"], 113 ["select-3", ["submit-me-2", "submit-me-3"]], 114 ["submit-me-4", "checkbox-1"], 115 ["submit-me-5", "on"], 116 ["submit-me-6", "radio-1"], 117 ["submit-me-7", "on"], 118 ["submit-me-8", ["text-1", "text-2"]], 119 ["submit-me-9", "search-1"], 120 ["submit-me-10", "url-1"], 121 ["submit-me-11", "hidden-1"], 122 ["submit-me-12", "password-1"], 123 ["submit-me-13", "11"], 124 ["submit-me-14", "11"], 125 ["submit-me-15", "#123456"], 126 ["submit-me-16", "textarea value\nwith linebreaks set to LF"], 127 ["dirname-is-special", "dirname-value"], 128 ["submit-me-17", "ltr"], 129 ["submit-me-18-\uFFFD", "value-\uFFFD"], 130 ["submit-me-\r19\n", "value"], 131 ["submit-me-21", ""] 132 ]; 133 134 for (const t of expected) { 135 const field = t[0]; 136 const valueOrValues = t[1]; 137 const values = Array.isArray(valueOrValues) ? valueOrValues : [valueOrValues]; 138 assert_array_equals(formData.getAll(field), values, field); 139 } 140 141 const fileEntry = formData.getAll("file-1"); 142 assert_equals(fileEntry.length, 1); 143 assert_equals(fileEntry[0], formData.get("file-1")); 144 assert_equals(fileEntry[0].constructor, File); 145 assert_equals(fileEntry[0].size, 0); 146 assert_equals(fileEntry[0].name, ""); 147 assert_equals(fileEntry[0].type, "application/octet-stream"); 148 149 }, "test that FormData is correctly constructed from the form data set"); 150 </script>