form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form.html</title>
    <link href="css/mystyle1.css" rel="stylesheet">
</head>
<body>
    <div class="container1">
    
        <h3>form 실습</h3>
        <hr />
        <div>
            <label class="lbl1">아이디, 이름</label>
            <input type="text" /><br />
        </div>

        <div>
            <label class="lbl1">암호</label>
            <input type="password" /><br />
        </div>

        <div>
            <label class="lbl1">관심분야</label>
            <input type="checkbox" class="chk1" value="html" />html
            <input type="checkbox" class="chk1" value="css" />css
            <input type="checkbox" class="chk1" value="javascript" />javascript
            <input type="button" value="체크된 개수 확인" id="btn1" />
            <br />
        </div>

        <div>
            <label class="lbl1">라디오</label>
            <input type="radio" name="a" value="html" />
            <input type="radio" name="a" value="css" />
            <input type="radio" name="a" value="javascript" />
            <input type="button" value="체크된 개수 확인" id="btn2" />
            <br />
        </div>
        
        <div>
            <label class="lbl1" >긴 글 작성</label>
            <textarea rows="5" cols="50"></textarea><br />
        </div>

        <div>
            <label class="lbl1">선택</label>
            <select>
                <option>a</option>
                <option>b</option>
            </select><br />
        </div>

        <div>
            <label class="lbl1">버튼</label>
            <input type="button" value="버튼" /> <br />
        </div>

        <div> 
            <label class="lbl1">파일첨부</label>
            <input type="file" /><br />
        </div>

        <div>
            <label class="lbl1">날짜</label>
            <input type="date" /><br />
        </div>
    </div>

    <script>     

        const btn1 = document.getElementById('btn1');

        btn1.addEventListener('click', function() {
            const chk1 = document.getElementsByClassName('chk1');

            for(const tmp of chk1){
                if(tmp.checked === true) {
                    console.log(tmp.value);
                }
            }
        });

        const btn2 = document.getElementById('btn2');

        btn2.addEventListener('click', function() {
            const chk1 = document.getElementsByName('a');

            for(const tmp of chk1){
                if(tmp.checked === true) {
                    console.log(tmp.value);
                }
            }
        });

        // 반복문. for(const 임시변수 of 배열변수)
        // console.log(chk1);    <- 한번에 출력. 결과물: [~~~, ~~~, ~~~] <- 배열 = array
        // console.log(chk1[0]); <- 하나씩 출력
        // console.log(chk1[1]);
        // console.log(chk1[2]);

    </script>
</body>
</html>

좋은 웹페이지 즐겨찾기