실습 - 플레이 리스트 플로우

메인 → 회원가입 → 메인

메인(로그인) → 플레이리스트 → 북마크 → 플레이리스트

메인(로그인) → 플레이리스트 → 유튜브 → 플레이리스트

메인(로그인) → 플레이리스트 → 비디오 → 플레이리스트

코드

index.html : 로그인 페이지

<!DOCTYPE html>

<html>
    <head>
        <title>index</title>
    </head>
    <body>
        <center>
            <h1>김재승의 플레이리스트</h1>
            <form action="playlist.html" method="post">
                <table width="30%" align="center">
                    <tr>
                        <td>id:</td>
                        <td><input type="text" name="id" placeholder="id를 입력하세요"></td>
                        <td rowspan="2"><input type="submit" value="로그인"></td>
                    </tr>
                    <tr>
                        <td>pw:</td>
                        <td><input type="password" name="pw" placeholder="pw를 입력하세요"></td>
                    </tr>
                </table>
                <br/>
                <a href="join.html"><input type="button" value="회원가입"></a>
            </form>
        </center>
    </body>
</html>

h1 태그를 사용해서 제목을 지정했습니다.
form, table 태그를 사용해서 사용자로부터 입력을 받고 submit 태그로 playlist.html 로 이동합니다.
회원가입 버튼을 누르면 join.html 로 이동합니다.

join.html : 회원가입 페이지

<!DOCTYPE html>

<html>
    <head>
        <title>join</title>
    </head>
    <body>
        <center>
            <form action="index.html" method="post">
                <table width="30%">
                    <tr>
                        <td>이름:</td>
                        <td><input type="text" name="name"></td>
                    </tr>
                    <tr>
                        <td>id:</td>
                        <td><input type="text" name="id"></td>
                    </tr>
                    <tr>
                        <td>pw:</td>
                        <td><input type="password" name="pw"></td>
                    </tr>
                    <tr>
                        <td>취미:</td>
                        <td>
                            <select name="hobby">
                                <option value="movie">영화감상</option>
                                <option value="music">음악감상</option>
                                <option value="book">독서</option>
                                <option value="blog">블로그</option>
                                <option value="tracking">산책</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <br/>
                <input type="submit" value="회원가입">
            </form>
        </center>
    </body>
</html>

form, input, select 태그로 회원가입 정보를 입력받고, submit(회원가입) 버튼으로 index.html 로 이동합니다.

playlist.html : 메뉴 목록 페이지

<!DOCTYPE html>

<html>
    <head>
        <title>playlist</title>
    </head>
    <body>
        <center>
            <h1>플레이 리스트</h1>
            <a href="bookmark.html">
                <h2>북마크</h2>
            </a>
            <a href="youtube.html">
                <h2>유튜브</h2>
            </a>
            <a href="video.html">
                <h2>동영상</h2>
            </a>
        </center>
    </body>
</html>

각 메뉴를 클릭하면 링크를 사용해서 bookmark.html, youtube.html, video.html 로 이동합니다.