做一个form表单，点击提交按钮给js的数据集合中添加新的数据(取其中之一，延申操作)

要在网页上创建一个表单，并在用户点击提交按钮后向JavaScript的数据集合中添加新的数据，你可以按照以下步骤进行：

1. 创建HTML表单元素，包括输入字段（如文本框、选择框等）和一个提交按钮。
2. 使用JavaScript编写事件处理函数，用于监听提交按钮的点击事件。
3. 在事件处理函数中，获取表单中输入字段的值，并将这些值作为对象添加到一个数组或对象中，这样就形成了一个新的数据集合。
4. （延申操作）可以对新添加的数据进行额外的处理，比如验证、显示或与其他数据交互等。

以下是一个简单的示例代码：

HTML部分:

<form id="dataForm">
  <input type="text" id="inputName" placeholder="请输入名称">
  <input type="email" id="inputEmail" placeholder="请输入邮箱">
  <button type="button" id="submitButton">提交</button>
</form>

<div id="dataList"></div>

JavaScript部分:

// 数据集合
var dataList = [];

// 获取表单元素和提交按钮
var form = document.getElementById('dataForm');
var submitButton = document.getElementById('submitButton');

// 提交按钮点击事件处理函数
submitButton.onclick = function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 获取输入字段的值
  var name = document.getElementById('inputName').value;
  var email = document.getElementById('inputEmail').value;
  
  // 创建新数据对象
  var newData = {
    name: name,
    email: email
  };
  
  // 添加到数据集合中
  dataList.push(newData);
  
  // 延申操作：将新数据对象显示在页面上
  displayData(newData);
};

// 显示数据的函数
function displayData(data) {
  var dataListDiv = document.getElementById('dataList');
  var dataListHTML = '<p>' + data.name + ' - ' + data.email + '</p>';
  dataListDiv.innerHTML += dataListHTML;
}

在这个示例中，用户在文本框中输入名称和邮箱地址，点击提交按钮后，输入的数据会作为新对象添加到`dataList`数组中，并且在页面下方显示出来。