이미지 선택 로그인 채택완료
로그인이 있는 메인 화면이라고 가정 합니다.
이미지 3개가 있습니다.
아이디를 직접 입력하지 않고, 이미지를 클릭하면 해당되는 아이디가 입력 되어 보이도록 하려고 합니다.
하트 이미지를 클릭 하면 로그인 화면 아이디 칸에 heart 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '하트 선택 하였습니다' 로 표시 됩니다.
달 이미지를 클릭 하면 로그인 화면 아이디 칸에 moon 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '달 선택 하였습니다' 로 표시 됩니다.
별 이미지를 클릭 하면 로그인 화면 아이디 칸에 star 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '별 선택 하였습니다' 로 표시 됩니다.
도움 부탁 드립니다.
답변 4개
</p>
<p><!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%;
}</p>
<p> .wrap .frm #chosen_text {
color: var(--theme-color);
height: 1em;
margin: 1em;
}
</style>
<script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<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></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
ajax를 통해 하거나 jquery를 통해 값을 매칭하게끔하면 될것 같네요
위의 분께서 답은 내려주셨으니 클릭하는 이미지마다 hidden input값을 활용해서 아이디를 입력하는 구조면 되지 않을까 싶어요
아이디는 소스에서 노출이 안되게끔 ajax로 데이터 통신하게 하는것이 좋아보이네요
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인