Как опустить содержимое под форму заполнения?

Question

[Ondest]

Шаблон https://codepen.io/Bilal1909/pen/KKzjgzR
Проблема заключается в том, что при клике на сам плейсхолдер в шаблоне - password, email. Форма заполнения не активируется, а начинает работать при клике на форму мимо плейсхолдера. Понимаю что вроде как надо опустить содержимое тега под форму, а саму форму сделать прозрачной, но совсем не приходит в голову как это реализовать, не говоря о том что бы сделать это правильно и будет ли это вообще работать)) Буду благодарен за помощь.

Answer 1

[Arulomp]

Обычно для заголовков input используют label. Если для label в атрибуте for указать id соответствующего поля ввода, то клик по label будет переводить фокус на это поле.

<div class="inputbox">
    <input type="text" required="required" id="email">
    <label for="email">Email</label>
</div>

Ну и в стилях поменять span на label

Comments

[Ondest]

Спасибо, заработало как надо, а то пол дня долбился в эту историю))