본문 바로가기
Language(언어)/JavaScript

자바스크립트(JavaScript) Button객체, submit객체

by 대학교닷컴 2013. 12. 9.


Button객체, submit객체

 

Button객체는 주로 명령을 수행할 때 사용하는 객체로 onclick이벤트가 발생할 떄 사용한다.

자바스크립트에서 사용할 수 있는 버튼의 종류는 일반버튼 , 이미지버튼 , 전송버튼 , 최소버튼

으로 이루어진다.

일반 버튼은 버튼 입력 양식을 자바스크립트로 접근하기 위하여 만들어진 것으로 button객체를

가리키고있는 form 객체와 함께 사용된다.

 

전송 버튼은 일반 버튼과 같은 모양을 하고 있지만 사용자가 입력한 정보를 웹 서버로 전달한다.

form태그의 action속성에서 지정한 URL로 전송하는 역활을 하는 것과 같다.

 

최소버튼은 전송버튼과 같은 개념이지만 차이점이 있다면 입력한 정보를 웹서버로 전달 하지 않고

입력한 정보를 초기화 한다.

 

Botton 객체


<html>
   <head>
        <script language="javascript">
         function msg(form) {
             send = "[웹 서버로 데이터를 전송할 자료]\n\n"
             send  = send + form.textbox.value 
             alert (send);  }
        </script>
   </head>
   <body>
      <form name="form" method="post"
                  action="http://www.domain.com/text.asp">
      이 름 : <input type="text" name="textbox" size="10"><p>
      <input type="submit" value="웹 서버로 전송하기"
                          onclick="msg(this.form)">
      <input type="button" value="지우기" onclick="form.reset()">
      </form>
  </body>
</html> 


이렇게 버튼은 주로 onclick이벤트와 함계 버튼을 누르면 어떤 동작을 취할 수 있게

만든다.

 

Submit 객체

사용자로 부터 회원가입 , 설문조사 등고 같이 다양한 형태의 입력양식으로 구성된

폼에서 정보를 입력받아 웹서버의 ASP , CGI , PHP 프로그램으로 데이터를 전송

할 떄 사용하는 버튼 형식의 입력양식이다.

 

Submit 객체


<html>
   <head>
        <script language="javascript">
         function msg(form) {
             send = "[웹 서버로 데이터를 전송할 자료]\n\n"
             send  = send + form.textbox.value 
             alert (send);  }
        </script>
   </head>
   <body>
      <form name="form" method="post"
                  action="http://www.domain.com/text.asp">
      이 름 : <input type="text" name="textbox" size="10"><p>
      <input type="submit" value="웹 서버로 전송하기"
                          onclick="msg(this.form)">
      <input type="button" value="지우기" onclick="form.reset()">
      </form>
  </body>
</html> 

[출처] Button객체와 submit객체|작성자 연정이

 

 

댓글