html - 如何使用 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