Aurora Modules

로그인 폼

로그인 페이지에서 노출되는 로그인 폼 모듈입니다.

URL: /pages/sign-in/sign-in.html

모듈명: sign-in-form원본소스

로그인 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
saveIdChecked	boolean	false	아이디 저장 여부
memberId	string	-	회원 아이디
password	string	-	비밀번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<sign-in-form>
    <div>
        <div class="normal-sign-in__input-wrap">
            <span class="input-field input-field--md">
                <input
                    class="member-id"
                    type="text"
                    slot="memberId"
                    name="memberId"
                    value="{{memberId}}"
                    shopby-focus-field="memberId"
                    placeholder="아이디"
                    shopby-on:change="CHANGE_MEMBER_ID"
                    shopby-on:input="NO_SPACE_MEMBER_ID"
                />
            </span>
            <span class="input-field input-field--md">
                <input
                    slot="password"
                    class="password"
                    name="password"
                    value="{{password}}"
                    type="password"
                    placeholder="비밀번호"
                    shopby-focus-field="password"
                    shopby-on:change="CHANGE_PASSWORD"
                    shopby-on:input="NO_SPACE_PASSWORD"
                    shopby-action="PASSWORD_KEYPRESS"
                />
            </span>
        </div>
        <label class="form-check form-check--sm">
            <input type="checkbox" slot="saveIdChecked" shopby-on:change="CHECK_SAVE_ID" />
            <span class="form-check__label">아이디 저장</span>
        </label>
    </div>
</sign-in-form>

<sign-in-form>
    <div>
        <div class="normal-sign-in__input-wrap">
            <span class="input-field input-field--md">
                <input
                    class="member-id"
                    type="text"
                    slot="memberId"
                    name="memberId"
                    value="{{memberId}}"
                    shopby-focus-field="memberId"
                    placeholder="아이디"
                    shopby-on:change="CHANGE_MEMBER_ID"
                    shopby-on:input="NO_SPACE_MEMBER_ID"
                />
            </span>
            <span class="input-field input-field--md">
                <input
                    slot="password"
                    class="password"
                    name="password"
                    value="{{password}}"
                    type="password"
                    placeholder="비밀번호"
                    shopby-focus-field="password"
                    shopby-on:change="CHANGE_PASSWORD"
                    shopby-on:input="NO_SPACE_PASSWORD"
                    shopby-action="PASSWORD_KEYPRESS"
                />
            </span>
        </div>
        <label class="form-check form-check--sm">
            <input type="checkbox" slot="saveIdChecked" shopby-on:change="CHECK_SAVE_ID" />
            <span class="form-check__label">아이디 저장</span>
        </label>
    </div>
</sign-in-form>

/* 여기에 스타일 코드를 작성해주세요. */