728x90
반응형
** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
1. form요소의 name속성선택
- 폼 요소는 name속성값을 통해 선택이 가능합니다.
## 문법
document.폼네임.요소네임;
//혹은
document.forms['폼네임'].elements['요소네임'];
//혹은
document.forms['폼네임']['요소네임'];
## 코드 예시
- input태그에 작성된 값(value)를 p태그에 반환해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Forms</title>
</head>
<body>
<form action="#" name="myForm">
<input type="text" name="myInput">
</form>
<p id="text"></p>
<script>
var box = document.myForm.myInput;
var text = document.getElementById('text');
box.onkeyup = function(){
var v = this.value;
text.textContent = v;
}
</script>
</body>
</html>
## 코드 결과
- 잘 작성되는 것을 확인할 수 있습니다.
2. form요소 관련 속성과 메서드
1) form요소의 속성과 메서드 종류
| 종류 | 설명 |
| checked | input태그의 checkbox나 radio가 체크되어 있으면 true를 반환, 그렇지 않으면 false를 반환 |
| defaultValue | 초기 설정값을 반환 |
| disabled | 요소가 활성상태이면 false를 반환, 비활성상태이면 true를 반환 |
| length | 요소의 개수를 반환 |
| value | input, select, textarea 요소의 value값을 반환 |
| blur() | 요소에서 포커스를 없앰 |
| focus() | 요소에 포커스를 맞춤 |
| submit() | form 요소 값들을 전송 |
| reset() | form 요소 값들을 초기화 |
2) checked속성
## 문제
| 문제) 사용자에게 주민등록번호를 받아 뒷자리의 첫글자가 1 혹은 3이면, 남자가 체크되게 처리하고, 2 혹은 4이면 여자가 체크되도록 처리하시오. 단, 1~4사이 숫자를 입력한 것이 아니라면 [1~4사이 숫자로 입력하세요]라는 경고창이 뜨게하고, 비어있을때는 아무런 명령이 발생되지 않게 처리하시오. |
## 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Forms</title>
</head>
<body>
<form action="#" name="myForm">
<input type="text" name="idBefore" maxlength="6">
-
<input type="text" name="idAfter" maxlength="1" style="width: 10px;">XXXXXX
<br>
<input type="radio" name="gender" id="male">
<label for="male">남자</label>
<input type="radio" name="gender" id="female">
<label for="female">여자</label>
</form>
<p id="text"></p>
<script>
var box = document.forms['myForm']['idAfter'];
var male = document.getElementById('male');
var female = document.getElementById('female');
box.onkeyup = function(){
var v = this.value;
if(v == 1 || v == 3){
male.checked = true;
female.checked = false;
}else if(v == 2 || v == 4){
male.checked = false;
female.checked = true;
}else if(v){
alert('1~4사이 숫자로 입력하세요');
}
}
</script>
</body>
</html>
## 코드 결과
728x90
3. form 유효성 관련 속성과 메서드
1) 유효성관련 DOM 메서드
| 메서드 종류 | 설명 |
| checkValidity() | 입력요소에 유효한 데이터가 있으면 true를 반환 |
| setCustomValidity() | 입력 요소의 validationMessage속성을 설정 |
## 코드 예시
- 1~100사이의 숫자를 입력하지 않으면 유효성메시지를 띄우시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Forms</title>
</head>
<body>
<form action="#" name="myForm">
<p>숫자를 입력하고 확인을 클릭해주세요.(1~100)</p>
<input type="number" id="numBox" name="numBox" min="1" max="100" required>
<button type="button" id="btn">확인</button>
</form>
<p id="text"></p>
<script>
var numBox = document.forms['myForm']['numBox'];
var btn = document.getElementById('btn');
var text = document.getElementById('text');
btn.onclick = function(){
//만일 numBox가 유효한 값이 아니라면
if(!numBox.checkValidity()){
//text에 numNox의 validationMessage값을 추가하시오.
text.innerHTML = numBox.validationMessage;
}else{ //유효한 값이라면
text.innerHTML = '유효한 값입니다.';
}
}
</script>
</body>
</html>
## 코드 결과
2) 유효성관련 DOM 속성
| 속성 종류 | 설명 |
| validity | 입력 요소의 유효성과 관련된 불 속성을 포함 |
| validationMessage | 유효성이 거짓일 때 브라우저가 표시할 메시지를 포함 |
| willValidate | 입력 요소의 유효성을 검사할지 여부를 나타냄 |
3) validity의 속성
| 속성 종류 | 설명 |
| customError | 사용자 정의 유효성 메시지가 설정된 경우 true로 설정 |
| patternMismatch | 요소의 값이 패턴 속성과 일치하지 않는 경우 true로 설정 |
| rangeOverflow | 요소의 값이 최대 속성보다 큰 경우 true로 설정 |
| rangeUnderflow | 요소의 값이 최소 속성보다 큰 경우 true로 설정 |
| stepMismatch | 요소의 값이 단계 속성 당 유효하지 않은 경우 true로 설정 |
| tooLong | 요소의 값이 maxLength 속성을 초과하는 경우 true로 설정 |
| typeMismatch | 요소의 값이 유형 속성에 따라 유효하지 않은 경우 true로 설정 |
| valueMissing | 요소(필수 속성 포함)에 값이 없는 경우 true로 설정 |
| valid | 요소의 값이 유효하면 true로 설정 |
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - Forms</title>
</head>
<body>
<form action="#" name="myForm">
<p>숫자를 입력하고 확인을 클릭해주세요.(1~100)</p>
<input type="number" id="numBox" name="numBox" min="1" max="100" required>
<button type="button" id="btn">확인</button>
</form>
<p id="text"></p>
<script>
var numBox = document.forms['myForm']['numBox'];
var btn = document.getElementById('btn');
var text = document.getElementById('text');
btn.onclick = function(){
//만일 numBox가 유효한 값이 아니라면
if(numBox.validity.rangeOverflow){
//text에 numNox의 validationMessage값을 추가하시오.
text.innerHTML = numBox.validationMessage;
}else{ //유효한 값이라면
text.innerHTML = '유효한 값입니다.';
}
}
</script>
</body>
</html>
## 코드 결과
728x90
반응형
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 27강 자바스크립트 에러(Error) - 오쌤의 니가스터디 (0) | 2021.06.18 |
|---|---|
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
| [JS강좌] 24강 HTML DOM Node - 오쌤의 니가스터디 (0) | 2021.06.16 |
| [JS강좌] 23강 이벤트객체의 속성과 메서드 - 오쌤의 니가스터디 (0) | 2021.06.15 |
| [JS강좌] 22강 DOM - 문서객체이벤트 - 오쌤의 니가스터디 (0) | 2021.06.12 |
