浏览器不断添加新的 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> or <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 开始。对于 type 属性为 Date、Month、Week、Time 的输入元素， datetime-local、颜色或文件， showPicker() 提供了一种编程方式来显示选择 UI。 对于颜色和文件输入，始终可以通过调用以编程方式显示选择器 .click 在输入：
document.querySelector('input[type="color"]').click();该方法不适用于日期输入，这就是添加此新 API 的原因。 .showPicker() 也适用于颜色和文件输入，但使用它并没有真正的优势 .click().
惰性属性
总是可以通过将多个输入包装在 HTML 中来一次禁用它们 fieldset 并禁用 fieldset:
Inert 是一个新的 HTML 属性。 它不仅适用于表单，而且表单肯定是一个关键用例。 不像 disabled 属性， inert 可以应用于一个 form 元素本身。 表单中的所有内容都将是不可聚焦和不可点击的。 在辅助技术方面， inert 类似于设置 aria-hidden="true"。 不像 disabled 属性， inert 默认情况下不应用任何样式，但很容易添加自己的样式：
form[inert] {
opacity: .2;
}还有更多……
最大的是造型 <select> 元素，这是开发人员几十年来一直想要的东西。 随着引入 selectmenu.
但现在就是这样！ 最近的更新为我们一直在等待的表单功能带来了完整的浏览器支持，使它们成为生产使用的首选。
