26 Jule 2009 at 14:26

Как написать слово в поле для пароля так, что бы его было видно?

Website development

3.1K 29

Comments 29

Kottenator 26.07.2009 at 14:29

Спасибо за статью. Хорошая штука, usable.

UFO landed and left these words here

BlackStorkKCO 26.07.2009 at 15:01

Почему это бывает надо:

1. Заказчик так захотел
2. Дизайнер так нарисовал

Конечно, обоих этих людей можно бывает отговорить, но не всегда.

По поводу подставления логина — ну что ж поделать. Красота и удобство в этом случае не смогут уживаться.

-8

UFO landed and left these words here

WebMast 26.07.2009 at 15:09

Я когда-то тоже пытался сделать что-то подобное, но потом решил, что без этого очень хорошо.

Удобство? Да для каждого интернет-серфера уже довно вошло в привычку видеть два поля рядом. Вот и все удобство.

q_styler 27.07.2009 at 03:32

1. я не верю, что заказчика нельзя будет убедить в этом.
2. нахрен такого дизайнера, который на столько не ценит время коллеги программиста/верстальщика.

-1

Victor_R 26.07.2009 at 15:22

Надписи на полях «логин» и «пароль» наиболее корректно офрмить как теги <label>,
которые позиционированы абсолютно и расположены над соответствующими полями.
Посмотрите, как это сделано в форме авторизации на странице yandex.ru

+25

nekt 26.07.2009 at 15:35

самый полезный способ в статье и не описан :)

Goodkat 26.07.2009 at 16:17

для этого и придуманы комментарии :)

glazov 26.07.2009 at 19:12

Собственно вот. Виталий Харисов все прекрасно описал.

glazov 26.07.2009 at 19:18

Странно, ссылка пропала. Ладно, напишу так: company.yandex.ru/experience/verstka-elementov-v-obschem-vide/index.html#/presentation/20/

q_styler 27.07.2009 at 03:30

это как раз первое о чём я подумал, когда жал «читать дальше»

FloppyFormator 26.07.2009 at 15:28

Предлагаю четвёртый вариант: прозрачный фон и надпись под инпутом.

-2

kossnocorp 26.07.2009 at 17:09

Бордер поломается

FloppyFormator 26.07.2009 at 17:41

Бордер тоже можно внизу подрисовать :)
Ну а вообще в ФФ не ломается, кажись.

13i 26.07.2009 at 15:30

«Сейчас стало очень модно делать формы, в которых заголовок поля для ввода написан в самом поле.»
— А я против такой моды. Имхо, надо писать стандартно — слева или сверху, а не внутри.

nekt 26.07.2009 at 15:34

1. IE можно заставить понять такой метод. Для этого перед изменением типа можно вытащить инпут из дом-дерева. А после изменения — вставить обратно.

dfilatov 26.07.2009 at 18:12

А можете написать как вы это делаете? Чего-то у меня с ходу не получилось, вылазит обычная ошибка IE про атрибут type, даже если элемент вынут из дерева.

nekt 26.07.2009 at 23:24

Не думаю что отыщу IE для тестов сейчас или кусок кода что сие делал.

Похожий подход я использовал в шаблонизаторе для JS. В том месте где надо было выдать инпут, вызывался следующий код:

var input = document.createElement('input')

input.type="sometype"

parentElement.appendChild(input)

Если поменять местами 2 и 3 строчку — выдается ошибка в IE.

В данном случае код вкратце должен быть такой:

var input = document.getElementById('login')

var parent = input.parentNode

var before = getNextNode(input) // тут мы берем ноду, что иджет за инпутом

parent.removeChild(input)

input.type='smth'

parent.insertBefore(input,before)

dfilatov 27.07.2009 at 13:01

такой код не работает, будет ошибка в ие в строке предпоследней строке, несмотря на то, что вы его вынимаете из дома.

nekt 28.07.2009 at 06:51

Хм. Возможно там еще какая-то кракозяба. А возможно и не получится так сделать.

Мне щас не на чем погонять-потестировать. :(

iswitch 26.07.2009 at 18:29

А мне нравиться реализация на me.com. Там ни какие скрипты не используются. Только CSS.

dfilatov 26.07.2009 at 20:11

Ага, и дополнительные классы там тоже сам css расставляет :)

Verkhunov 26.07.2009 at 21:16

Хабралюди, пользуйтесь label!

Olegbl4 26.07.2009 at 21:22

Года два назад я прошёл весь этот путь, написал миниплагин на JS который для input'ов с определённым классом вставлял по дефолту значение соответствующего label'а. Написали слишком много вы. Причём большей частью вода-водой. Есть, например, такой вариант: сдвигать label на input и скрывать его по клику фокусу =) и кроссбраузерно и просто и JS минимум =)