[英]Label must have associated control
There is a div with some elements in it and I want to add a label to it.有一个包含一些元素的 div,我想向其中添加一个 label。
This is the original:这是原文:
<div className="upload-image">
<input
name="image"
id="image-input"
accept="image/*"
onChange={this.doSomething}
multiple
type="file"
className="myClass"
/>
<span className="upload-image-label">
<Icon name="image outline" />
drop the image here
</span>
</div>
after the label is added:添加 label 后:
<div className="upload-image">
<label htmlFor="image-input">Add image</label> //this line is added
<input
name="image"
id="image-input"
accept="image/*"
onChange={this.doSomething}
multiple
type="file"
className="myClass"
/>
<span className="upload-image-label">
<Icon name="image outline" />
drop the image here
</span>
</div>
Initially it was for
instead of htmlFor
but React said it is an unknown property.最初它是
for
而不是htmlFor
但 React 说它是一个未知的属性。
Now, the error says:现在,错误说:
A form label must be associated with a control
表单 label 必须与控件相关联
Any suggestions?有什么建议么?
I know that the question has been asked a while ago.我知道这个问题已经被问过一段时间了。 Still I face this error message.
我仍然面临这个错误信息。 I thought I share the result by which I was able to solve my problem.
我想我分享了我能够解决问题的结果。
Make sure that the label has htmlFor.确保 label 有 htmlFor。 the htmlFor that you mentioned for the label should be the id of the input field.
您为 label 提到的 htmlFor 应该是输入字段的 id。 Wrap the input field inside the opening and the closing tags of the label.
将输入字段包装在 label 的开始和结束标记内。
This is how the label and input field code should look like:这是 label 和输入字段代码的样子:
<label className="list-group-item" htmlFor="first-checkbox">
<input
className="form-check-input me-1"
type="checkbox"
value=""
id="first-checkbox"
/>
First checkbox
</label>;
Place the input inside the label.将输入放在 label 中。
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element .
要将 label 与另一个控件隐式关联,控件元素必须在 LABEL 元素的内容中。
Source: W3.org, Forms in HTML document - 17.9 Labels
来源: W3.org,HTML 文档中的 Forms - 17.9 标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.