JS
230104 JS form객체
주영재
2023. 1. 4. 18:38
form 객체
document객체의 하위 객체 중 하나. body처럼.
form을 이용하면 form 유효성 검사 등을 할 수 있음.
document의 하위 객체이므로 유일하게 name속성으로 선택이 가능함.
form의 요소는 form의 자식이므로 태그의 name으로 접근이 가능.
->ex)document.폼명, document.폼name.요소name
속성값
- value : input, textarea 요소의 value값을 반환함
- checked : checkbox나 radio가 체크되어 있으면 true, 체크되어 있지 않으면 false를 반환
- disabled : 요소가 활성화 상태이면 false, 비활성 상태이면 true를 반환
- length : 요소의 개수를 반환. 문자열.length로 사용
- focus() : 요소의 포커스를 맞춤
- blur() : 요소의 포커스를 없애 줌
- submit() : form의 값을 전송. 버튼을 누르지 않아도 가능
- reset() : form의 값을 초기화
<!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="list.board" name="actionform">
<h3>가입창</h3>
이름: <input type="text" name="name"><br>
번호: <input type="text" name="phone" onblur="phoneFunc()"><br>
분야:
<input type="checkbox" name="check">CSS
<input type="checkbox" name="check">JS
<input type="checkbox" name="check">HTML
<input type="submit" value="submit">
</form>
<script>
/*
1. form태그는 document의 자식이라서 form의 document.폼명으로 접근이 가능합니다.
2. input은 form의 자식이라서 document.폼명.태그name으로 접근이 가능합니다.
*/
// console.log(document.actionform);
// console.log(document.actionform.name);
// console.log(document.actionform.phone);
var submit = document.actionform.querySelector("input[type='submit']");//form안에서 찾기
submit.onclick = function () {
event.preventDefault();//submit의 고유이벤트 제거
if (document.actionform.name.value.length <= 0) {
alert('이름은 필수입니다');
document.actionform.name.focus();//포커싱
return;//반드시 함수 종료
} else if (document.actionform.phone.value.length != 11) {
alert('번호는 -없이 11글자로 입력하세요');
document.actionform.phone.value = '';
document.actionform.phone.focus();
return;
} else {//체크박스
var cnt = 0;
var check = document.actionform.check;//배열로받음
for (var i = 0; i < check.length; i++) {
if (check[i].checked) {
cnt++;
}
}
if (cnt == 0) {
alert('적어도 하나의 분야를 체크하세요');
return;
}
}
document.actionform.submit();//폼.submit();
}
function phoneFunc(){
event.target.value = event.target.value.replaceAll("-","");
//이벤트가 생성은 다 되지만 동작되지 않을 때가 있는데,
//그때 함수의 매개변수로 event를 주고 사용하면 됨.
}
</script>
</body>
</html>
