홍준혁

Maeily-로그인 기능 구현해보기(2) 본문

팀프로젝트/B1ND_Maeily

Maeily-로그인 기능 구현해보기(2)

홍준혁 [Hong-JunHyeok] 2020. 9. 15. 17:37
728x90

저번 시간에 이어 디자인을 조금 다듬고 기능 구현을 해볼 것이다

로그인 폼 디자인 개선
로그인 폼 디자인 개선

 

팀 회의결과 남여정보도 받도록 결정났다.

그래서 radio태그를 사용해서 기능을 구현하도록 하겠다.

 

 

조금 더럽지만 html코드를 공개하겠다

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./login.css" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div class="login_wrap">
            <form action="">
                <div class="div-input">
                    이름
                    <br />
                    <input
                        type="text"
                        class="login_wrap-input"
                        name="name"
                        placeholder="이름을 입력해주세요"
                    /><!--이름-->
                    <br />
                </div>
                <div class="div-input">
                    이메일
                    <br />
                    <input
                        type="email"
                        class="login_wrap-input"
                        name="email"
                        placeholder="이메일을 입력해주세요"
                    /><!--아이디(이메일)-->
                    <br />
                </div>
                <div class="div-input">
                    비밀번호
                    <br />
                    <input
                        type="password"
                        class="login_wrap-input"
                        name="password"
                        placeholder="비밀번호를 입력해주세요"
                    /><!--비밀번호-->
                    <br />
                </div>
                <div class="div-input">
                    기수
                    <br />
                    <select name="grade" id="grade" class="login_wrap-input">
                        <option value="1">1기</option>
                        <option value="2">2기</option>
                        <option value="3">3기</option>
                        <option value="4">4기</option>
                        <option value="5">5기</option>
                    </select>
                </div>
                <div class="div-gender">
                    성별
                    <br />
                    <div class="wrap_radio">
                        <label for="man">
                            남<input
                                type="radio"
                                name="gender"
                                value="man"
                                id="man"
                            />
                        </label>
                        <label for="woman">
                            여<input
                                type="radio"
                                name="gender"
                                value="woman"
                                id="woman"
                            />
                        </label>
                    </div>
                </div>
                <div class="div-submit">
                    <input type="submit" class="login_wrap-input submit" />
                </div>
            </form>
        </div>
    </body>
</html>

 

이제 어느정도 로그인 폼을 구현했으니 로그인 화면을 구현해보도록 하겠다.

 

728x90

'팀프로젝트 > B1ND_Maeily' 카테고리의 다른 글

Maeily-메인화면 기능추가 및 꾸미기(1)  (0) 2020.09.16
Maeily-메인화면 구현 및 이동  (0) 2020.09.16
Maeily-로그인 기능 구현해보기(1)  (1) 2020.09.15
'팀프로젝트/B1ND_Maeily' Related Articles more
Comments