JavaScript - Form 객체, select 요소, option 요소, form 객체에서의 this
Form 객체
- document 객체의 하위 객체 중에 하나
- 'form 유효성' 검사 등과 같은 여러 가지 form 요소에 관련된 작업을 수행 가능
form 객체의 선택
| document.폼요소.요소.속성 요소를 선택할 때 보통 id 속성을 사용하지만 form 객체에서는 'name 속성'을 사용 |
| document.forms[index].elements[index].속성 |
| document.forms[index][index].속성 |
| document.forms["폼명"].elements["요소명"].속성 |
| document.forms["폼명"]["요소명"].속성 |
form 객체의 속성
| 속성 및 메서드 | 설명 |
| value | input, textarea 요소의 value 값을 반환 |
| checked | checkbox나 radio가 check 되어 있으면 true, check 되어 있지 않으면 false 반환 |
| disabled | 요소가 활성화 상태이면 false, 비활성화 상태이면 true를 반환 |
| defaultValue | 초기 설정값을 반환 |
| length | 요소의 개수를 반환 |
| focus() | 요소에 포커스를 맞춤 |
| blur() | 요소에 포커스를 없애줌 |
| submit() | form 요소 값들을 전송 |
| reset() | form 요소 값들을 초기화 |
ex) form 객체를 이용한 '폼 유효성 검사' - form 요소가 한 개인 경우
<body>
<form action="#" name="frm" onsubmit="return check()">
<label for="product">상품입력</label>
<input type="text" name="product" id="product" />
<input type="submit" value="검색" />
</form>
</body>
<script>
function check() {
var frm = document.frm;
if (!frm.product.value) {
alert("상품명을 입력하세요!");
frm.product.focus();
return false;
}
}
</script>
>> 설명
onsubmit 이벤트는 전송이 발생되었을 때 실행하는 이벤트이다. 여기서는 submit 버튼을 눌렀을 때 이벤트가 발생한다.
만약 onsubmit 이벤트를 주지 않으면 'submit 버튼에' 있는 전송 이벤트(기본 이벤트)가 발생되어 '폼 유효성 검사'전에
form이 전송되는 문제가 발생. onsubmit 이벤트를 사용하면 일단 form이 전송되는 것을 막아주고 check()함수를 먼저 실행
원칙적으로 product 요소(name='product')에 value 값이 있으면 true, 없으면 false 반환
조건식에 의해 만약 product 요소에 value 값이 없다면 false가 !false가 되므로 true 반환
return false를 해주는 이유
: 만약 false를 리턴시키지 않으면 'submit 버튼'에 있는 전송 이벤트가 아직 유효한 상태이므로 또다시 form을 전송시키는 문제 발생
return false이므로 false값을 반환 한다면 onsubmit="return false"가 되고 onsubmit 이벤트 핸들러에 false를 다시 리턴하면 전송에
대한 기본 이벤트를 제거하게 됨. 만약, false(product요소에 value값이 있다면)가 나와 flase가 return 되지 않으면 form을 전송
ex) form 요소가 여러 개인 경우 선택하는 방법
* href = '#'을 이용하면 무조건 페이지 최상단으로 이동
<body>
<form action="#" name="frm1" onsubmit="return check1()">
<input type="text" name="subject" title="과목입력" />
<input type="submit" value="전송" />
</form>
<form action="#" name="frm2" onsubmit="return check2()">
<input type="text" name="query" title="검색어 입력" />
<input type="submit" value="전송" />
</form>
</body>
<script>
function check1() {
var idValue = document.forms[0].elements[0].value;
//var idValue=document.forms[0][0].value;
alert(idValue);
return false;
}
function check2() {
var idValue = document.forms["frm2"].elements["query"].value;
//var idValue2=document.forms["frm2"]["query"].value;
alert(idValue);
return false;
}
</script>
>> form 요소를 배열 방식으로 선택 가능 forms[0]은 첫 번째 form 요소, elements[0]은 form 요소 안의 첫 번째 요소
