구글 로그인 form

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

Google Login Form (inactive)
Google Login Form (active)

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

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만으로 변경하는 법을 찾을 필요가 있는 것 같다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다