为输入添加标签答案

【问题标题】：Add label to input为输入添加标签
【发布时间】：2020-06-10 07:09:20
【问题描述】：

我有一个用于上传文件的输入 (type="file")。

<div className="upload-image">
    <input
      accept="image/*"
      onChange={this.toSomething()}
      type="file"
      className="imgr"
    />
    <span className="upload-image-label">
      <Icon name="image outline" />
      Drag & drop image or click here
    </span>
  </div>

我想在输入部分上方添加一个标签，所以我将它添加到输入中：

<div className="upload-image">
    <input
      accept="image/*"
      label="Add Image" // this line was added
      onChange={this.toSomething()}
      type="file"
      className="imgr"
    />
    <span className="upload-image-label">
      <Icon name="image outline" />
      Drop image here
    </span>
  </div>

很遗憾，它没有出现。怎么了？

【问题讨论】：

输入标签是一个标签，而不是一个属性

标签： html css forms input

【解决方案1】：

正如 px1mp 所说，在 HTML5 中，label 是一个标签，而不是一个属性。查看the Mozilla team documentation about labels。

您可以通过执行以下操作来实现您正在寻找的东西：

<div className="upload-image">
    <label for="image-input">Add image</label>
    <input
      name="image"
      id="image-input"
      accept="image/*"
      onChange={this.toSomething()}
      type="file"
      className="imgr"
    />
    <span className="upload-image-label">
      <Icon name="image outline" />
      Drop image here
    </span>
  </div>

【讨论】：