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>Document</title>
<style>
input:focus {
background: lightcyan;
/* 클릭되면 배경색 바뀜 */
}
:focus {
background: lightcoral;
/* 클릭되면 배경색 바뀜 */
}
</style>
</head>
<body>
<!-- 🍓 많이 사용함, 중요 🍓 -->
<form action="" name="myForm1" id="form1">
<input type="text" name="userId" id="userId" value="아이디"> <!-- autofocus -->
<input type="password" name="userPass" id="userpass">
<textarea name="msg" id="myMsg" cols="30" rows="10">안녕하세요 🧡</textarea>
</form>
<form action="" name="myForm2" id="form2">
<input type="text" name="userId">
<input type="password" name="userPass">
</form>
<script>
// ⭐ 폼 탐색
let form1 = document.querySelector('#form1');
let form2 = document.forms.myForm1;
let form3 = document.forms[0];
console.log(form1);
console.log(form2);
console.log(form3);
let form4 = document.querySelector('#form2');
let form5 = document.forms.myForm2;
let form6 = document.forms[1];
console.log(form4);
console.log(form5);
console.log(form6);
// ⭐ input, 폼 안의 요소 탐색, 다 똑같음
// form.elements.name
console.log(form1.elements.userId);
console.log(form1.elements.userPass);
console.log(form1.userPass); // 짧은 표기법
console.log(document.querySelector('#userId'));
console.log(form1.elements.userPass == form1.userPass); // true
// ⭐ textarea
console.log(form1.msg.value); // 안녕하세요 🧡
// ⭐ focus 지정
// autofocus
document.querySelector('#userId').focus();
// ⭐ focus 자동으로 넘어가게
let input1 = form1.userId;
let input2 = form1.userPass;
// document.querySelector('#userId').addEventListener('keydown', function(e) {
// if(e.key === 'Enter') input2.focus();
// })
// 위와 같음 ↑↓
input1.addEventListener('keydown', function(e) {
if(e.key === 'Enter') input2.focus();
})
</script>
</body>
</html>
form_focus_ex.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>Document</title>
<style>
input:focus {
background: lightblue;
}
</style>
</head>
<body>
<form action="" name="myForm">
<p>주민번호 <input type="text" id="ssn" name="ssn" autofocus>
- <input type="password" name="ssn2"></p>
</form>
<script>
let form = document.forms.myForm;
let input = form.ssn;
input.addEventListener('keyup', function(e){
console.log(this.value.length); // 값이 출력되는지 . 입력 길이 출력
// ⭐ input의 입력 값의 길이가 6이면서,
// 문자가 없을 때 커서를 다음 input으로 이동
if(this.value.length == 6 && !isNaN(Number(this.value))) {
// 값을 숫자형으로 변경했을 때 isNaN이 아닐때
// isNaN, 맞을 때 true 아닐 때 false
// 문자는 안넘어감 💚
form.ssn2.focus();
}
})
</script>
</body>
</html>
checkBox.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>Document</title>
</head>
<body>
<!-- ⭐ check 했는지 확인 -->
<!-- Boolean ) checked 내가 체크한거 ) 없으면 false 있으면 true -->
<p>좋아하는 과일 선택하기</p>
<p>🍎<input type="checkbox" name="fruits" value="apple" checked></p>
<p>🍌<input type="checkbox" name="fruits" value="banana"></p>
<p>🍊<input type="checkbox" name="fruits" value="orange"></p>
<p><button id="btn">결과보기</button></p>
<p id="result"></p> <!-- 결과 출력 -->
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
let fruitsInputs = document.querySelectorAll('input');
let str = ''; // 빈문자열 변수
fruitsInputs.forEach(input => {
str = input.checked ? str+input.value : str; // 값넣기 : 빈문자
})
document.querySelector('#result').innerHTML = str;
})
</script>
</body>
</html>
allCheck.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>Document</title>
</head>
<body>
<form action="" name="fruitsForm">
<p>전체선택<input type="checkbox" name="allch" name="allch"></p>
<p>사과<input type="checkbox" value="사과" name="fafre"></p>
<p>수박<input type="checkbox" value="수박" name="fafre"></p>
<p>바나나<input type="checkbox" value="바나나" name="fafre"></p>
<p>오렌지<input type="checkbox" value="오렌지" name="fafre"></p>
</form>
<p><button id="btn">확인</button><span id="result"></span></p>
<script>
let form = document.forms.fruitsForm;
let allch = form.allch;
console.log(allch);
allch.addEventListener('click', function() {
let inputs = document.forms.fruitsForm.fafre; // 폼이름.폼요소
if(this.checked) {
inputs.forEach(input => {
input.checked = true;
})
} else {
inputs.forEach(input => {
input.checked = false;
})
}
})
let btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
let inputs = document.forms.fruitsForm.fafre;
let str = '';
inputs.forEach(input => {
str = input.checked ? str+input.value : str;
})
document.querySelector('#result').innerHTML = str;
})
</script>
</body>
</html>
