在客户端处理 HTML 表单时，在浏览器中，处理通过 HTTP POST 请求提交的数据在技术上是不可能的。
POST 请求通常从网页上的 HTML 表单提交，但请记住，它们也可以通过其他方式发送。

问题是，尽管浏览器知道数据，但提交数据的行为（例如，通过在 UI 中按下提交按钮）通常会使浏览器将 HTML 表单中的数据作为 HTTP post 请求发送到服务器。
这意味着服务器在收到 HTTP POST 请求后会知道数据，但它不能自己将数据暴露给客户端。

尽管客户端在提交数据后可能仍保留数据的缓存副本（通过按下浏览器中的后退按钮可以明显看出），但无法通过 JavaScript 访问该缓存副本。
我不认为有任何计划来改变这种行为，因为将数据提交到服务器只是为了在客户端再次处理它是非常低效的。

但是，JavaScript 确实有一个名为 preventDefault 的方法，我们可以使用它来阻止提交表单时浏览器的默认行为。
我已经在这篇文章中介绍了这个主题：在 JavaScript 中处理 HTML 表单。

这是一个简单的脚本，我们可以使用它来测试大多数进行开发的 HTML 表单。
要使用该脚本，我们可以将它放在 HTML 页面正文最后的脚本元素中。

let exampleForm =  document.querySelector('form');
exampleForm.addEventListener('submit', event => {
  event.preventDefault();
  let inputElements = exampleForm.querySelectorAll("input");
  inputElements.forEach(function(input) {
    console.log(input.value);
  });
});

该脚本将获取每个 input 元素的 value 属性的内容，这对于大多数用途不是很有用，但对于学习如何使用 HTML 表单非常有用。

它还假设 HTML 页面上只有一个表单元素。
如果我们有更多表单，我们可以使用我们正在测试的表单的唯一 ID 在 querySelector 中移出表单。
这就是为什么我认为 querySelector 比 getElementByID 更好的原因——它使用起来非常灵活。

访问 HTML 表单数据

与服务器端不同（例如在 PHP 中），我们无法轻松访问 HTML 表单数据，因为我们无法处理来自客户端的 HTTP POST 请求，并且无法从 JavaScript 访问“POST 参数”——我们但是可以在提交数据之前访问表单内的元素。

与其考虑客户端中的 POST 参数，不如将 POST 数据视为 HTML 表单中的数据。
虽然数据存在于表单中，但尚未发布，因此我们需要以不同于在服务器上的 PHP 访问它的方式访问它。

通过使用 addEventListener 方法添加事件侦听器，我们可以“监听”表单的提交事件，然后我们可以使用 preventDefault 方法拦截该事件。

也不可能像在 PHP 中那样通过全局 POST 数组在一个地方访问所有数据。
但是，如前所述，我们仍然可以访问数据，而它仍然位于单个表单元素中。
为了使这尽可能简单，给每个输入元素一个唯一的 ID 会有所帮助。
无论如何，我们需要这样做以优化标签可访问性！

在相关元素被赋予唯一 ID 后，我们可以使用 querySelector 访问它们：

let exampleForm =  document.querySelector('form');
exampleForm.addEventListener('submit', event => {
  event.preventDefault();
  let whatever = exampleForm.querySelector("#some_unique_input_id");
  console.log(whatever.value);
});

input 元素的内容包含在 value 属性中，这意味着我们可以在纯 JavaScript 中像这样访问它：

let whatever = exampleForm.querySelector("#some_unique_input_id");
let someValue = whatever.value;
//Testing via console.log() or alert()
console.log(someValue);
//alert(someValue)

如果我们正在处理一个 textarea ，我们可以改用innerHTML：

let someValue = whatever.innerHTML;