如何在HTML(5)中正确地在<input type="number">的末尾添加一个单位？

Question

我想要一个结尾有单位的 <input type="number"> (m²)，但用户无法更改它。我现在有这个：

<label>
  Area:
  <input type="number" name="area">
</label>

我想我不能直接在 <input> 之后添加一个单位，因为那样可能会弄乱 <label>。那我该怎么办？最好使用 for 属性分隔 <label> 还是使用 CSS 添加一个 ::after 伪元素或什么？

Answer 1

尽管您可以使用 ::after 伪选择器，但最好的方法是使用标签中的 m2 为输入中预期的值提供更多上下文信息。换句话说 - 标签会告知用户输入中的值的含义。

注意允许 2.

上标呈现的 <sup> 元素

<label>
  Area (m<sup>2</sup>):
  <input type="number" name="area">
</label>

您还可以使用内容创建一个跨度并将其包含在标签中 - 在输入之后，它将显示在输入的末尾。

<label>
  Area:
  <input type="number" name="area">
  <span> m<sup>2</sup></span>
</label>

您甚至可以绝对定位它，使其显示在输入字段本身中 - 但考虑到这是一种数字输入类型 - 浏览器会在该字段的最右侧插入一个“步进器” - 因此您需要将其向左移动以避免出现这种情况，或使用 type="text" 输入并验证输入为数字。

label {
  position: relative;
}

label span {
  position: absolute;
  top: -1px;
  right: 24px;
}

<label>
      Area:
      <input type="number" name="area">
      <span> m<sup>2</sup></span>
    </label>

How to add a unit to the end of <input type="number"> properly in HTML(5)?