<!DOCTYPE html>
<html lang="ko">
<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>DOM_event</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
/*
// javascript
document.querySelector('#user_id')
document.querySelector('#user_id').value
// form 다루는 방법
// console
document.forms // 폼에 대한 정보가 나옴.
document.forms[0].elements
document.forms[0].elements[0]
document.forms[0].elements[0].value
document.forms['login'].elements['user_id'].value
document.login.user_id // ★
document.login.user_id.value // ★
*/
const infoChk = document.getElementById("info_chk");
infoChk.addEventListener("click", function () {
if (infoChk.checked) {
// 체크되었다면 이라는 뜻. if(infoChk.checked == true)로 적어도 됨.
document.getElementById("deli_name").value =
document.getElementById("user_name").value;
document.getElementById("deli_tel").value =
document.getElementById("user_tel").value;
document.getElementById("deli_addr").value =
document.getElementById("user_addr").value;
} else {
document.getElementById("deli_name").value = "";
document.getElementById("deli_tel").value = "";
document.getElementById("deli_addr").value = "";
}
});
});
</script>
<style></style>
</head>
<body>
<div class="container">
<h2>로그인</h2>
<form action="" name="login">
<!-- id, class 사용하는 추세이다. -->
<div class="login_input">
<input
type="text"
name="user_id"
id="user_id"
class="user_id"
placeholder="아이디 입력"
autofocus
/>
<!-- 기능은 id(원래는 구조잡는 데 사용했음)/ 디자인은 class(구조까지도 클래스로함) -->
<!-- input:text로 입력하면 편함 -->
<!-- 보통 name, id, class는 동일하게 쓴다. -->
<input
type="password"
name="user_pw"
id="user_pw"
class="user_pw"
placeholder="비밀번호 입력"
/>
</div>
<div class="login_btn">
<button type="submit" class="login_btn">로그인</button>
</div>
</form>
<br />
<hr />
<br />
<form action="" name="order">
<fieldset>
<legend>주문정보</legend>
<ul>
<li>
<label for="user_name">이름 : </label>
<input type="text" name="user_name" id="user_name" />
</li>
<li>
<label for="user_tel">전화번호 : </label>
<input type="text" name="user_tel" id="user_tel" />
</li>
<li>
<label for="user_addr">주소 : </label>
<input type="text" name="user_addr" id="user_addr" />
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송정보</legend>
<ul>
<li>
<input type="checkbox" name="info_chk" id="info_chk" />
<label for="info_chk">주문정보와 배송정보가 같습니다.</label>
</li>
<li>
<label for="deli_name">이름 : </label>
<input type="text" name="deli_name" id="deli_name" />
</li>
<li>
<label for="deli_tel">전화번호 : </label>
<input type="text" name="deli_tel" id="deli_tel" />
</li>
<li>
<label for="deli_addr">주소 : </label>
<input type="text" name="deli_addr" id="deli_addr" />
</li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>