Как лучше всего выделить обязательное поле в веб-форме?
Я не считаю часто используемое «*» очень красивым - может ли кто-нибудь предложить более красивый метод или указать мне пример?
Я попытался выделить поле красным цветом, как предложил один человек, но мне не понравился вид.
Смелые надписи могут помочь.
Но мне очень нравится, что "Обязательно" отображается серым в поле до тех пор, пока не будет добавлен текст. У кого-нибудь есть код для этого?
Ответы 9
добавить style = "border: тонкое красное сплошное"; " к элементу
отлично работает с большинством элементов, но не работает с набором переключателей ... или флажком (например, я согласен с требуемой службой рассылки спама)
Я не уверен, что цвет правильно передает намерение. Красный слишком похож на сообщение об ошибке, но это не так. Может, зеленая граница подтолкнет людей «пойти» на эти поля ...
Да, и thin очень по-разному отображался между Mozilla и IE, когда я последний раз проверял, - чтобы не сказать, что не этого хочет.
Обычно у меня нет возражений против того, чтобы видеть (обязательно) меньшим шрифтом либо прямо под именем поля, либо рядом с полем ввода.
Я также мог видеть использование «водяного знака текстового поля», чтобы в поле говорилось «требуется», пока они не переместят фокус на поле и не начнут печатать.
Есть ли простой способ добавить серый текст, например «Обязательно», в текстовое поле, которое исчезает при фокусе, или для этого требуется javascript?
Вы можете сделать это с помощью таблиц стилей, но вам понадобится некоторый javascript для обмена таблицами стилей после того, как пользователь щелкнет поле текстового поля.
Если вы собираетесь использовать цвет для выделения поля, имейте в виду, что некоторые люди дальтонизм (так что, возможно, предоставьте еще один индикатор)
Я нашел ответы на LukeW.com как наиболее полезные. потому что здесь нет простого решения. Это зависит от того, какой процент полей является обязательным, сколько полей в вашей форме и какова длина ваших ярлыков. В подавляющем большинстве веб-сайтов люди понимают, что полужирный шрифт является обязательным, а нормальный вес - необязательным (если какие-либо параметры выделены жирным шрифтом). Только после сбоя проверки формы я бы представил пользователю выделенные поля ввода, которые еще не были пропущены.
Если вы используете таблицы стилей для форматирования своего HTML, вы можете создать стиль для .mandatory. В качестве примера установите обязательный ввод для использования этого стиля, тогда вы сможете легче поиграть с ним, пока не получите правильное сочетание цвета, границы и других элементов стиля, подходящее для вашего общего дизайна.
HTML
<input id = "username" type = "text" class = "mandatory" />
CSS
.mandatory {
color: red;
font-size: 12pt;
font-weight: bold;
font-style: italic;
}
Я также использую звездочку в качестве OP, упомянутого как «резервная копия».
-Р
Я бы реализовал это как класс, а не реализацию, специфичную для идентификатора, поскольку по идентификатору вы можете сделать только 1 обязательный элемент
Это работает, но единственное, о чем я бы позаботился, - это сделать обязательные поля красными, а недопустимые / ошибочные поля - красными. В таком случае было бы более запутанно ...
Измените ответ, чтобы использовать класс вместо идентификатора, или это должно быть отклонено.
Возможно, вы захотите проверить www.PeterBlum.com - его профессиональный пакет проверки для проверки и форматирования элементов управления. У него есть руководства по использованию и многочисленные примеры, а также подробное руководство.
Я не знаю, какие варианты стилей доступны для этих валидаторов, но должен сказать, что это одни из самых уродливых валидаторов на стороне клиента, которые я когда-либо видел.
Мне нравится, как это сделано в ASP.NET Ajax Control Toolkit для ValidatorCallout контроль:
Мне это не нравится, потому что он не сообщает вам, что требуется, до тех пор, пока вы не попытаетесь отправить форму. Если все, что требуется, это адрес электронной почты, тогда это должно быть единственное поле, помеченное как обязательное ... как вопрос. ;-)
Вообще говоря, лучшие веб-формы - это самые простые, которые требуют от меня меньше всего мысли. «Стандарт», который развился, заключается в том, что обязательные поля имеют звездочку (*) рядом с ними. Иногда звездочка бывает красной, чтобы немного выделяться.
Зачем бороться со стандартом? Не заставляйте пользователей слишком много думать. Придерживайтесь стандарта и сохраняйте творческий потенциал для более важных вещей.
Иногда стандарты не устаревают и в конечном итоге остро нуждаются в модернизации. Хотя я знаю, что многие люди не согласятся, я бы предположил, что этот стандарт - один из них. Звездочка старая и некрасивая, и мы можем сделать ее намного лучше. Это, конечно, больше работы, но я бы предложил сохранить звездочку, но затем скрыть ее с помощью сценариев на стороне клиента и вместо этого выделить связанное поле цветом - возможно, желтым - когда оно пустое. Подумайте о тех необычных полях нового пароля, которые обновляют индикатор надежности по мере его создания. Что-то вроде того.
Иногда действительно оправдано помечать поля как обязательные и необязательные. Однако, прежде чем вы это сделаете, вы должны спросить, разумно ли запрашивать у пользователя какую-либо необязательную информацию. Это особенно актуально в регистрационных формах.
В регистрационных формах и тому подобном лучше много запрашивать только минимальную информацию. После регистрации пользователь может по желанию заполнить необязательную информацию в отдельных формах.
После того, как из формы будет убран весь ненужный мусор, вы можете увидеть, что нет необходимости отмечать поля как обязательные; либо все является обязательным, либо пользователю может быть настолько очевидно, какие поля являются необязательными, что не будет необходимости давать визуальные подсказки по этому поводу.
Дубликаты: stackoverflow.com/questions/1861027/…, stackoverflow.com/questions/262922/…