Значення value для поля password

Практика » Значення value для поля password

13 серпня 2011 від admin

Трохи передісторії - знаєте як виникла професія "дизайнер"? Легенда говорить, що колись давно, ще в XIX столітті один із власників залізничної компанії захотів створити самий гарний паровоз. Він найняв найкращих художників і скульпторів того часу - паровоз мав привертати увагу саме своєю красою. Художники постаралися на славу - розмалювали котел різноманітними орнаментами, скульптори не відставали - наліпили всяких барельєфів ... І найкрасивіший потяг рушив з перону до наступної станції. Коли він прибув, від колишньої краси не залишилося і сліду - фарба на котлі потріскалася від високої температури, а барельєфи розсипалися від вібрації.

Одним словом, потяг що прибув виглядав набагато гірше за своїх "некрасивих" побратимів. Тоді власник залізничної компанії звернувся до інженера - щоб той проконсультував найнятих художників і скульпторів.

За легендою це і був перший у світі дизайнер. Навіщо така довга передісторія? По-перше просто красива легенда smile

- а по-друге за останні півтора місяця до мене вже двічі зверталися з проханням, яке можна порівняти з побажанням вищезгаданого власника залізничної компанії. Йдеться про значення value для типу поля password. Щоб краще зрозуміти про що йдеться, ось фрагмент зображення того що хоче замовник:

Слова Login та Password повинні бути прямо всередині поля, а не як зазвичай - збоку або зверху від нього. Для тих хто не бачить у такому побажанні нічого дивного, невелике пояснення. Для поля з логіном проблем не виникає, але для поля з паролем... Якщо для поля зазначений тип "password", то вміст поля буде приховано. Залежно від браузера, зірочками або кружечками. Це зроблено для того, щоб пароль, який вводить користувач, неможливо було "підглянути" стороннім людям. Для прикладу я поставив value = "Password:" - можете подивитися що виходить:

Гадаю, що тепер зрозуміло про що йде мова. Художник який малював даний макет був колегою того художника, який малював орнаменти і квіти на котлі паровоза. Він просто не знав про особливості різних типів полів - так само як і його колега не знав що нагрівання паровозного котла призводить до того, що фарба розтріскується і "облазить". Це не говорить про те що він поганий художник, але це говорить про те що він саме художник а не дизайнер.

Вважаю, що всього вишенапісанного достатньо щоб майбутнім замовникам пояснити, що деякі речі треба малювати саме так а не інакше. Але... іноді хочеться зробити те, що ніхто ніколи не робив - просто для того щоб не втрачати навики. А ще щоб зайвий раз підтвердити фразу "в програмуванні немає нічого неможливого, буває лише недоцільне". Давайте спробуємо поєднати несумісні речі - щоб в поле password стояло слово Password?

Спочатку створимо нашу форму:



<form method="post">
<input type="text" name="login" size="40" /></p>
<input type="password" name="password" /></p></form>

Нічого надзвичайного - всього два поля. У верхнього type = "text", у нижнього type = "password". Далі додамо стилі, щоб поля виглядали "як на картинці", тобто відповідали технічним завданням:



.formfield0, .formfield1{
border: 0;
height: 26px;
padding: 0 0 0 11px;
margin:0;
width: 242px;
font-family: Arial;
font-size:14px;
font-weight: bold;
}
 
.formfield0{ 
background:#fff url('pbg0.png') no-repeat;
} 
.formfield1{
background:#fff url('pbg1.png') no-repeat;
}

Уважний читач вже звернув увагу що в стилях використані два фонових зображення. В мене вони називаються pbg0.png та pbg1.png - одне у вигляді звичайної рамки для поля, інше у вигляді рамки з написаним словом Password. При завантаженні сторінки ми будемо показувати зображення зі словом Password, а якщо користувач клацне мишкою в цьому полі - просто поміняємо картинку. Для цього замінимо рядок, що описує поле з паролем ось на такий:



<input type="password" class="formfield0" name="password" onClick="this.className='formfield1'" />

Думаю тут все зрозуміло - якщо клацнути мишкою (подія onClick) то змінюється клас formfield0 на formfield1. Приклад вже практично робочий, але ... погодьтеся - буде не дуже добре якщо поле для введення пароля "очищається" по клацанню мишкою, а поле для введення логіна - ні.
Давайте додамо мініатюрну функцію, яка очищатиме поле з логіном:



function clearElem(obj){
  obj.value = ' ';
}

І змінимо відповідний рядок у нашій формі на ось такий:



<input type="text" class="formfield1" name="login" onClick='clearElem(this); return false;' value="Login:" size="40" />

Вже краще, наше рішення вже майже працює. Чому "майже"? Та тому що існує така собі фірма Microsoft, яка випускає програму Internet Explorer. Взагалі-то програма Internet Explorer потрібна лише для того, щоб єдиний раз її запустити і завантажити собі браузер, проте деякі користувачі використовують Internet Explorer замість браузера - саме у них наш приклад буде працювати трохи некоректно. Щоб "вилікувати" підробку від Microsoft, додамо невелику умову:



<!--[if lte IE 8]>
<style type="text/css">.formfield0, .formfield1{
padding-top: 6px;
}
</style>
<![endif]-->

Все, тепер наш приклад працює у всіх браузерах (Opera, Firefox, Safari, Chrome) і навіть у програмі Internet Explorer.
Можете подивіться на діючий приклад або просто завантажити готовий код на свій комп'ютер:
punbb.zip