form태그 - 버튼 관련 태그

[button버튼]

<input type=”button”>

자바스크립트 명령어를 실행하기 위해 지원되는 버튼이며 보통 “onclick”이벤트 핸들러를 이용하여 연결한다. 아래 코드를 추가한다.

 

 

실행한 후 “자바스크립트 호출”버튼을 누르면 다음과 같이 경고창이 나타난다.

 

 

[reset버튼]

<input type=”reset”>

전송을 취소하기 위해 화면에 입력한 내용을 clear시킨다.

 

데이터를 입력하고 “취소”버튼을 누르면 화면에 입력한 모든 내용이 clear된다.

 

 

 

[submit버튼]

<input type=”submit”>

양식태그를 이용해서 입력하거나 선택한 모든 값과 name을 함께 서버에 전송한다. 단, 서버로 전송하기 위해 <form>태그를 반드시 정의해야 하며 <form>태그의 속성을 적절하게 정의해야 한다.

<form>태그의 속성은 다음과 같다.

 

 

위와 같이 속성을 정의한 후 데이터를 입력하고 “submit”버튼을 누르면 <form>과 </form>사이에 입력한 모든 데이터가 “name=value”의 형식으로 action에 정의된 application을 호출하며 전송된다. 다음과 같이 코드를 수정한다.

 

 

실행한 후 데이터를 입력하고 “submit”버튼을 눌러보자.

 

 

화면이 반짝 거리며 아래와 같은 화면이 응답된다. 앞으로 자주 보게 될 화면이다. <form>태그 “action”속성에 정의한 application이 존재하지 않으므로 HTTP프로토콜이 404의 응답 코드를 전송해준 것이다. 주소표시줄을 보면 데이터가  “name=value”의 형태로 전송되고 있는 것을 확인할 수 있다.