구글 로그인 form

기존 placeholder는 값을 입력을 해버리면 보이지 않아져버리기 때문에 input이 많으면, 어떤 입력값인지 혼란이 올 수 있다. 그래서 위에다 라벨을 붙여주고는 했는데 같은 값이 두 개인 것이 마음에 걸렸었다.

그러던 중 구글 로그인 폼을 보게 되었고 흉내를 내보았다. 구글 로그인 폼에서 소스보기로 찾고 싶었는데 어렵게 만들어져 있어서 다른 로그인 폼을 찾아보았다.

https://colorlib.com/wp/html5-and-css3-login-forms/
https://freshdesignweb.com/css-login-form-templates/

이 중에 구글 로그인 폼과 비슷한 효과를 가진 것이 있어서 그것을 참고하였다.

<style>
.test {position:relative;}
.inp {border:1px solid #ccc; padding-left:12px; font-size:17px; width:366px; height:54px; border-radius:4px; outline: 0;}
.placeholders {position:absolute;top:12px;left:8px;pointer-events:none;background-color:#fff; padding:0 3px; color:#888; font-size:17px; transition:all .4s;}

.inp:focus {border:2px solid #1a73e8;}
.inp:focus + .placeholders {top:-8px; font-size:12px; color:#1a73e8; transition:all .4s;}

.jsinp {border:2px solid #1a73e8 !important;}
.jsplaceholders {top:-8px; font-size:12px; color:#1a73e8; }
</style>
<div class='test'>
	<input type='text' class='inp'>
	<div class='placeholders'>이메일 또는 휴대전화</div>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$('.inp').focusout(function() {
	if( $(this).val() != '' ){
		$(this).addClass('jsinp');
		$(this).siblings('.placeholders').addClass('jsplaceholders');
	}else{
		$(this).removeClass('jsinp');
		$(this).siblings('.placeholders').removeClass('jsplaceholders');
	}
});
</script>

포커스인을 했을때 위로 올리는 것까지는 쉬웠는데 값이 있을때 아래로 내려오지 않게 하는것은 javascript가 필요했다. 중복된 부분이 많아서 마음에 들지 않았다. javascript 혹은 css만으로 변경하는 법을 찾을 필요가 있는 것 같다.