提交表单的时候需要获取到用户在表单元素填写或者选择的值，然后再做进一步的处理，比如把数据发送给后端服务接口去处理。

打开文档使用的脚本文件，在里面先声明一个 formElement ，用一下 document.querySelector 选择 form 这个元素。下面再声明一个 textField，用一下 document.querySelector，选中 input[type=text] 元素。 复制三份，声明一个 emailField，选择的元素是 input[type=email]，再声明一个 passwordField，选择的元素是 input[type=password]。下面是 fileField，选择的元素是 input[type=file] 。

然后声明一个 radios，用一下 document.getElementsByName，在单选按钮上都用了 name 属性，名字是 agreement。复制一份，再声明一个 checkboxes，用一下 document.getElementsByName，获取到名字是 interests 的元素。

用一下 formElement 表单元素的 addEventListener ，监听 submit 事件，也就是提交表单事件，提供一个处理器，有个 event 参数，在处理器里面，先用一下 event.preventDefault() 防止事件默认行为。

然后声明一个 name，它的值是 textField 里的 value 这个属性的值，这个属性的值就是用户在文本框里输入的内容。下面声明一个 email，它的值是 emailField 里的 value 属性，再声明一个 password，它的值是 passwordField.value。

再声明一个 files，它的值是 fileField 里的 files 这个属性。选择文件元素的这个属性的值就用户选择的文件列表。

下面再处理一下单选按钮还有复选框里的值，用 let 声明一个 interests ，默认值是一个空白的数组。再用 let 声明一个 agreement 默认值是空白字符。

然后用一下 radios.forEach， 循环处理一下 radios 里的项目，提供一个函数，当前项目可以叫 item。函数里判断一下 item.checked ，如果单选按钮被勾选了，这个属性的值就会是 true，如果它的值是 true，我们可以设置一下 agreement 的值，让它等于 item 的 value 这个属性，也就是在 radio 类型的 input 元素上，用 value 属性设置的值。

再处理一下复选框，用一下 checkboxes.forEach，循环处理一下复选框元素，提供一个函数，当前项目可以叫 item，函数里判断一下 item.checked，如果复选框被勾选了，可以用一下 interests.push 这个方法，把 item.value 交给这个方法。这个 push 方法是数组提供一个方法，它可以往数组里添加一个数组项目。

最后再用一些 console.log 在控制台上输出这些值，输出字符串 name: 后面加上 name 的值，再输出 email: 加上 email 表示的值。

再输出 password: 然后是 password 表示的值，然后再输入 files，加上 files 表示的值。

下面再输出 agreement: 还有 agreement 表示的值，最后还有一个 interests: 再加上 interests 表示的值。

测试

然后浏览器测试一下，在文本框里输入一些内容，再勾选一下单选按钮，还有复选框，点击 提交 ，触发了表单的 submit 事件以后，会在控制台上输出表单元素里的值。