본문 바로가기
웹 개발

[PHP] 회원 가입 페이지

by hans-0 2025. 2. 24.

회원 가입

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원 가입</title>
    
    <style>
        /* 기본 페이지 스타일 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
            text-align: center;
            margin: 50px;
        }

        /* 콘텐츠 박스 스타일 */
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            display: inline-block;
        }

        /* 테이블 스타일 */
        table {
            width: 700px;
            border-collapse: collapse;
            margin: auto;
            background-color: white;
        }

        td {
            padding: 10px;
        }

        /* 필수 입력 필드 강조 */
        .required {
            background-color: #FFFF99;
        }

        /* 버튼 스타일 */
        .btn {
            padding: 10px 15px;
            border: none;
            color: white;
            background-color: #28a745;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #218838;
        }

        .btn-reset {
            background-color: #dc3545;
        }

        .btn-reset:hover {
            background-color: #c82333;
        }
    </style>

    <script>
        // 회원가입 입력값 체크
        function chk_input() {
            let form = document.user_form;

            if (form.fuserid.value == "") {
                alert("아이디를 입력하시오.");
                form.fuserid.focus();
                return false;
            } else if (form.fname.value == "") {
                alert("이름을 입력하시오.");
                form.fname.focus();
                return false;
            } else if (form.fpasswd.value == "") {
                alert("비밀번호를 입력하시오.");
                form.fpasswd.focus();
                return false;
            } else if (form.fpasswd_re.value == "") {
                alert("비밀번호 확인을 입력하시오.");
                form.fpasswd_re.focus();
                return false;
            } else if (form.fpasswd.value !== form.fpasswd_re.value) {
                alert("[비밀번호 입력 오류] \n비밀번호를 다시 입력하시오.");
                form.fpasswd.value = "";
                form.fpasswd_re.value = "";
                form.fpasswd.focus();
                return false;
            } 
            return true;
        }

        // 아이디 중복 검사
        function chk_id() {
            let form = document.user_form;

            if (form.fuserid.value == '') {
                alert('ID를 입력하세요.');
                form.fuserid.focus();
            } else {
                window.open('id_chk.php?fuserid=' + form.fuserid.value, 'IDwin', 'width=400, height=200');
            }
        }
    </script>
</head>
<body>

    <div class="container">
        <h2><?php echo "회원 가입"; ?></h2>
        <hr>

        <!-- 로그인 페이지 이동 링크 -->
        <p>[ <a href="login_form.php">로그인</a> ]</p>

        <form name="user_form" action="add_db.php" method="post" onsubmit="return chk_input()">
            <table border="1">
                <tr>
                    <td colspan="2" bgcolor="gray" style="color: white;">
                        <b>회원 가입</b> [* 표시는 필수 입력 항목입니다.]
                    </td>
                </tr>
                
                <!-- 아이디 입력 -->
                <tr>
                    <td class="required" width="20%"><p align="right"> * 아이디 </p></td>
                    <td width="80%">
                        <input type="text" name="fuserid" id="fuserid" size="12" maxlength="12">
                        <input type="button" class="btn" value="중복검사" onclick="chk_id();">
                        <font size="2">(영문과 숫자 12자리까지)</font>
                    </td>
                </tr>

                <!-- 이름 입력 -->
                <tr>
                    <td class="required"><p align="right"> * 이름 </p></td>
                    <td><input type="text" name="fname" id="fname" size="12" maxlength="10">
                        <font size="2">(최대 5글자)</font>
                    </td>
                </tr>

                <!-- 비밀번호 입력 -->
                <tr>
                    <td class="required"><p align="right"> * 비밀번호 </p></td>
                    <td><input type="password" name="fpasswd" id="fpasswd" size="12" maxlength="10">
                        <font size="2">(영문과 숫자 혼합 10자리까지)</font>
                    </td>
                </tr>

                <!-- 비밀번호 확인 -->
                <tr>
                    <td class="required"><p align="right"> * 비밀번호 확인 </p></td>
                    <td><input type="password" name="fpasswd_re" id="fpasswd_re" size="12" maxlength="10">
                        <font size="2">(비밀번호와 동일하게 입력)</font>
                    </td>
                </tr>

                <!-- 성별 선택 -->
                <tr>
                    <td><p align="right"> 성별 </p></td>
                    <td>
                        <input type="radio" name="fsex" value="M" checked> 남
                        <input type="radio" name="fsex" value="W"> 여
                    </td>
                </tr>

                <!-- 이메일 입력 -->
                <tr>
                    <td><p align="right"> 이메일 </p></td>
                    <td><input type="text" name="femail" size="30" maxlength="30">
                        <font size="2">(예: test@test.com)</font>
                    </td>
                </tr>

                <!-- 가입 및 초기화 버튼 -->
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" class="btn" name="smt" value="가입하기">
                        <input type="reset" class="btn btn-reset" name="rst" value="다시작성">
                    </td>
                </tr>
            </table>
        </form>
    </div>

</body>
</html>

 

 

https://www.yes24.com/Product/Goods/19584929

이 코드는 책 "PHP 프로그래밍 정복"의 내용을 참고하여, 최신 PHP 버전에 맞게 수정하였습니다.

 

이전 글

2025.02.19 - [웹 개발] - [PHP] 회원 관리 프로그램 제작 성공 화면