화면구현/HTML

일반버튼으로submit

psys 2020. 7. 9. 11:24
728x90

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="myForm1" action="test.php" method="GET">
        <table border=1>
            <tr>
                <td>아이디</td>
                <td><input id="id_aidi" type=text name="nm_aidi" value="22"></td>
            </tr>
            <tr>
                <td>암호오</td>
                <td><input id="id_pass" type=password name="nm_password" value="22"></td>
            </tr>
            <tr>
                <td><input type="button" value="로그잉" onclick="f_yesOrNo()"></td>
                <td><input type="reset" value="다시쓸랭"></td>
            </tr>
        </table>
    </form>
    <script>
        var v_myForm = document.getElementById("myForm1");
        var v_aidi = document.getElementById("id_aidi");
        var v_pass = document.getElementById("id_pass");
        function f_yesOrNo() {
            if (v_aidi.value.trim() == "") {
                alert("너 아이디도 없니?");
                return; //함수 종료의 기능
            } else if (v_pass.value.trim() == "") {
                alert("너 비밀번호도 없니?");
                return; //함수 종료의 기능
            }
            //form객체에는 submit과 reset메소드가 있음
            v_myForm.submit(); // 전송하라
        }
    </script>
</body>

</html>

</html>

 

버튼태그로만!

submit까지 동작하고 있다!

form밖에 있다면 submit동작 x

form안의 button은 submit이 됨

                <!-- <td><input type="button" value="로그잉" onclick="f_yesOrNo()"></td> -->
                <td><button>눌러보아</button></td>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="myForm1" action="test.php" method="GET">
        <table border=1>
            <tr>
                <td>아이디</td>
                <td><input id="id_aidi" type=text name="nm_aidi" value="22"></td>
            </tr>
            <tr>
                <td>암호</td>
                <td><input id="id_pass" type=password name="nm_password" value="22"></td>
            </tr>
            <tr>
                <!-- <td><input type="button" value="로그잉" onclick="f_yesOrNo()"></td> -->
                <td><button>눌러보아</button></td>
                <td><input type="reset" value="다시쓸랭"></td>
            </tr>
        </table>
    </form>
    <script>
        var v_myForm = document.getElementById("myForm1");
        var v_aidi = document.getElementById("id_aidi");
        var v_pass = document.getElementById("id_pass");
        function f_yesOrNo() {
            if (v_aidi.value.trim() == "") {
                alert("너 아이디도 없니?");
                return; //함수 종료의 기능
            } else if (v_pass.value.trim() == "") {
                alert("너 비밀번호도 없니?");
                return; //함수 종료의 기능
            }
            //form객체에는 submit과 reset메소드가 있음
            v_myForm.submit(); // 전송하라
        }
    </script>
</body>

</html>

</html>

 

밖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="myForm1" action="test.php" method="GET">
        <table border=1>
            <tr>
                <td>아이디</td>
                <td><input id="id_aidi" type=text name="nm_aidi" value="22"></td>
            </tr>
            <tr>
                <td>암호</td>
                <td><input id="id_pass" type=password name="nm_password" value="22"></td>
            </tr>
            <tr>
                <!-- <td><input type="button" value="로그잉" onclick="f_yesOrNo()"></td> -->
                <td><button>눌러보아</button></td>
                <td><input type="reset" value="다시쓸랭"></td>
            </tr>
        </table>
    </form>
    <!-- 모르면 엄칭 고생하는 내용!
        button 태그가 form 태그 사이에 있을 때는 type=submit 처럼 동작
        form태그 밖에 있을 때는 type=button 으로 동작 -->
    <td><button>눌러보아form밖</button></td>
    <script>
        var v_myForm = document.getElementById("myForm1");
        var v_aidi = document.getElementById("id_aidi");
        var v_pass = document.getElementById("id_pass");
        function f_yesOrNo() {
            if (v_aidi.value.trim() == "") {
                alert("너 아이디도 없니?");
                return; //함수 종료의 기능
            } else if (v_pass.value.trim() == "") {
                alert("너 비밀번호도 없니?");
                return; //함수 종료의 기능
            }
            //form객체에는 submit과 reset메소드가 있음
            v_myForm.submit(); // 전송하라
        }
    </script>
</body>

</html>

</html>

 

form안의 버튼을 버튼으로 동작하게

                <td><button type="button">눌러보아</button></td>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="myForm1" action="test.php" method="GET">
        <table border=1>
            <tr>
                <td>아이디</td>
                <td><input id="id_aidi" type=text name="nm_aidi" value="22"></td>
            </tr>
            <tr>
                <td>암호</td>
                <td><input id="id_pass" type=password name="nm_password" value="22"></td>
            </tr>
            <tr>
                <!-- <td><input type="button" value="로그잉" onclick="f_yesOrNo()"></td> -->
                <td><button type="button">눌러보아</button></td>
                <td><input type="reset" value="다시쓸랭"></td>
            </tr>
        </table>
    </form>
    <!-- 모르면 엄칭 고생하는 내용!
        button 태그가 form 태그 사이에 있을 때는 type=submit 처럼 동작
        form태그 밖에 있을 때는 type=button 으로 동작 -->
    <td><button>눌러보아form밖</button></td>
    <script>
        var v_myForm = document.getElementById("myForm1");
        var v_aidi = document.getElementById("id_aidi");
        var v_pass = document.getElementById("id_pass");
        function f_yesOrNo() {
            if (v_aidi.value.trim() == "") {
                alert("너 아이디도 없니?");
                return; //함수 종료의 기능
            } else if (v_pass.value.trim() == "") {
                alert("너 비밀번호도 없니?");
                return; //함수 종료의 기능
            }
            //form객체에는 submit과 reset메소드가 있음
            v_myForm.submit(); // 전송하라
        }
    </script>
</body>

</html>

</html>

'화면구현 > HTML' 카테고리의 다른 글

타자연습프로그램  (0) 2020.07.10
루즈한비교와 엄격한비교  (0) 2020.07.10
자바스크립트가나온이유  (0) 2020.07.09
공튀기기  (0) 2020.07.08
[php] location  (0) 2020.07.08

'화면구현/HTML'의 다른글

  • 현재글일반버튼으로submit

관련글

댓글

티스토리툴바