이미지 선택 로그인

이미지 선택 로그인

QA

이미지 선택 로그인

본문

461158746_1677667437.134.jpg

로그인이 있는 메인 화면이라고 가정 합니다.

이미지 3개가 있습니다.

아이디를 직접 입력하지 않고, 이미지를 클릭하면 해당되는 아이디가 입력 되어 보이도록 하려고 합니다.

하트 이미지를 클릭 하면 로그인 화면 아이디 칸에 heart 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '하트 선택 하였습니다' 로 표시 됩니다.

달 이미지를 클릭 하면 로그인 화면 아이디 칸에 moon 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '달 선택 하였습니다' 로 표시 됩니다.

별 이미지를 클릭 하면 로그인 화면 아이디 칸에 star 라고 입력이 자동으로 되고 보입니다. 로그인 사각형 위에 '별 선택 하였습니다' 로 표시 됩니다.

도움 부탁 드립니다.
 

이 질문에 댓글 쓰기 :

답변 4

2009389905_1677674213.2664.png

2009389905_1677674218.6847.png

2009389905_1677674222.7372.png


<!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>

식으로 구분하시면 됩니다

답변을 작성하시기 전에 로그인 해주세요.
전체 806
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT