<form>태그의 데이터 전송

 

1. submit

• <form>태그 내에 있을 때만 작동한다.
• 폼 핸들러(form-handler)로  <form> 태그내의 데이터를 전송하는 역할을 한다.
• 폼 핸들러 : 입력받은 데이터를 처리하는 페이지 : <form>태그의 action 속성 에 폼핸들러의 주소를 지정한다.
• 클라이언트가 입력한 <form>태그내의 데이터를 전송방식(method)에 따라 action속성에 지정한 위치로 전송한다.
• submit은 입력된데이터가 없거나 잘못입력되었어도 submit을 누르면 폼핸들러로 전송된다.

 

2. onsubmit 

 

※ <form> 태그에 onsubmit 속성을 사용하면 submit 이벤트가 실행되기전에 어떠한 동작이나 기능을

 실행할 수 있다.

★ onsubmit 속성에  메시지창을 띄우는 기능을 갖는 test()함수를 호출하도록 해서 폼데이터가 전송되기전에

    메시지창이 뜨고 확인을 누르면 전송이 된다.

---

 

3. onsubmit 속성에 return을 사용하여 submit 실행 여부를 정할 수 있다.

 

★ onsubmit 속성에 return test()를 호출하도록 하여 함수의 결과값을 boolean타입으로 받아 실행여부를 결정할 수 있다. (값이 true면 전송,  false면 전송을 하지않는다.)

 

★ 위 이미지처럼 조건문을 통해 폼데이터가 제대로 입력되지않았을 때나 중복된 데이터 있을 때  false를 주어 전송되지 않도록 작성한다.

---

 

4. <input type="button"> 으로  submit 실행하기.

 

1. <form>태그에 id 값을 지정해 준다
2. onclick 속성 사용을 위해 input 타입을 button 으로 한다.
3. onclick 이벤트 발생 시 실행되는 함수를 생성한다.
4. 조건문 으로 유효성 체크 후  <form>태그의 id 속성에  submit() 함수를 사용해서 폼핸들러로 폼데이터를 전송한다.

( ※ onclick 속성은 <input type ="submit"> 일때도 실행은 되지만 <form>태그안의 내용이 전송되지는 않는다.