JavaScript

[JS] form_2

(งᐛ)ว 2023. 10. 10. 22:52
728x90
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        /* forms : 현재 html 문서내의  form태그들을 순차적으로 배열에 정의해둔 형태.
        body에서 form태그가 여러개 존재할 경우 form 배열에 0,1,2 등의 인덱스로 구별하게 된다.*/
       
        function check(){
            var f = document.forms[0]; //첫번째 폼 요소를 f변수에 할당
           
            var myId = f.m_id.value; //아이디 입력된 값을 myId 변수에 저장 (판별을 위한 문장임)
            if(myId==""){
                alert("아이디 입력은 필수 사항입니다.");
                return;
            }
            var myPwd = f.m_pwd.value; //패스워드 입력된 값을 myPwd 변수에 저장 (판별을 위한 문장임)
            if(myPwd ==""){
                alert("비밀번호 입력은 필수 사항입니다.");
                return;
            }
           
            //form태그에서 서버로 값을 전달하고자한다면 알아야 하는 것
            //전송방식(GET,POST)
            //GET : 값이 URL에 노출됨. 속도가 빠르지만 보안성에 취약  
            //POST : 값이 URL에 노출되지 않음. 속도가 빠르지는 않지만 보안성이 높고 바이너리타입의 데이터를 전달
            f.method="GET";
           
            //값을 전달할 페이지(처리객체 지정)
            f.action = "login.jsp";
           
            //입력된 데이터를 전송
            //f가 가진 name속성이 action으로 지정해둔 페이지에 값으로 전달
            f.submit();
        }
       
       
        </script>
    </head>
    <body>
        <!-- 서버로 전달하고 싶은 모든 데이터는  form 태그안에 있지 않으면 다른 페이지로 전달불가. 매우중요!★★★ -->
        <form>
            <table border="1">
                <tr>
                    <th>ID : </th>
                    <!--name 속성 : form태그 안에서 특정 input태그를 찾아낼 수 있도록 해주는 식별자.
                     id와 역할은 비슷하지만 id로 지정해놓으면 다른 페이지로 값을 전달할 수 없다.-->
                    <td><input name="m_id" placeholder="아이디를 입력해주세요"></td>
                </tr>
                <tr>
                    <th>PASSWORD : </th>
                    <td><input type="password" name="m_pwd"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                    <input type="button" value="전송" onclick="check();"></td>
                </tr>
            </table>
        </form>
    </body>
</html>
 

 

728x90