提交日期表单状态操作_更强大的表单控件

原文：https://web.dev/more-capable-form-controls/

有了一个新事件，再加上一些自定义元素 API，表单的使用变得更加容易。

---

很多开发者构建自定义表单元素，提供浏览器未内置的控件，或自定义超越内置表单控件的外观与体验。

然而，复制 HTML 内置表单控件的特性很难。想一下当你把一个  元素加进一个表单时，它自动获得的一些特性：

• 输入框自动加进表单的控件列表

• 输入框中的值自动与表单一起提交

• 输入框参与表单校验，你可以用 :valid 和 :invalid 伪类为输入框设置样式

• 表单重置、重加载时，或浏览器尝试自动填充表单项时，输入框都会被通知

自定义表单组件通常没有这些特性。开发者能用 JavaScript 解决一些限制，比如向一个表单添加一个隐藏的  以参与表单提交。但其它特性无法单单用 JavaScript 复制。

两个 Web 新特性让构建自定义表单控件更简单，解决了现有自定义控件的限制：

• formdata 时间让一个任意的 JavaScript 对象参与到表单提交中，所以你可以无需一个隐藏的  就能添加表单数据

• Form-associated Custom Elements API 让自定义元素表现得更像内置表单控件

这两个特性可用于创建效果更好的新型控件。

构建自定义表单组件是个高级话题。本文假定您对表单和表单控件有一定的了解。当构建一个自定义表单控件时，有很多因素要考虑，特别是确定你的控件是对所有用户无障碍的。学习更多表单知识，前往 MDN 表单指南。

基于事件的 API

formdata 事件是一个让任何 JavaScript 代码参与表单提交的底层 API。该机制是这样的：

1. 你添加一个 formdata 事件监听器到你想交互的表单

2. 当一个用户点击提交按钮，该表单触发一个 formdata 事件，它包含一个持有所有待提交数据的 FormData 对象

3. 每个 formdata 监听器都有机会在表单提交前添加或修改数据

这里是一个在 formdata 事件监听器中发送一个单值的例子：

const form = document.querySelector('form');
// FormData 事件在  提交时、传输前触发
// 该事件有个 formData 属性
form.addEventListener('formdata', ({ formData }) => {
    
// https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
  formData.append('my-input', myInputValue);
});

用我们在 Glitch 的示例来尝试。务必在 Chrome 77 或更高版本上运行，以查看该 API 的运行情况。

表单关联的自定义元素

你可以把基于事件的 API 用于任何类型的组件，但它只允许你与提交过程交互。

标准化的表单控件除了提交外，还参与了表单生命周期的许多部分。表单关联的自定义元素旨在填补自定义控件和内置控件的鸿沟，并匹配了很多标准表单元素的特性：

• 当你把一个表单关联的自定义元素放进一个 ，它就像一个浏览器提供的控件，自动与该表单关联。

• 该元素可被一个  元素标记

• 该元素可设置一个与表单一起自动提交的值

• 该元素可设置一个标记，指示它是否取得有效输入。如果其中一个表单元素有无效输入，该表单则不能被提交。

• 该元素可提供一些用于表单生命周期多个部分的回调 —— 比如当该表单被禁用或重置到它的默认状态

• 该元素支持标准的 CSS 表单控件伪类，如 :disabled 和 :invalid

这么多功能！本文不会涉及所有内容，但将阐述把自定义元素与表单集成所需的基础知识。

本节假设你对自定义元素有基本的了解。有关自定义元素的介绍&