📖
폼(form) 조작에 사용되는 요소에는 특별한 프로퍼티와 이벤트가 많기 때문에 따로 분리하여 작성하기로 하였다. 그럼 두말하지 않고 바로 시작해보도록 하겠다 👨💻
폼(form)
특수한 컬렉션인 document.forms의 구성원
폼의 이름이나 순서를 사용해 문서 내의 폼에 접근할 수 있다.
document.forms.my - 이름이 'my'인 폼
document.forms[0] - 문서 내의 첫 번째 폼
폼의 요소를 가져오는 방법 : form.elements
다만 먼저 이름이나 순서를 사용해 원하는 폼을 가져와야 한다.
폼(form) 요소
input과 textarea
input과 textarea 요소의 값은 input.value (string) 또는 input.checked(boolean)을 사용해 얻을 수 있다.
select과 option
select의 프로퍼티
select.options – <option> 하위 요소를 담고 있는 컬렉션
select.value – 현재 선택된 <option> 값
select.selectedIndex – 현재 선택된 <option>의 번호(인덱스)
select의 multiple 속성이 있는 경우
<option>하위 요소에 있는 selected 프로퍼티를 추가·제거를 해준 뒤, 선택된 여러 개의 option이 담긴 컬렉션은 다음 예시처럼 select.options를 사용해 얻을 수 있다.
활용 예시 코드
<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
<script>
// 세 가지 코드의 실행 결과는 모두 똑같다.
select.options[2].selected = true;
select.selectedIndex = 2;
select.value = 'banana';
</script>focus와 blur
focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생한다.
elem.focus()와 elem.blur() 메서드를 사용하면 요소에 포커스를 줄 수도 있고 제거할 수도 있다.
⚠️유의해야 할 점⚠️
- onblur는 요소가 포커스를 잃고 난 후에 발생하기 때문에 onblur 안에서 event.preventDefault()를 호출해 포커스를 잃게 하는걸 '막을 수 없다’라는 사실
- focus와 blur 이벤트는 버블링 되지 않는다. 캡처링이나 focusin, focusout을 사용하면 이벤트 위임 효과를 볼 수 있다.
이벤트(submit 제외)
저번에는 어느 것이 있었는지 간략하게 보여줬다면 이번에는 form에서 자주 쓰이는 이벤트인 change, input, cut, copy, paste을 다뤄보도록 하겠다. submit은 따로 소제목으로 다루도록 하겠다.
change
change 이벤트는 요소 변경이 끝나면 발생한다.
- 텍스트 입력 요소인 경우에는 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생하게 된다.
- input 이벤트는 사용자가 값을 수정할 때마다 발생한다.
cut, copy, paste
cut, copy, paste 이벤트는 ClipboardEvent 클래스의 하위 클래스이며 각각 값을 잘라내기·복사하기·붙여넣기 할 때 발생한다. input 이벤트와는 달리 세 이벤트는 event.preventDefault()를 사용해 기본 동작을 막을 수 있다. 이렇게 하면 아무것도 복사·붙여넣기 할 수 없다.
/* 잘라내기·복사하기·붙여넣기 동작을 시도하면
모든 동작들이 중단되고 얼럿창을 통해 중단된 이벤트 이름을 보여준다*/
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(event) {
alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
return false;
};
</script>이벤트(submit)
submit 이벤트는 폼을 제출할 때 발동 되는데, 주로 폼을 서버로 전송하기 전에 내용을 검증하거나 폼 전송을 취소할 때 사용한다.
한편, form.submit() 메서드는 자바스크립트만으로 폼 전송을 하고자 할 때 사용합니다. submit()메서드는 동적으로 폼을 생성하고 서버에 보내고자 할 때 사용한다.
폼을 전송하는 방법
<input type="submit">이나<input type="image">클릭하기- input 필드에서 Enter 키 누르기
- submitForm.addEventListener("submit", 이벤트 핸들러 함수)
form.submit()을 호출하면 자바스크립트로 직접 폼을 서버에 전송할 수 있다. form.submit() 메서드가 호출된 다음엔 submit 이벤트는 생성되지 않는다. 개발자가 form.submit()을 호출했다면 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문이다.
let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';
form.innerHTML = '<input name="q" value="테스트">';
// 폼을 제출하려면 반드시 폼이 문서 안에 있어야 한다.
document.body.append(form);
form.submit();