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

Question

我使用windows创建一个简单的HTML表单，我无法弄清楚如何为各种输入创建子标签。图片（下面评论中的链接）显示了我想要制作的内容。这只是Safari吗？我最接近的是使用CSS display：block，它允许我在输入的顶部移动标签。

Answer 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

Answer 2

要做到这一点，你需要像

这样的东西

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

然后风格。