2022 年表单的新变化？

浏览器一直在添加新的 HTML、JavaScript 和 CSS 功能。以下是一些您可能错过的与表单交互的实用新增功能...

requestSubmit()

Safari 16 将成为最后支持 requestSubmit 的浏览器。

在我们了解 .requestSubmit() 的工作原理之前，让我们回顾一下使用 JavaScript 以编程方式提交表单时使用 .submit() 方法的工作原理。使用 submit() 提交表单不会触发提交事件。因此，在以下代码中，表单已提交，preventDefault() 无效，并且控制台未记录任何内容

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  // code to submit the form goes here
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
})

.submit() 还会忽略任何 HTML 表单验证。在以下标记中，即使输入具有 required 属性，表单也会在输入为空时提交

<form>   
  <label for="name">Name</label>
  <input required name="name" id="name" type="text">
</form>

.requestSubmit() 是使用 JavaScript 提交表单的另一种方法，但与 .submit() 相反，HTML 表单验证将阻止表单提交。如果表单中输入的所有数据都通过验证，则会触发 submit 事件，这意味着在以下示例中，控制台会记录“表单已提交！”

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

您之前可以通过以编程方式单击表单的提交按钮来实现这一点，但 requestSubmit 可能是更优雅的解决方案。

submitter 属性的提交事件

SubmitEvent.submitter 属性获得 全浏览器支持，并在 Safari 15.4 发布。此只读属性指定导致提交表单的 <button> 或 <input type="submit"> 元素。

<form>
  <button name="foo" value="bar" type="submit">Bar</button>
  <button name="foo" value="baz" type="submit">Baz</button>
</form>

当您有多个提交按钮或输入，每个按钮或输入都有不同的值时，只有单击以提交表单的按钮或输入的值将发送到服务器，而不是两个值。这没什么新鲜事。新的变化是，提交事件的事件监听器现在可以访问 event.submitter 属性。例如，您可以使用它为触发表单提交的按钮或输入添加一个类，或获取其 value 或任何其他 HTML 属性。

document.forms[0].addEventListener('submit', function(event) {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(event.submitter.formaction);
  event.submitter.classList.add('spinner-animation');
})

formdata 事件

这并非特别新颖，但仅 实现跨浏览器支持，并在 Safari 15 发布。formdata 事件的主要用例是使自定义元素能够参与表单提交。在 Web 组件之外，它仍然很有用。

您可以在要与其交互的表单中添加一个 formdata 事件监听器

document.querySelector('form').addEventListener('formdata', handleFormdata);

该事件既由常规 HTML 表单提交触发，也由 new FormData() 的出现触发。event.formData 包含所有要提交的数据。

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

formdata 事件监听器的回调函数在数据发送到服务器之前运行，让您有机会添加或修改要发送的数据。

function handleFormdata(event) {
  event.formData.append('name', 'John');
}

您可以在提交事件处理程序中修改或附加 FormData，但 formdata 允许您将逻辑分开。它也是在您以“传统方式”提交表单时使用隐藏输入的另一种方法，即依赖 HTML 的内置功能来提交表单，而不是使用 fetch 来完成。

showPicker() 用于输入元素

showPicker() 已 支持，自 Chrome 99、Firefox 101 以及即将发布的 Safari 16 开始。对于类型属性为 Date、Month、Week、Time、datetime-local、color 或 file 的输入元素，showPicker() 提供了一种以编程方式显示选择 UI 的方法。对于颜色和文件输入，一直可以通过以编程方式在输入上调用 .click 来显示选择器

document.querySelector('input[type="color"]').click();

此方法不适用于日期输入，这就是添加此新 API 的原因。.showPicker() 也适用于颜色和文件输入，但与 .click() 相比没有实际优势。

Inert 属性

始终可以通过将多个输入包装在 HTML fieldset 中并禁用 fieldset 来同时禁用它们

Inert 是一个新的 HTML 属性。它不仅适用于表单，但表单无疑是关键用例。与 disabled 属性不同，inert 可以应用于 form 元素本身。表单中的所有内容都将不可聚焦且不可点击。在辅助技术方面，inert 与设置 aria-hidden="true" 相似。与 disabled 属性不同，inert 默认不应用任何样式，但您可以轻松添加自己的样式

form[inert] {
  opacity: .2;
}

还有更多...

最重要的一点是 <select> 元素的样式，这是开发人员几十年来一直在追求的目标。随着 selectmenu 的引入，它看起来即将成为现实。

但现在就这些了！最近的更新为我们一直在等待的表单功能带来了全浏览器支持，使其成为生产环境的首选。