이미지 선택 로그인
본문
로그인이 있는 메인 화면이라고 가정 합니다.
이미지 3개가 있습니다.
아이디를 직접 입력하지 않고, 이미지를 클릭하면 해당되는 아이디가 입력 되어 보이도록 하려고 합니다.
하트 이미지를 클릭 하면 로그인 화면 아이디 칸에 heart 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '하트 선택 하였습니다' 로 표시 됩니다.
달 이미지를 클릭 하면 로그인 화면 아이디 칸에 moon 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '달 선택 하였습니다' 로 표시 됩니다.
별 이미지를 클릭 하면 로그인 화면 아이디 칸에 star 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '별 선택 하였습니다' 로 표시 됩니다.
도움 부탁 드립니다.
답변 4
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
:root {
--theme-color: blue;
}
.wrap * {
margin: 0;
padding: 0;
}
.wrap .choice {
display: flex;
justify-content: space-evenly;
height: 10em;
}
.wrap .choice a {
text-decoration: none;
background-color: var(--theme-color);
border: 1px double var(--theme-color);
border-radius: 0.4em;
width: 6em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap .choice a span {
font-size: 3em;
}
.wrap ul {
list-style-type: none;
}
.wrap .frm {
text-align: center;
margin-top: 4em;
}
.wrap .frm form {
border: 0.4em solid var(--theme-color);
padding: 0.2em;
display: inline-block;
}
.wrap .frm input {
padding: 0.5em;
margin: 0.1em;
}
.wrap .frm input[type="text"],
.wrap .frm input[type="password"] {
border: 0.2em solid var(--theme-color);
}
.wrap .frm input[type="submit"] {
background-color: var(--theme-color);
color: white;
border: 0 none;
border-radius: 0.4em;
display: block;
width: 100%;
}
.wrap .frm #chosen_text {
color: var(--theme-color);
height: 1em;
margin: 1em;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('.choice_card').click(function () {
var text = $(this).data('text');
var value = $(this).data('value');
$('#chosen_text').text(text + ' 선택 하였습니다.');
$('input[name="id"]').val(value);
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="choice">
<a href="#" class="choice_card heart" data-value="heart" data-text="하트"><span>💗</span></a>
<a href="#" class="choice_card moon" data-value="moon" data-text="달"><span>🌙</span></a>
<a href="#" class="choice_card star" data-value="star" data-text="별"><span>⭐</span></a>
</div>
<div class="frm">
<h3 id="chosen_text"></h3>
<form>
<ul>
<li><input type="text" name="id" placeholder="아이디" /></li>
<li><input type="password" name="pw" placeholder="비밀번호" /></li>
<li><input type="submit" value="로그인" /></li>
</ul>
</form>
</div>
</div>
</body>
</html>
ajax를 통해 하거나 jquery를 통해 값을 매칭하게끔하면 될것 같네요
위의 분께서 답은 내려주셨으니 클릭하는 이미지마다 hidden input값을 활용해서 아이디를 입력하는 구조면 되지 않을까 싶어요
아이디는 소스에서 노출이 안되게끔 ajax로 데이터 통신하게 하는것이 좋아보이네요
bbs/login_check.php
를 보시면 로그인 성공시 세션 만드는 부분을 참고 하셔서 login_chk.php룰 하나 만드시고
링크는
<a href="/bbs/login_chk.php?type=heart" >하트</a>
식으로 구분하시면 됩니다
답변을 작성하시기 전에 로그인 해주세요.
