Кавайная форма, или делаем Логин-форм как у Яндекса. (Labels as hints in form inputs)

Tue, 18 Aug 2009 15:06:33 +0200

У нас есть простая Логин-форма

<form action="#" method="post">
	<div class="label_input">
		<label for="auth_login">Логин</label>
		<input type="text" name="auth_login" id="auth_login">
	</div>
	<div class="label_input">
		<label for="auth_password">Пароль</label>
		<input type="password" name="auth_password" id="auth_password">
	</div>
	<input type="submit" value="Отправить">
</form>

Метку (label) и инпут зарание возмём в див, пропишем ему в css относительное позиционирование, остальные елементы оформим на свой вкус.

Дальше будет JavaScript

function showLabels(inputs){
	// список инпутов приходит обьектом {'input_id':''}
	// если нет, то мы уходим
	if (typeof(inputs) != "object") return;
	// функция которая прячет лейбл, если в форме есть данные
	function inputValueSH(someinput){
		// что бы надёжно спрятать, запихнём повыше
		// почему-то свойство display не фурычит
		if (someinput.value) pSib(someinput).style.top = '-9999px'; // данные есть
		else pSib(someinput).style.top = '0'; // данных нет
	}
	for (var i in inputs){
		// дальше, разбиваем на список
		// аля foreach для бедных
		var obj = document.getElementById(i);
		// при блуре вызываем функцию проверки
		obj.onblur = function(){ inputValueSH(this);};
		// когда сфокусировались, убираем метку
		obj.onfocus = function(){ pSib(this).style.top = '-9999px';	};
		// проверим на всякий ешё разок
		inputValueSH(obj);
	}
	return;
}
addLoadEvent(function() {
	// настраиваем метки, для auth_login и auth_password
	showLabels({'auth_login':'','auth_password':''});
});

Посмотреть Пример

Комментарии к заметке

Теги:
javascript > foreach
css
javascript

Deerua about Coding: последние заметки с тегом «foreach»

Кавайная форма, или делаем Логин-форм как у Яндекса. (Labels as hints in form inputs)