HTML | DOM 输出 htmlFor 属性

在 HTML 中，for 属性定义了 label 与 input 元素之间的关系，而在 React 中，由于 for 是 JavaScript 的保留字，因此使用 htmlFor 属性来替代。

使用语法

React 中使用 htmlFor 属性的语法如下：

<label htmlFor="input-id">Label</label>
<input id="input-id" type="text" />

在这个例子中，我们使用了 htmlFor 属性来指定 input 元素的 ID，然后使用 label 元素来包裹文字“Label”，这样就可以点击“Label”来聚焦到 input 元素了。

HTML DOM 的输出

在 DOM 对象中，htmlFor 属性代表了 label 元素的 for 属性，例如：

console.log(document.querySelector('label').htmlFor); // output: "input-id"

这里我们使用了 document.querySelector() 来获取第一个匹配的 label 元素，并输出了它的 htmlFor 属性。

总结

在 React 中使用 htmlFor 属性能够帮助我们更好地创建具有可访问性的表单，使其机器浏览能够理解我们的表单是如何工作的。在输出到 HTML DOM 时，htmlFor 属性与 for 属性是等价的。