(1) 다음의 소스를 만든다. - 파일이름 : login_new.asp

login_new.asp
<html>
<head><title>새로운회원</title></head>
<body>
<b>회원가입양식</b><br>
         <form action=./login_insert.asp method=post>
         아이디 : <input type=text size=15 name=id><br>
         비밀번호 : <input type=password size=15 name=pwd><br>
         비번확인 : <input type=password size=15 name=pwd2><br>
         이름 : <input type=text size=15 name=name><br>
         이메일 : <input type=text size=20 name=email><br>
         주소 : <input type=text size=50 name=address><br>
         <INPUT type=submit value="등록"> <INPUT type=reset value="취소">
</body>
</html>


(2) 위의 소스를 브라우저로 확인한 모습이다 - 볼품없지만 그냥 가자..



(3) 다음은 login_new.asp 문서내 form 태그에서 action=login_insert.asp 문서를 다음과 같이 작성한다.

login_insert.asp
<%

Dim id,pwd,name,email,address
id = Request("id")
pwd =Request("pwd")
name = Request("name")
email = Request("email")
address = Request("address")

Response.Write "" & _
"아이디 : " & id & "<br>" & _
"비밀번호 : " & pwd & "<br>" & _
"이름 : " & name & "<br>" & _
"이메일 : " & email & "<br>" & _
"주소 : " & address & "<br>"

%>


(4) 제대로 동작하는지 알아보기 위해 다음 그림과 같이 일정한 값을 넣고 제출 버튼을 누르자



(5) 다음과 같은 결과가 나오면 성공이다.



(6) 다음은 회원입력폼에 혹시 아무것도 입력하지 않은 항목이 있는지 체크해서 빈 항목이 있으면 경고 창을 띄우는 방법을 자바스크립트를 이용해서 구현해보자 - 색깔이 들어간 부분이 이전 소스에서 첨가된 부분이다.

login_new.asp
<html>
<head><title>새로운회원</title>
<script language="JavaScript">
<!--
function CheckForm()
{
    if (document.form.id.value.length < 1) {
        alert("아이디를 입력하세요.");
        document.form.id.focus();
        return false;
    }
    if (document.form.pwd.value.length < 1) {
        alert("비밀번호를 입력하세요.");
        document.form.pwd.focus();
        return false;
    }
    if (document.form.pwd2.value.length < 1) {
        alert("비번확인을 입력하세요.");
        document.form.pwd2.focus();
        return false;
    }
    if (document.form.name.value.length < 1) {
        alert("이름을 입력하세요.");
        document.form.name.focus();
        return false;
    }
    if (document.form.email.value.length < 1) {
        alert("이메일을 입력하세요.");
        document.form.email.focus();
        return false;
    }
    if (document.form.address.value.length < 1) {
        alert("주소를 입력하세요.");
        document.form.address.focus();
        return false;
    }
    document.form.submit();
}
// -->
</script>

</head>
<body>
    <b>회원가입양식</b><br>
    <form action=./login_insert.asp method=post name=form onsubmit='return CheckForm()'>
    아이디 : <input type=text size=15 name=id><br>
    비밀번호 : <input type=password size=15 name=pwd><br>
    비번확인 : <input type=password size=15 name=pwd2><br>
    이름 : <input type=text size=15 name=name><br>
    이메일 : <input type=text size=20 name=email><br>
    주소 : <input type=text size=50 name=address><br>
    <INPUT type=submit value="등록"> <INPUT type=reset value="취소">
</body>
</html>


(7) 다음 그림과 같이 입력폼에 빈항목이 있으면 경고창이 뜬다.



(8) 회원등록폼을 스타일 시트를 적용해서 조금 꾸며보자. 다음 소스는 이전 소스인 login_new.asp의 수정된 소스이다. 녹색부분은 추가된 부분이며 파란색부분은 수정된 부분이다. input type 을 테이블을 이용하여 정렬시키는 방법을 주의해서 살펴보도록 하자.

login_new.asp
<html>
<head><title>새로운회원</title>
<script language="JavaScript">
<!--
function CheckForm()
{
    if (document.form.id.value.length < 1) {
        alert("아이디를 입력하세요.");
        document.form.id.focus();
        return false;
    }
    if (document.form.pwd.value.length < 1) {
        alert("비밀번호를 입력하세요.");
        document.form.pwd.focus();
        return false;
    }
    if (document.form.pwd2.value.length < 1) {
        alert("비번확인을 입력하세요.");
        document.form.pwd2.focus();
        return false;
    }
    if (document.form.name.value.length < 1) {
        alert("이름을 입력하세요.");
        document.form.name.focus();
        return false;
    }
    if (document.form.email.value.length < 1) {
        alert("이메일을 입력하세요.");
        document.form.email.focus();
        return false;
    }
    if (document.form.address.value.length < 1) {
        alert("주소를 입력하세요.");
        document.form.address.focus();
        return false;
    }
    document.form.submit();
}
// -->
</script>

<style type="text/css">
<!--
    BODY, table, tr, td, input, textarea, select
    {
        font-family: 굴림;
        font-size: 9pt;
    }
    A:link {color:#000000;text-decoration:none;}
    A:visited {color:black;text-decoration:none;}
    A:active {color:blue;text-decoration:none;}
    A:hover {color:red;text-decoration:underline;}
-->
</style>


</head>
<body>

<form action=./login_insert.asp method=post name=form onsubmit='return CheckForm()'>
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr><td bgcolor=black>
    <table border=0 width=100% cellpadding=3 cellspacing=1>
    <tr><td bgcolor=#C7E4FD align=center><b>회원가입양식</b></td></tr>
    <tr><td bgcolor=white>
        <table border=0 witdh=100% cellpadding=0 cellspacing=0>
        <tr><td align=center bgcolor=#eff8ff>아이디</td>
        <td> <input type=text size=15 name=id style="border:1 dashed;"></td></tr>
        <tr><td align=center bgcolor=#eff8ff>비밀번호</td>
        <td> <input type=password size=15 name=pwd style="border:1 dashed;"></td></tr>
        <tr><td align=center bgcolor=#eff8ff>비번확인</td>
        <td> <input type=password size=15 name=pwd2 style="border:1 dashed;"></td></tr>
        <tr><td align=center bgcolor=#eff8ff>이름</td>
        <td> <input type=text size=15 name=name style="border:1 dashed;"></td></tr>
        <tr><td align=center bgcolor=#eff8ff>이메일</td>
        <td> <input type=text size=20 name=email style="border:1 dashed;"></td></tr>
        <tr><td align=center bgcolor=#eff8ff>주소</td>
        <td> <input type=text size=60 MAXLENGTH=200 name=address style="border:1 dashed;"></td></tr>
        </table>
    </td></tr>
    </table
</td></tr>
</table>
<table border=0 width=100% cellpadding=3 cellspacing=3>
<tr><td align=center>
<INPUT type=submit value="등록"> <INPUT type=reset value="취소">
</td></tr>
</table>
</form>


</body>
</html>


(9) 수정된 소스를 확인한 모습이다. - 쪼금 간결해 졌다. 이건 님이 알아서 더 이쁘게 하시길..