✅ HTML form

폼은 document.forms 이라는 순서 있는 기명 컬렉션의 구성원으로,
form 태그의 name 속성이나 순서로 폼에 접근할 수 있습니다.

document.forms.my - 이름이 'my'인 폼
document.forms[0] - 문서 내의 첫 번째 폼

얻어온 폼 안의 요소는 form.elements.name 으로 접근 가능합니다.
동일한 name 의 요소가 여러개라면 form.elements.name 은 컬렉션을 반환합니다.
form.elements.name 으로 가져온 폼 안의 요소는 element.form 으로 소속된 폼을 반환합니다.

let my = document.forms.my; // name 속성의 값이 my 인 폼

let login = my.elements.login; // my 폼 안의 name 속성이 login 인 요소

login.form; // my 폼을 역참조

🔔 focus 와 blur

사용자가 폼 태그 안의 요소를 클릭하거나 Tab 으로 해당 요소로 이동하면 요소가 포커스(focus) 됩니다.
반대로 포커스되었던 요소가 포커스를 잃는 순간을 블러(blur) 라고 합니다.

대게 요소가 포커스를 얻었다는 것은 그 요소에 데이터를 입력할 준비를 한다는 뜻이고,
포커스를 잃어 블러 이벤트가 발생했다는 것은 데이터 입력이 끝났다는 뜻입니다.

• focus: 요소가 포커스를 받을 때 발생하는 이벤트
• blur: 요소가 포커스를 잃을 때 발생하는 이벤트
• elem.focus() / elem.blur() 메서드로 요소에 포커스를 주거나 없앨 수 있음

의도치 않은 focus loss

사용자 행동(포커스 된 요소가 아닌 다른 곳을 클릭하는 등...)이 아니어도
포커스가 없어질 수 있습니다.

• alert 이 발생하면 포커스를 잃고, 끝나면 다시 포커스가 돌아옴
• 요소가 DOM 에서 제거되면 포커스를 잃음. 요소가 다시 돌아와도 포커스는 돌아오지 않음

위처럼 의도치않게 focus/blur 핸들러가 동작할 수 있으므로 유의해야 합니다.

버블링과 캡처링, focusin 과 focusout

focus 와 blur 이벤트는 버블링을 사용할 수 없습니다.
그래서 부모 요소에 이벤트 핸들러를 등록하여 자식 요소의 이벤트 발생을 처리할 수 없죠.
캡처링은 사용할 수 있기 때문에 핸들러 등록시 캡처링을 허용해주면 됩니다.

그외로, focusin 과 focusout 을 이용하면 됩니다.
두 이벤트는 focus / blur 과 동일하지만 버블링이 발생합니다.

• focusin: focus 와 동일하게 발생, 버블링 가능
• focusout: blur 와 동일하게 발생, 버블링 가능

⚡ 데이터 변경과 이벤트

form 태그에는 사용자 입력을 받는 요소가 들어갑니다.
input 태그로 이메일, 전화번호를 입력받거나 select 태그 안의 option 으로 옵션을 선택하거나 하죠.

사용자가 어떤 데이터를 입력하고 무엇을 선택했는지는 input.value 나 select.value 처럼
요소의 value 프로퍼티로 알 수 있습니다.

데이터를 다루며 발생하는 이벤트와 발생 상황은 다음과 같습니다.

• change: 요소 변경이 끝나면 발생
  • 텍스트 입력 요소의 경우 포커스를 잃으면 이벤트 발생
  • select 나 체크, 라디오 타입 input 의 경우 선택 값 변경 직후 이벤트 발생

• input: 사용자가 값을 수정할 때마다 발생

  • event.preventDefault() 로 기본 동작을 막을 수 ❌

• cut, copy, paste: 각각 값을 잘라내기, 복사하기, 붙여넣기 할 때 발생

  • ClipboardEvent 클래스의 하위 클래스
  • event.preventDefault() 로 기본 동작을 막을 수 있음 (복붙 불가능하게 막기)

submit 이벤트

폼에 정보를 입력하고 제출할 때 submit 이벤트가 발생합니다.
이 이벤트를 사용하여 서버로 폼 전송 전 내용 검증, 취소 등에 사용합니다.

form.submit() 은 자바스크립트에서 폼 전송 기능을 사용하도록 합니다.
동적 폼 생성과 서버 전송에 사용합니다.

submit 하기

폼을 전송하는 방법은 크게 두 가지입니다.

1. input 필드에서 엔터 키 누르기
2. <input type="submit"> 클릭하기

위 행동은 submit 이벤트를 트리거합니다.
1번을 수행하면 2번의 행동이 수행되므로...(1번을 하면 <input type="submit"> 에 클릭 이벤트 발생)

이벤트 핸들러에서 검증 후 에러가 있다면 event.preventDefault() 를 호출하여 폼이 서버에 전송되지 않도록 할 수 있습니다.

form.submit()

form.submit() 을 호출하면 자바스크립트에서 직접 폼이 서버로 전송되고,
submit 이벤트는 발생하지 않습니다.

submit 이벤트는 서버로 폼 전송 전 검증에 사용하는데,
form.submit() 의 호출은 이미 검증이 끝났음을 가정하기 때문입니다.