[HTML] form 태그의 데이터 전송 방지

form 태그는 웹 페이지에서의 입력 양식을 의미한다. 로그인 창이나 회원가입 폼 등이 이에 해당하는데, 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다.

1. onSubmit

form 태그에서는 onSubmit을 통해 submit을 제한할 수 있다.
그래서 보통 form 전송 직전에 form 태그 안의 데이터 유효성 검사를 위해 사용된다.

• onSubmit="func()" 에서 함수는 반드시 true 또는 false를 반환하도록 만들어야 한다. 그렇지 않으면 어떤 값이 들어오든 action에 지정된 값으로 넘어가기 때문이다.
  여기서 true 를 반환하면 form이 성공적으로 전송되며, false를 반환하면 전송되지 않는다.

• 만약 절대 submit되지 않게 하려면 onSubmit="return false;" 를 입력하면 된다.

• onSubmit은 form 태그 내부에서 <form type="submit"> 으로 인해 발생하는 이벤트를 처리할 수가 있다. 이벤트 발생과 action에 지정된 URL이(form 태그의 action 속성은 form data를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시한다.) 적용되는 그 사이의 시점에 처리할 동작을 onSubmit 속성을 통해 지정할 수 있는 것이다. 일반적으로 자바스크립트 함수를 지정하여 처리하는 경우가 많다.

2. event.preventDefault()

• form 태그로 감싼 input과 button으로 엔터키를 누르거나 버튼을 누르면
  사용자가 입력한 값은 자동으로 submit되며 브라우저는 새로고침된다. 그래서 이제 click 이벤트는 중요하지 않게 되었다.

• form을 submit하면 브라우저는 새로고침하는 것이 디폴트이기 때문에 콘솔에서는 브라우저가 가진 정보가 뜨고나서 아주 빠른 순간 사라진다.
  그래서 이를 막기 위해 preventDefault()함수를 사용한다.

• html에서 a태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나, form 안에 input등을 전송하는 동작이 있는데 e.preventDefault()는 그 동작을 중지시키는 역할을 한다.

• input 또는 button 클릭 이벤트가 발생 했을때 페이지가 리로드가 되는데 그 현상을 막아준다. 그래서 로그인 기능을 구현할 때 form 태그를 사용했다면 e.preventDefault( )를 반드시 작성해줘야 한다.