form의 action 과 onSubmit의 차이

miin·2022년 2월 13일
0

HTML / CSS

목록 보기
21/28
post-thumbnail

action

'form 데이터를 처리할 프로그램의 URI를 지정한다.'

URI는 하나의 리소스를 가리키는 문자열이다.
따라서 action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면,
브라우저의 루트가 해당 웹문서로 이동하는 것을 확인할 수 있다.
또는 action에 서버사이드 언어인 php라던지 jsp로 작성한 문서를 지정하여 데이터를 처리하도록 하는 것도 가능하다.

onSubmit

'양식 제출 이벤트가 발생할 때의 동작을 지정한다.'

form 태그 내부에서 <input type='submit'>로 인해 발생하는 이벤트를 처리할 수 있다.
이벤트 발생과 action에 지정된 URL이 적용되는 그 사이의 시점에 처리할 동작을 이 onSubmit 속성을 통해 지정할 수 있는 것이다.
일반적으로 자바스크립트 함수를 지정하여 처리하는 경우가 많다.
연결된 함수에서 true를 반환하면 form이 전송되고, false를 반환한다면 form이 전송되지 않음.
false가 반환되면 이벤트 처리를 그대로 강제 종료 시키기 때문에 action이 처리되는 일은 일어나지 않는다.

submit이 되지 않도록 막아두는 방법으로는 onSubmit='return false' 이다.

action과 onSubmit 사용 예

<form action='#' onSubmit='return test()'>
  <input type='submit' value='submit'/>
</form>

form 안에 있는 input을 클릭하면,
action이 처리되기에 앞서 submit 이벤트에 대한 처리가 시작된다.
submit 이벤트 발생에 대하여 test() 함수가 동작한다.(처리를 반환한다)

onSubmit이 처리되면 그다음 action이 역할을 하게 된다.
action에는 '#'이 지정되어 있어 별 다른 의미가 없지만 지정을 한거라 #로의 이동이 일어는난다.

0개의 댓글