对使用表单的有用补充（附代码）浏览器在不断增加新的HTML、JavaScript和CSS功能。这里有一些你可能已经错过的

浏览器在不断增加新的HTML、JavaScript和CSS功能。这里有一些你可能已经错过的对使用表单的有用补充...

`requestSubmit()`

Safari 16将是最后一个增加对requestSubmit 的支持的浏览器。

在我们看看.requestSubmit() 是如何工作的之前，让我们提醒自己，在使用.submit() 方法时，用JavaScript编程提交表单是如何工作的。用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提交表单的另一种方式，但与相比，HTML表单验证将阻止表单被提交。如果在表单中输入的所有数据都通过了验证，事件将被触发，这意味着在下面的例子中，"表单提交！"将被记录到控制台。.submit() submit

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

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

你已经可以通过程序化地点击表单的提交按钮来实现这一点，但requestSubmit ，也许是一个更优雅的解决方案。

`submitter` 提交事件的属性

随着Safari 15.4的发布，SubmitEvent.submitter 属性获得了全面的跨浏览器支持。这个只读的属性指定了导致表单被提交的<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 事件的主要使用情况是使自定义元素能够参与表单提交。不过，在网页组件之外，它仍然是有用的。

你将一个formdata 事件监听器添加到你想与之互动的表单中：

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

该事件既可以由普通的HTL表单提交触发，也可以由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中都支持。对于类型属性为日期、月份、星期、时间、、颜色或文件的输入元素，提供了一种编程方式来显示选择用户界面。对于颜色和文件输入，一直可以通过在输入上调用来编程显示选择器。datetime-local showPicker() .click

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

这种方法不适用于日期输入，这就是为什么添加了这个新的API。.showPicker() 也适用于颜色和文件输入，但与.click() 相比，使用它并没有真正的优势。

Datepicker open to August 2022.

惰性属性

一直以来，通过将多个输入包在一个HTMLfieldset 中并禁用fieldset ，就可以一次禁用多个输入。

CodePen 嵌入回退

Inert是一个新的HTML属性。它不只适用于表单，但表单肯定是一个关键的用例。与disabled 属性不同，inert 可以应用于一个form 元素本身。表单内的所有内容都将是不可聚焦和不可点击的。当涉及到辅助技术时，inert 类似于设置aria-hidden="true" 。与disabled 属性不同，inert 默认不应用任何样式，但很容易添加你自己的样式：

form[inert] {
  opacity: .2;
}

CodePen 嵌入回退

还有更多的事情要做...

最重要的一点是对<select> ，这是开发者几十年来一直想要的东西。它看起来将在不久的将来成为现实，因为引入了 [selectmenu](https://css-tricks.com/the-selectmenu-element/).

但现在就这些了!最近的更新为我们期待已久的表单功能带来了完整的浏览器支持，使它们成为生产使用的首选。

对使用表单的有用补充（附代码）

requestSubmit()

submitter 提交事件的属性

formdata 事件

showPicker() 对于输入元素