[JavaScript] Form

1. 폼 프로퍼티와 메서드

• 폼과 요소 접근

폼(form)은 body 객체(document.body)와 마찬가지로 document의 직계 객체로 설계되어 있다. 다만, 문서 내에 여러 개의 폼이 존재할 수 있기 때문에 document.forms 유사배열에 담기게 된다. 따라서, DOM으로 form 요소에 접근한 후, 요소의 이름이나 타입의 값으로 폼 내부 요소에 접근할 수 있다.

① document 객체의 직계로 접근하는 방법 (대괄호 사용)
document.formName.elementName | elementTypeName

<form name="myForm" id="my_form">
  <input type="submit" name="btnSubmit" value="제출"/>
</form>

<script>
  <!--1. name으로 폼 객체 접근하는 방법-->
  <!--폼 객체 'myForm'의 name이 "btnSubmit"인 요소 접근-->
  const submitForm1 = document.myForm.btnSubmit;
  
  <!--2. type으로 폼 객체 접근하는 방법-->
  <!--폼 객체 'myForm'의 type이 "submit"인 요소 접근-->
  const submitForm2 = document.myForm.submit;
</script>

② document 객체의 forms 직계 객체를 통해 접근하는 방법 (forms. 사용)
document.forms['formName' | 'index'].elements['elementName' | 'elementTypeName']

<form name="myForm" id="my_form">
  <input type="submit" name="btnSubmit" value="제출"/>
</form>

<script>
  <!--문서 내의 첫 번째 폼 접근-->
  const submitForm = document.forms[0]; 
  
  <!--1. name으로 폼 객체 접근하는 방법-->
  <!--폼 객체 'myForm'의 name이 "btnSubmit"인 요소 접근-->
  const submitForm1 = document.forms['myForm'].elements['btnSubmit'];
  
  <!--2. type으로 폼 객체 접근하는 방법-->
  <!--폼 객체 'myForm'의 type이 "submit"인 요소 접근-->
  const submitForm2 = document.forms['myForm'].elements['submit'];
</script>

• 폼 역참조

폼이 내부에 있는 요소 모두를 참조하는 것처럼, 각 요소 또한 element.form으로 폼을 역참조할 수 있다.

<form name="myForm" id="">
  <input type="submit" name="btnSubmit" value="제출"/>
</form>

<script>
  <!--폼 -> 요소-->
  let btnSubmit1 = myForm.btnSubmit;

  <!--요소 -> 폼-->
 let btnSubmit1 = btnSubmit.myForm;
</script>

• 폼 요소 조작

• input
  input.value : 현재 input 값
  input.checked : input의 체크박스나 라디오버튼 값
• textarea
  textarea.value : 현재 textarea 값
• select와 option
  select.options : option 하위 요소를 담고 있는 컬렉션
  select.value : 현재 선택된 option 값
  select.selectedIndex : 현재 선택된 option의 인덱스
  option.selected : option의 선택 여부
  option.index : option 중 몇 번째인지를 나타내는 번호
  option.text : 사용자가 보게 될 텍스트

2. 폼 관련 이벤트

• focus와 blur 이벤트

focus - 사용자가 폼 요소를 클릭하거나 Tab 키를 눌러 요소로 이동하여 포커스를 얻음
autofocus - 페이지가 로드된 후 자동으로 포커싱
blur - 사용자가 다른 곳을 클릭하거나 Tab 키를 눌러 해당 폼을 나가면 포커스를 잃음

focus와 blur 이벤트는 버블링 되지 않는다. 이는 사용자가 input을 포커스 해도 focus 이벤트는 해당 입력 필드에서만 트리거 되기 때문이다.

그럼에도 이벤트 위임 효과를 주고 싶다면 다음 두 가지 방법을 이용한다.

① 캡처링을 이용한다. focus와 blur는 버블링 되지 않지만 캡처링은 된다.

② focusin와 focusout를 이용한다. 두 이벤트는 focus, blur와 동일하지만 버블링이 된다는 점에서 차이가 있다. focusin과 focusout을 사용할 때 주의할 점은 on<event> 방식으로 핸들러를 추가하면 안 되고 elem.addEventListener 방식으로 핸들러를 추가해야 한다.

• 폼 데이터 변경 이벤트

change : 요소의 값이 변경되고 나서 이벤트 발생 (변경 중에는 이벤트 발생 X)
input : 요소의 값이 수정될 때마다 발생 (변경 중에 이벤트 발생 O)
input 이벤트는 값이 수정되자마자 발생하기 때문에 event.preventDefault() 를 사용해 기본 동작을 막더라도 아무런 소용이 없다.

cut : 값을 잘라내기 할 때 이벤트 발생
copy : 값을 복사하기 할 때 이벤트 발생
paste : 값을 붙여넣기 할 때 이벤트 발생
cut, copy, paste는 event.preventDefault() 를 사용해 기본 동작을 막을 수 있다.

• 폼 제출 이벤트

submit : submit 버튼을 눌렀을 때 이벤트 발생
form.submit() : 자바스크립트로 직접 폼을 서버에 전송
form.submit() 메서드가 호출되고 난 이후부턴 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문에 submit 이벤트는 생성되지 않는다.

폼을 전송하는 방법은 2가지가 있다.
① 제출 버튼 누르기
② 인풋 필드에서 Enter 키 누르기

참고자료
폼과 폼 조작