본문 바로가기

Language/JavaScript(ES6)

[Javascript] Form


Form 은 사용자가 입력한 정보를 서버로 전송하게 해주는 HTML태그 이벤트



1. submit


입력한 값을 제출 하는 이벤트를 가진다.


위의 예시는 입력한 값이 없을 때 제출하게 되면 경고창이 뜨게 하는 코드이다. 



일단


폼 태그의 엘리먼트를 t라는 객체로 확보하고


t에 이벤트 리스너 메소드를 이용한다. ( 폼의 이벤트 리스너 속성)


그리고 첫번째 인자는 폼태그의 속성값중 하나인 submit 

         두번째 인자는 함수를 입력한다.


조건문을 이용하여 value 프로퍼티의 길이가 0인지 확인 하여 처리한다.


event.prventDefault는 이벤트의 작동을 중지시키는것!



2. change


만약 input의 값이 변화했을때 발생하는 메소드


form태그 하위 태그인 input태그 엘리먼트를 변수 t에 저장하고


이벤트 리스너를 발생한다.


첫번째 메소드는 change 두번째는 함수


결과값은 id가 result인 p태그의 innerHTML에 target의 value 프로퍼티를 저장한다.



3.blur focus


blur는 포커스가 사라졌을때


focus는 포커스가 잡혔을 때


실행된다.