最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Label must have associated control - Stack Overflow

programmeradmin6浏览0评论

There is a div with some elements in it and I want to add a label to it.

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:

<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.

Now, the error says:

A form label must be associated with a control

Any suggestions?

There is a div with some elements in it and I want to add a label to it.

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:

<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.

Now, the error says:

A form label must be associated with a control

Any suggestions?

Share Improve this question asked Jun 10, 2020 at 14:47 Leo MessiLeo Messi 6,21622 gold badges79 silver badges154 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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. the htmlFor that you mentioned for the label should be the id of the input field. Wrap the input field inside the opening and the closing tags of the label.

This is how the label and input field code should look like:

<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.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.

Source: W3, Forms in HTML document - 17.9 Labels

发布评论

评论列表(0)

  1. 暂无评论