Как выполнить форму регистрации с подсказками?

Question

[Nina Blase]

Здравствуйте, дорогие друзья! Я начинающей верстальщик. Подскажите пожалуйста как выполнить такую веб-форму

Answer 1

[Дима Паутов]

К каждому input'у добавьте атрибут required и не мучайте себя js валидаторами, а подсказки проще простого!

<label> <!-- Даем ему свойство position: relative; -->
    <input type="text" placeholder="Подсказки" required>
        <div> <!--  Даем ему свойство position: absolute и сдвигаем. При наведении на этот div, показывайте подсказку!-->
            <p>Подсказка</p>
        </div>
</label>

Comments

[Андрей Федоров]

не нужен отдельный div, есть же title.

[Дима Паутов]

Андрей Федоров: какой еще title?? Вы макет вверху видели? Как вы мне при помощи title сделаете? Мож я чего-то не знаю?

Див нужен для того, что бы сделать круглый красный блок, а внутри него текст, который будет появляться при наведении на красный круг!

[Андрей Федоров]

codepen.io/aliencash/pen/oXLoXv
1.Наведите мышь на поле ввода
2.Попробуйте ввести не цифры

[Дима Паутов]

Андрей Федоров: и? а дизайн всплывашки, и кружок где?

[Андрей Федоров]

вам шашечки или ехать? то что вместо кружка, увидите если введете буквы

[Дима Паутов]

Андрей Федоров: Ничего нет, даже если буквы ввел! Вы мне макет сверстайте, а не свои задумки!

[Андрей Федоров]

Там все сверстано. Валидация происходит по onblur.

Answer 2

[Alexander]

bootstrap , javaScript валидация.

Answer 3

[Дмитрий Шинкарь]

плюсую касательно placeholder.

Comments

[Nina Blase]

Пожалуйста выложите пример. Потому что у меня что-то не получается.