보물이 가득한 인터넷 세상에서

공유하는 즐거움속에 우리는 함께 성장합니다.

이미지, 컬러, 레이아웃, 폰트, HTML, CSS, JavaScript, jQuery, 사운드, 모션그래픽, 영상 등 필요한 정보를 공유합니다.

보물이 가득한 인터넷 세상에서

공유하는 즐거움속에 함께 성장합니다.

[][자바스크립트 기초] 오늘의 마늘미션 132 - DOM - form 객체4

엔게디
2020-03-24
조회수 278

form 객체에는 다양한 속성값들이 있습니다. (p. 435 ~ 436)


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>form 객체의 선택</title>

    <script>

        window.onload = function () {

            var login = document.login;

            var chkbox = document.getElementsByName('agree');

            chkbox[0].checked = true;

            // console.log(chkbox);

            // console.log(chk1.disabled);

            // console.log(check.defaultValue);

            // check.focus();

            document.getElementById("reSetBtn").onclick = function () {

                login.reset();

            }

            login.onsubmit = function () {

                for (var i = 0; i < chkbox.length; i++) {

                    if (chkbox[i].checked) {

                        this["chk_" + i] = true;

                    } else {

                        this["chk_" + i] = false;

                    }

                }

                if (this["chk_0"] && this["chk_1"] && this["chk_2"]) {

                    alert("모든 약관에 동의함.");

                    return false;

                } else {

                    alert("모든 약관에 동의해 주세요.");

                    return false;

                }

            }

        }

    </script>

    <style>

        #btn {

            border-radius: 50%;

            background-color: beige;

            width: 100px;

            height: 100px;

            margin-top: 30px;

            border: none;

        }

    </style>

</head>


<body>

    <form action="#" method="post" name="login">

        <label><input type="checkbox" name="agree" id="chk1"> 약관동의1</label>

        <label><input type="checkbox" name="agree" id="chk2"> 약관동의2</label>

        <label><input type="checkbox" name="agree" id="chk3"> 약관동의3</label>

        <label><input type="text" id="myInput"> </label>

        <input type="submit" value="확인" id="check" onblur="myFunction()">

    </form>

    <button id="btn" onblur="myFunction()">text</button>

    <button id="reSetBtn">초기화</button>

    <script>

        function myFunction() {

            document.getElementById("btn").style.border = "2px solid red";

        }

    </script>

</body>


</html>