如何使用 HTML 为输入元素创建子标签答案

【问题标题】：How to create sub-labels for input elements using HTML如何使用 HTML 为输入元素创建子标签
【发布时间】：2014-10-21 18:05:35
【问题描述】：

我正在使用 Windows 创建一个简单的 HTML 表单，但我不知道如何为各种输入创建子标签。图片（下面评论中的链接）显示了我正在尝试制作的内容。这是Safari唯一的事情吗？我最接近的是使用 CSS display:block，它允许我在输入顶部移动标签。

【问题讨论】：

s21.postimg.org/3v81s2adj/formslabel.png
通过子标签，您的意思是您希望文本进入框中，然后在用户单击框时消失？
不，在文本框之外

标签： html css input label

【解决方案1】：

您可以通过将每组标签和输入包装在例如div，像这样：

<div class="form-line">
   <div class="form-field">
      <input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
      <label class="form-field-label" for="input1">
         Text 1
      </label>
   </div>
   <!-- other groups go here -->
</div>

这是 CodePen example

【讨论】：

【解决方案2】：

要做到这一点，你需要类似的东西

<input type='name' class='my-input'>
<label for="name">
    <span class="label">First</span>
</label>

然后设置样式。

【讨论】：