회원가입 및 로그인 페이지

SONA·2021년 12월 2일
CSShtml
0

HTML & CSS

목록 보기
7/9

회원가입

  • style
* {
            margin: auto;
            text-align: center;
        }
     
        #join {
            border-collapse: collapse;
        }

        th,td {
            border: 1px solid
        }
  • body
<form action="#" method="post">
        <table id=join>
            <caption>회원가입 입력</caption>
            <colgroup>
                <col>
                <col>
            </colgroup>
            <tbody>
                <tr>
                    <th scope="row"><label for="id">아이디</label></th>
                    <!--아이디 박스에 마우스를 가져가면 title 안의 입력값이 나타남-->
                    <th><input type="text" id="id" title="아이디 입력" placeholder="아이디를 입력하세요"></th>
                </tr>
                <tr>
                    <th scope="row"><label for="pw">비밀번호</label></th>
                    <th><input type="text" id="pw" title="비밀번호 입력" placeholder="비밀번호를 입력하세요"></th>
                </tr>
                <tr>
                    <th scope="row"><label for="r_pw">비밀번호 재입력</label></th>
                    <th><input type="text" id="r_pw" title="비밀번호 재입력"></th>
                </tr>
                <tr>
                    <th scope="row"><label for="email">이메일</label></th>
                    <th><input type="text" id="email" title="이메일아이디 입력">@<input type="text" title="이메일주소 입력"></th>
                </tr>
                <tr>
                    <th scope="row"><label for="hp">핸드폰 번호</label></th>
                    <td>
                        <select id="hp" title="휴대폰 앞자리 선택">
                            <!-- ↓ drop downlist 라고 함-->
                            <option>선택</option>
                            <option>010</option>
                            <option>011</option>
                        </select> -
                        <input type="text" title="휴대폰 번호 중간 4자리 입력"> -
                        <input type="text" title="휴대폰 번호 끝 4자리 입력">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="회원가입"><input type="reset" value="취소">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

로그인

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼</title>
</head>

<body>
    <form id="form" action="#" method="post">
        <fieldset>
            <legend>로그인</legend>
            <p>아이디 : <input type="text" name="id"></p>
            <p>비밀번호 : <input type="password" name="pw"></p>
            <!--type을 hidden으로 해두면 크롬창에 나타나지 않음-->
            <p><input type="hidden" name="name"></p>
            <input type="submit" value="로그인">

            <br>

            <!--단어+단어일때 뒤에서 첫번째 단어는 대문자로 입력-->
            <span>입력한 아이디 : </span><span id="inputId"></span><br>
            <span>입력한 비밀번호 : </span><span id="inputPw"></span>
        </fieldset>
    </form>
</body>
</html>

<script>
    /*var : 변수 선언 / userld : 변수 이름 / "~" : 값*/
    var userId = "fintech";
    var userPw = "1234";
 
    /*[] : 대괄호 / {} : 소괄호 / {~} : ~는 입력 값*/
    /*function : 공통된 기능을 수행하는 것*/
    /*function() : 이름이 없으므로 '익명함수'라고 불림*/
    /*↓ form 첫번째(0)를 실행하면 onsubmit해서 불리게 하는 것*/
    document.getElementsByTagName("form")[0].onsubmit = function() {
     
        /*화면에서 입력한 데이터를 가져와서 변수에 대입*/
        var inputId = this.id.value;
        var inputPw = this.pw.value;
   
        /*= : 대입
        == : 같다
        || : or 양쪽의 조건이 다르면 True인 값만 나타남
        && : 양쪽의 조건이 같으면 True, 한쪽이라도 다르면 False
        inputId와 입력한 값이 같고, inputPw이 같을때*/
        if(inputId == userId && inputPw == userPw){
            /* alert : 경고창을 띄운다*/
           alert("로그인 성공")
        } else {
           alert("아이디나 비밀번호 오류입니다!")
        }
    /*getElementById() : 함수*/
    document.getElementById("inputId").textContent = inputId;
    document.getElementById("inputPw").textContent = inputPw;

    /*return false;를 안쓰면 실행이 안됨*/
    return false;
    }
</script>

유효성 검사

* required / Javascript
* required="required" : HTML5부터 적용됨
* 입력 창에 입력하지 않고 확인을 창에 입력하라는 문구가 나타나는 기능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>사용자 입력 속성</title>
    <script>
        function validate() {
    
            /*form에서 id 속성의 이름이 id로 되어있는 값을 가져와서 id 변수에 대입*/
            var id = document.getElementById("id").value;
            /*form에서 id 속성의 이름이 pw로 되어있는 값을 가져와서 id 변수에 대입*/
            var pw = document.getElementById("pw").value;
    
            /*! : 값이 "", " ", null, not defined인 값들을 모두 체크*/
            /*null : 값이 없는 것
            not defined : 정의가 안되어 있는 값*/
            if(!id){
                alert("아이디 값을 입력하세요");
                return false;
            }
  
            if(!pw){
                alert("비밀번호 값을 입력하세요");
                return false;
            }
        }
    </script>
</head>
<body>
   <!--submit이 동작을 시작하면 값이 알맞게 들어갔는지 돌려봄-->
    <form onsubmit="return validate();" action="#" method="post">
        <fieldset>
            <legend>필수입력 유효성 검사</legend>
            <p>
                <label for="id">* 아이디</label>
                <input type="text" id="id" autocomplete="on" title="아이디 입력">
                <!--input의 id는 getElementById의 id-->
                <!--autocomplete="on/off" : 입력 요소 자동완성-->
            </p>
            <p>
                <label for="pw">* 비밀번호</label>
                <input type="password" id="pw" title="비밀번호 입력">
            </p>
            <p>
                <input type="submit" value="확인">
            </p>
        </fieldset>
    </form>
</body>
</html>
profile
SONA
이전 포스트

이미지맵 좌표값 설정

다음 포스트

CSS 기본 문법

0개의 댓글