Как создать суб-метки для элементов ввода с помощью HTML

Question

Я использую окна для создания простой формы HTML, и я не могу понять, как создавать суб-метки для различных входных данных. Изображение (ссылка в комментарии ниже) показывает, что я пытаюсь произвести. Это только сафари? Ближе всего я пришел с помощью CSS-дисплея: блок, который позволил мне переместить ярлык поверх ввода.

Answer 1

Это можно сделать путем обертывания каждой группы меток & ввода в пределах, например. ДИВ, например, так:

<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> 

, а затем стиль этого.