html5 json表单储存,将表单数据存储到json文件中

要将HTML5表单数据存储为JSON文件，你可以使用JavaScript的FormData API来获取表单数据，然后将其转换为JSON格式并保存到文件中。以下是一个简单的示例代码：

HTML代码：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript代码：

// 获取表单元素
var form = document.getElementById('myForm');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  // 创建FormData对象
  var formData = new FormData(form);

  // 将FormData对象转换为JSON格式
  var jsonData = {};

  formData.forEach(function(value, key) {
    jsonData[key] = value;
  });

  // 将JSON数据保存到文件中
  var file = new Blob([JSON.stringify(jsonData)], {type: 'application/json'});
  var a = document.createElement('a');
  a.href = URL.createObjectURL(file);
  a.download = 'data.json';
  a.click();
});

在上面的示例代码中，我们首先获取表单元素并监听其提交事件。在提交事件中，我们创建了一个FormData对象来获取表单数据，并将其转换为JSON格式。然后，我们将JSON数据保存到文件中，并提供下载链接。当用户点击下载链接时，浏览器会自动下载JSON文件。