input, select, textarea
폼과 폼 조작하기
1. 폼과 요소 탐색하기
폼은 특수한 컬렉션인 document.forms의 구성원입니다.
<form name="myForm">
<input type="text" name= "userId">
</form>
1) 폼의 name값으로 접근: document.forms.폼이름
ex> document.forms.myForm
2) 폼의 순서로 접근: document.forms[0]
-> 문서 내에 첫번째 폼
3) 폼의 요소에 접근 form.elements.요소name값
ex> form.elements.userId
짧은 표기법 form.name
4) focus 지정하기
- autofocums 속성 추가
- node.focus() 메서드
폼 이벤트
input: input태그에 값을 적을 때
change: 폼 요소의 값이 변경될 때
focus: 커서가 선택되었을 때
blur: 커서가 떠났을 때
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>
:focus {
background-color: yellow;
}
</style>
</head>
<body>
<form action="" name="myForm" id="form1">
<input type="text" name="userId" id="userId" value="아이디" autofocus>
<input type="text" 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="text" name="userPass">
</form>
<script>
// 폼 탐색
let form1 = document.querySelector('#form1');
// let form2 = document.forms.myForm;
// let form3 = document.forms[0];
// let form1 = document.querySelector('#form2');
let form2 = document.forms.myForm2;
let form3 = document.forms[1];
console.log(form1);
console.log(form2);
console.log(form3); // 셋 다 결과 같음
// 폼안의 요소탐색
// form.elements.name
// console.log(form1.elements.userId);
console.log(form1.elements.userPass);
console.log(form1.userPass); // 짧은 표기법 form.name (elements 생략가능)
console.log(document.querySelector('#userId'));
console.log(form1.elements.userPass == form1.userPass);
console.log(form1.msg.value);
document.querySelector('#userPass').focus();
let input1 = form1.userId;
let input2 = form1.userPass;
console.log(input1, input2);
input1.addEventListener('keydown', function(e){
if(e.key==='Enter') input2.focus();
})
</script>
</body>
</html>
form_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>
</head>
<body>
<form action="" name="myForm" id="form1">
주민등록번호
<input type="text" name="bth" id="bth" autofocus> -
<input type="text" name="secure" id="secure">
</form>
<script>
// let form1 = document.querySelector('#form1');
// let k_num = 0;
// document.querySelector('#bth').focus();
// let input1 = form1.bth;
// input1.addEventListener('keydown', function(e){
// if(typeof(e.ley) == typeof(1)) {
// k_num += 1;
// if(k_num == 7) {
// let input2 = form1.secure;
// input2.focus();
// }
// }
// })
document.querySelector('#bth').focus();
let form1 = document.querySelector('#form1');
let input1 = form1.bth;
input1.addEventListener('keydown', function(e){
if(input1.value.length == 6) {
let input2 = form1.secure;
input2.focus();
}
})
</script>
</body>
</html>
form_t_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>
</head>
<body>
<form action="" name="myForm">
<p>주민번호 <input type="text" id="ssn" name="ssn" autofocus>
- <input type="text" 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))){
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>
<p>좋아하는 과일 선택하기</p>
<p>🍎 <input type="checkbox" name="fruits" value="apple"></p>
<p>🍊 <input type="checkbox" name="fruits" value="orange"></p>
<p>🍌 <input type="checkbox" name="fruits" value="banana"></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>
checkbox_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>
.bottom {
display: flex;
}
</style>
</head>
<body>
<p>전체선택 <input type="checkbox" name="all" id="all" value=""></p><hr>
<p>🍎 <input type="checkbox" class="fruits" value="사과"></p>
<p>🍉 <input type="checkbox" class="fruits" value="수박"></p>
<p>🍌 <input type="checkbox" class="fruits" value="바나나"></p>
<p>🍊 <input type="checkbox" class="fruits" value="오렌지"></p>
<p class="bottom">
<button id="btn">확인</button>
<p id="result"></p>
</p>
<script>
const btn = document.querySelector('#btn');
const all = document.querySelector('#all');
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;
})
all.addEventListener('click', function(){
let fruitsInputs = document.querySelectorAll('.fruits');
if (all.checked == true) {
fruitsInputs.forEach(input=>{
input.checked = true;
})} else {
fruitsInputs.forEach(input=>{
input.checked = false;
})
}
})
</script>
</body>
</html>
checkbox_t_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>
</head>
<body>
<form action="" name="fruitsForm">
<p>전체 선택 <input type="checkbox" name="allch"></p>
<p>사과 <input type="checkbox" value="사과" name="fafru"></p>
<p>수박 <input type="checkbox" value="수박" name="fafru"></p>
<p>바나나 <input type="checkbox" value="바나나" name="fafru"></p>
<p>오렌지 <input type="checkbox" value="오렌지" name="fafru"></p>
</form>
<p><button id="btn">확인</button><span id="result"></span></p>
<script>
let form = document.forms.fruitsForm;
let allch = form.allch;
allch.addEventListener('click', function(){
let inputs = document.forms.fruitsForm.fafru;
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.fafru;
let str = '';
inputs.forEach(input=>{
str = input.checked ? str+input.value : str;
})
document.querySelector('#result').innerHTML = str;
})
</script>
</body>
</html>
chAddress.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>
<p>회원주소
<input type="text" name="address" id="address" value="울산시 남구 삼산동">
</p>
<p>
배송지가 같으면 다음을 체크하세요
<input type="checkbox" name="chk" id="chk">
</p>
<p>
배송지 주소
<input type="text" name="address2" id="address2">
</p>
<script>
document.querySelector('#chk').addEventListener('click', function(){
if(this.checked) {
document.querySelector('#address2').value = document.querySelector('#address').value;
} else {
document.querySelector('#address2').value="";
}
})
</script>
</body>
</html>
change.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>
<select name="num" id="num" > <!-- onchange="console.log(this.value)" -->
<option value="가">10</option>
<option value="나">20</option>
<option value="다">30</option>
<option value="라">40</option>
</select>
<script>
document.querySelector('#num').addEventListener('change',function(){
console.log(this.value);
})
</script>
</body>
</html>
change_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>
</head>
<body>
<p>가격 <input type="text" name="price" id="price"></p>
<p>수량
<select name="num" id="num" >
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
</p>
<p>총가격 <input type="text" name="total" id="total"> </p>
<script>
let price = document.querySelector('#price');
let num = document.querySelector('#num')
// document.querySelector('#num').addEventListener('change',function(){
// total.value = price.value * this.value;
// })
// document.addEventListener('keyup', function(e){
// if(price.value.length >=1 && isNaN(Number(this.value))) {
// total.value = price.value * num.value;
// }
// })
price.addEventListener('input', function(){
// 입력받은 값을 숫자형으로 변환
let priceNumber = Number(this.value);
if(isNaN(priceNumber)) return;
else {
sum();
}
})
num.addEventListener('change',sum);
// input의 값과 select의 값을 곱해서totalPrice input의 값으로 지정
function sum() {
let total = price.value * num.value;
console.log(total);
document.querySelector('#total').value = total;
}
</script>
</body>
</html>
change_ex2.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>
#total {
font-size: inherit;
border: none;
}
#total2 {
font-size: inherit;
border: none;
}
</style>
</head>
<body>
<h1>1. 연산</h1>
<p>
<input type="text" name="num1" id="num1"> +
<input type="text" name="num2" id="num2"> =
<input type="text" name="result" id="result">
<button id="btn">연산</button>
</p>
<h1>2. 총합 구하기</h1>
<p>
가격
<input type="text" name="pirce" id="price"> x
수량
<select name="num" id="num" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
총합 : <input type="text" name="total" id="total">
</p>
<h1>3. 총합 구하기2 (선택된 값만)</h1>
<form action="" name="fruits">
<p>바나나(1000원) <input type="checkbox" value="1000" name="fafru"></p>
<p>사과(500원) <input type="checkbox" value="500" name="fafru"></p>
<p>배(1500원) <input type="checkbox" value="1500" name="fafru"></p>
</form>
<button id="btn2">총합구하기</button>
<p>선택한 총가격: <input type="text" name="total2" id="total2"></p>
<script>
// 1. 연산
btn.addEventListener('click', function(){
result.value = Number(num1.value) + Number(num2.value);
})
// 2. 총합 구하기
document.querySelector('#num').addEventListener('change',function(){
total.value = price.value * this.value;
})
// 3. 총합 구하기2
btn2.addEventListener('click', function(){
let inputs = document.forms.fruits.fafru;
let str = 0;
inputs.forEach(input=>{
str = input.checked ? str + Number(input.value) : str;
})
total2.value = str;
})
</script>
</body>
</html>
'Stack > JavaScript' 카테고리의 다른 글
| [JS] 정규표현식 (0) | 2022.05.19 |
|---|---|
| [JS] Daum 우편번호 서비스 API 활용 (0) | 2022.05.18 |
| [JS] keyup / keydown (0) | 2022.05.18 |
| [JS] 쪽지시험 끄적끄적 (1) | 2022.05.16 |
| [JS] Scroll (2) | 2022.05.16 |