在前端开发中，我们常常需要从 HTML 表单中收集用户输入的数据。这些数据通常会以键值对的形式被提交到服务器端进行处理。本文将介绍如何使用 JavaScript 从 HTML 表单中获取这些键值对数据。
步骤一：获取表单元素
首先，我们需要获取表单元素。可以通过以下代码获取一个 ID 为 myForm 的表单：
const form = document.getElementById('myForm');如果没有 ID，也可以通过其他方式获取表单元素。例如，通过标签名获取第一个表单：
const form = document.getElementsByTagName('form')[0];步骤二：遍历表单元素
接下来，我们需要遍历表单元素，获取每一个表单控件的名称和值。可以通过以下代码实现：
const data = {};
for (let i = 0; i < form.elements.length; i++) {
const element = form.elements[i];
if (element.name) {
data[element.name] = element.value;
}
}此处创建了一个空对象 data，然后遍历表单元素，对于每一个有名称的表单控件，将其名称作为属性，将其值作为属性值存储到 data 对象中。
需要注意的是，如果表单控件没有名称（即 element.name 为空），则不会被包含在结果集中。
完整示例代码
-- -------------------- ---- -------
----- ------------
------ ------------------------
------ ----------- --------- ----------------
------ --------------------------
------ ------------ ---------- -----------------
------ ----------------------
------ ------------- -------- ---------------
------- -----------------------------
-------
--------
----- ---- - ----------------------------------
----- ---- - ---
--- ---- - - -- - - --------------------- ---- -
----- ------- - -----------------
-- -------------- -
------------------ - --------------
-
-
------------------
---------结论
以上就是从 HTML 表单中获取键值对数据的完整步骤和示例代码。通过这种方式，您可以方便地收集用户输入的数据并将其提交到服务器端进行处理。需要注意的是，表单控件必须具有名称才能被正确包含在结果集中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28260