예시1
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = () => {
let button = document.querySelector("#btn");
button.onclick = () => {
let text = document.querySelector("#txt1");
if(text == ""){ // 내용이 없다면
alert("내용을 입력하세요!!");
}else {
document.querySelector("#txt2").value = text.value;
}
}
}
</script>
</head>
<body>
<h3>
버튼을 누르면 첫번째 텍스트 창에 입력된 내용을 <br/>
두번째 텍스트 창으로 복사하기
</h3>
<input type = "text" id = "txt1"> <br/>
<input type = "text" id = "txt2"> <br/><br/>
<input type = "button" id = "btn" value = "복사">
</body>
</html>=============================실행=============================
첫번째 창에 입력 후 복사 누르면
예시2
입력되지 않은 값이 있다면 입력하도록 알림메시지를 띄우고
입력됐다면 회원가입 클릭 시 홈페이지로 이동이 될 수 있도록 만들어보자!
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() {
let userId = document.querySelector("#id");
let userPwd = document.querySelector("#pwd");
let userName = document.querySelector("#name");
let userPhone = document.querySelector("#phone");
let userAddr = document.querySelector("#addr");
// 아이디 입력창의 입력 여부 확인
if(userId.value == ""){
alert("아이디를 입력하세요!!");
userId.focus(); // 커서가 깜빡임
return false; // 데이터 전송이 차단됨
}
// 비밀번호 입력창 입력 여부 확인
if(userPwd.value == ""){
alert("비밀번호를 입력하세요!!");
userPwd.focus();
return false;
}
// 연락처 입력창 입력 여부 확인
if(userPhone.value == ""){
alert("연락처를 입력하세요!!");
userPhone.focus();
return false;
}
// 이름 입력창 입력 여부 확인
if(userName.value == ""){
alert("이름을 입력하세요!!");
userName.focus();
return false;
}
// 주소 입력창 입력 여부 확인
if(userAddr.value == ""){
alert("주소를 입력하세요!");
userAddr.focus();
return false;
}
}
</script>
</head>
<body>
<div align = "center">
<h2>회원가입 폼 페이지</h2>
<form action = "http://www.google.com" onsubmit = "return check()">
<table border = "1">
<tr>
<th>아이디</th>
<td>
<input type = "text" id = "id">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type = "password" id = "pwd">
</td>
</tr>
<tr>
<th>연락처</th>
<td>
<input type = "text" id = "phone">
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input type = "text" id = "name">
</td>
</tr>
<tr>
<th>주소</th>
<td>
<input type = "text" id = "addr">
</td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "submit" value = "회원가입">
<input type = "reset" value = "다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>=============================실행=============================
값을 모두 입력하고 회원가입을 눌렀을 때
홈페이지 이동!
