<!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>
20211208-