Как показать взаимосвязь полей формы?

Question

[Сергей]

Есть несколько полей формы: электронный адрес, имя и телефон. Главное поле ввода — email. За ним по важности следует имя, и лишь затем телефон. Как визуально показать эту иерархию? Пока на ум приходит лишь использование стрелок: от почты к имени, от имени к телефону (почта → имя → телефон). Накидайте ещё идей.

Comments

[Андрей]

фигасебе
а что еще сделать?

[Михаил Р.]

За ним по важности следует имя

Что Вы подразумеваете под "важностью"?

[Сергей]

Михаил Р., подумайте об этом так: если не заполнено предыдущее поле, следующее не доступно. Только в моём случае заполнять можно в каком угодно порядке, но при этом надо как-то визуально обозначить, что существует некая иерархия.

[Ankhena]

Сергей, я бы сменила теги вопроса на Дизайн. Причем тут CSS и HTML? У вас же не с ними проблема.

[Сергей]

Ankhena, да, вы правы.

[Алексей Уколов]

А зачем показывать эту зависимость, кому она нужна и какую пользу несёт?

[sergski]

Размерами полей.

[Сергей]

Алексей Уколов, очередная хотелка клиента, смысла в которой я особо не вижу, но которую надо сделать.

Answer 1

[alexalexes]

Выбираете поле, без которого вы не можете сделать feedback пользователю.
Если основное средство ответа пользователю - эл. почта, то делаете обязательным для заполнения это поле.
Если телефон - то, телефон.
Имя - не имеет значения.
На форме это обязательное поле помечаете звездочкой, и делаете форму не отправляемую без заполнения этого поля.
Можно не помечать звездочкой обязательное поле, если у вас эл. адрес или телефон является каналами ответа, тогда не разрешайте отправлять форму, если не заполнены оба поля, но разрешайте, если есть что-то одно.

Comments

[Сергей]

Вопрос не в этом. А в том, что одно поле "главное", а другое "зависимое", и надо эту зависимость как-то визуально показать.

[alexalexes]

В незаполненном состоянии активно только первое поле, все остальные - disabled.
Когда пользователь начинает заполнять первое поле, на втором поле снимается атрибут disabled.
Когда второе начинает заполнять, на третьем снимается disabled.
Если на каком-то поле удалили строку, то во всех последующих возвращается disabled.

[Сергей]

alexalexes, это логично, но каждое из полей должно быть доступно всегда.