[JavaScript] <form>태그로 서버에 데이터 전송하기

<form> 태그는 'action' 속성을 사용해 서버로 데이터를 전송할 수 있다.

 

💡 'action'만 사용

<form class="form-horizontal" id="userForm" method="POST" action="{% url 'user_add' %}">
    <!-- 폼 요소들 -->
    <button type="submit">제출</button>
</form>

form을 제출하면 바라우저가 'action' 속성에 지정된 URL로 POST 요청을 보낸다.

서버는 지정된 URL에 따라 요청을 처리한다.

 

'onsubmit'속성을 사용해 form의 제출 동작을 JavaScript를 통해 커스터마이징할 수 있어,

필요한 경우 데이터 유효성 검사 등을 추가할 수 있다.

 

그러나 서버로 데이터를 전송하기 위해서는 'action'속성을 정의해야만 한다.

'onsubmit'속성만 사용하여 폼을 제출하더라도 데이터는 전송되지 않는다.

 

💡 'action'과 'onsubmit' 사용

<form class="form-horizontal" id="userForm" method="POST" action="{% url 'user_add' %}" onsubmit="return userAddCheck(event);">
    <!-- 폼 요소들 -->
    <button type="submit">제출</button>
</form>

form을 제출하면 브라우저가 먼저 'onsubmit' 속성에 지정된 JavaScript함수를 호출한다.

JavaScript함수가 false를 반환하면 form 제출이 취소되어 데이터가 서버로 보내지지 않는다.

true를 반환하면 브라우저는 기본 form 제출 동작을 따라가며,

action 속성에 지정된 URL로 POST요청이 보내지고 서버가 요청을 처리한다.