회원 가입

회원가입을 위한 페이지 만들기에 대해 설명 합니다.

Data ID

SIGN_UP

Request

Form element

HTML attributes

Tag : form

Name Value Description
method post Form method
id frm_sign_up Form id

HTML elements

Name Value
return_url 회원가입 후 Redirect URL(미 입력시 사이트 인덱스)
fail_url 로그인이 되어있는 경우 Redirect URL(미 입력시 사이트 인덱스)
term_agree 약관동의 여부 : Y(동의)/N(미동의) 동의시만 가입가능
email 사용자 이메일
cell_phone 휴대전화
name 사용자 이름
nickname 닉네임
avatar_url 아바타 URL
birth_y 생일(년)
birth_m 생일(월)
birth_d 생일(일)
password 비밀번호 : 8~32자리의 영문+숫자+특수문자 조합(default)
password_re 비밀번호 재입력
receive_message 소식 및 정보등의 수신 동의 : Y(동의)/N(미동의)

HTML

<form id="frm_sign_up" class="col-12 col-lg-7 mx-auto mt-5 needs-validation form-signup">
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">
    <div class="text-center">
        <h2 class="my-3">회원가입</h2>
    </div>
    <div class="my-4">
        <div>
            <div class="form-check lh-base mt-3">
                <input class="form-check-input" type="checkbox" id="term_agree" name="term_agree" value="Y">
                <label class="form-check-label" for="remember_me">이용약관 및 개인정보 처리방침에 동의합니다.</label>
            </div>
        </div>
    </div>
    <div>
        <div class="row g-3">
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="email" class="form-label">이메일</label>
                    <input type="email" class="form-control" data-validation="email" data-validation-type="replace" id="email" name="email" placeholder="이메일을 입력하세요" data-gtm-form-interact-field-id="0">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="cell_phone" class="form-label">휴대전화</label>
                    <input type="text" class="form-control" data-validation="number" data-validation-type="replace" id="cell_phone" name="cell_phone" placeholder="휴대전화 번호를 입력하세요">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="name" class="form-label">이름</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="name" name="name" placeholder="이름을 입력하세요">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="nickname" class="form-label">닉네임</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="nickname" name="nickname" placeholder="닉네임을 입력하세요">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation"><label for="email" class="form-label">아바타</label>
                    <div class="row flex-wrap justify-content-start align-items-center">
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_1"><img src="/_images/face_icons_circle/face_icons-circle-01.svg"></label><input class="" type="radio" id="avatar_1" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-01.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_2"><img src="/_images/face_icons_circle/face_icons-circle-02.svg"></label><input class="" type="radio" id="avatar_2" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-02.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_3"><img src="/_images/face_icons_circle/face_icons-circle-03.svg"></label><input class="" type="radio" id="avatar_3" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-03.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_4"><img src="/_images/face_icons_circle/face_icons-circle-04.svg"></label><input class="" type="radio" id="avatar_4" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-04.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_5"><img src="/_images/face_icons_circle/face_icons-circle-05.svg"></label><input class="" type="radio" id="avatar_5" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-05.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_6"><img src="/_images/face_icons_circle/face_icons-circle-06.svg"></label><input class="" type="radio" id="avatar_6" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-06.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_7"><img src="/_images/face_icons_circle/face_icons-circle-07.svg"></label><input class="" type="radio" id="avatar_7" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-07.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_8"><img src="/_images/face_icons_circle/face_icons-circle-08.svg"></label><input class="" type="radio" id="avatar_8" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-08.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_9"><img src="/_images/face_icons_circle/face_icons-circle-09.svg"></label><input class="" type="radio" id="avatar_9" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-09.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_10"><img src="/_images/face_icons_circle/face_icons-circle-10.svg"></label><input class="" type="radio" id="avatar_10" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-10.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_11"><img src="/_images/face_icons_circle/face_icons-circle-11.svg"></label><input class="" type="radio" id="avatar_11" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-11.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_12"><img src="/_images/face_icons_circle/face_icons-circle-12.svg"></label><input class="" type="radio" id="avatar_12" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-12.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_13"><img src="/_images/face_icons_circle/face_icons-circle-13.svg"></label><input class="" type="radio" id="avatar_13" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-13.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_14"><img src="/_images/face_icons_circle/face_icons-circle-14.svg"></label><input class="" type="radio" id="avatar_14" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-14.svg"></div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <label for="birth_y" class="form-label">생일(년)</label>
                <select class="form-select" id="birth_y" name="birth_y" data-validation="not-empty">
                    <option value="">년도 선택</option>
                    <option value="2023">2023년</option>
                    <option value="2022">2022년</option>
                    <option value="1945">1945년</option>
                    <option value="1944">1944년</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_m" class="form-label">생일(월)</label>
                <select class="form-select" id="birth_m" name="birth_m" data-validation="not-empty">
                    <option value="">월 선택</option>
                    <option value="1">1월</option>
                    <option value="12">12월</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_d" class="form-label">생일(일)</label>
                <select class="form-select" id="birth_d" name="birth_d" data-validation="not-empty">
                    <option value="">일 선택</option>
                    <option value="1">1일</option>
                    <option value="2">2일</option>
                    <option value="31">31일</option>
                </select>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password" name="password" placeholder="비밀번호를 입력하세요" data-gtm-form-interact-field-id="1">
                    <div class="invalid-feedback"> 비밀번호를 확인하세요.</div>
                    <small class="form-text">8~32자리의 영문+숫자+특수문자 조합</small>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password_re" class="form-label">비밀번호 재입력</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password_re" name="password_re" placeholder="비밀번호를 다시한번 입력하세요">
                    <div class="invalid-feedback"> 비밀번호를 확인하세요.</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <div class="form-check lh-base mt-3">
                        <input class="form-check-input" type="checkbox" id="receive_message" name="receive_message" value="Y">
                        <label class="form-check-label" for="remember_me">소식 및 정보수신에 동의합니다.</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="my-5 text-center">
        <button class="w-50 px-4 btn btn-warning border border-3 fw-bold" type="submit">회원가입</button>
        <p class="my-3"><a href="#">로그인</a><span class="mx-2">|</span><a href="#">비밀번호 찾기</a></p>
    </div>
</form>

Response After Submission

회원가입 버튼 클릭시 회원 가입 처리 후 return_url로 이동합니다.

관련 링크