브라우저 내장객체-button, submit(image), reset > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

button, submit(image), reset, .................................................

버튼 ! 흔히 보는 자주 보는 버튼이지만 기능은 다 다르다. 자바스크립트로 접근하는 방법도 약간씩 다르다.


■ HTML(생긴건 비슷해도 기능은 다르므로 조심해야...)
<input type="button" name="button1" value="버튼">       
<input type="submit" name="button2" value="전송버튼">       
<input type="image" name="button3" src="123.gif">       
<input type="reset" name="button4" value="초기화">
       
button  : 아무 기능을 내장하고 있지 않은 것으로 onclick 이벤트핸들러와 자바스크립트로 기능을 줘야한다.

submit : 전송기능을 내장하고 있는 것으로 자바스크립트의 submit() 기능을 내장하고 있으므로 따로 submit()을 설정하면 두번 전송이 된다.

image : 위의 전송버튼과 같이 전송기능을 내장하고 있으므로 주의를 !!!

reset : 누르는 순간 입력상자의 모든 값을 초기상태로 만들어 준다.


■ 객체 속성
name        위의 name 속성
value        위의 vaule 속성
type        위의 type 속성


■ select 객체 이벤트핸들러
onClick        버튼을 누른 순간 발생



1. input button 이용하기

1-1. 버튼이 여러개일때 누른버튼 구분하기 (매개변수이용)
<script language="JavaScript" type="text/javascript">
<!--
function Check(i) {
  if(i=='1'){
    alert("1번 버튼 오케이!")
    return
  }
  if(i=='2') {
    alert("2번 버튼 오케이!")
    return
  }
  if(i=='3'){
    alert("3번 버튼 오케이!")
    return
  }
  if(i=='4') {
    alert("4번 버튼 오케이!")
    return
  }
}
//-->
</script>
<form name="form1" action="ok.html" method="post">
  <input type="button" name="button1" value="버튼1" onClick="Check('1')">
  <input type="button" name="button1" value="버튼2" onClick="Check('2')">
  <input type="button" name="button1" value="버튼3" onClick="Check('3')">
  <input type="button" name="button1" value="버튼4" onClick="Check('4')">
</form>


1-2. 버튼에 직접 링크 연결하기
<style>
.button1 { padding:10px; width:45%; background-color:#F30; color:#fff; font-size:1.3em; font-weight:bold; border:0px; }
.button2 { padding:10px; width:45%; background-color:#333; font-size:1.3em; font-weight:bold; color:#fff; border:0px; }
</style>

<!-- 현재창으로 열기 -->
<input type="button" value="버튼이름" class="button1" onClick="location.href='http://google.com'">

<!-- 새창으로 열기 -->
<input type="button" value="버튼이름" class="button2" onClick="window.open('http://google.com')">


2. submit (image) 버튼 사용시 이벤트 핸들러
<script>
function Check() {
  alert("1번 버튼 오케이!")
  return false // 주의 !!! form 태그에 이벤트핸들러 return 함수(), return false
}
</script>
<form name="form1" action="ok.html" method="post" onSubmit="return Check()">
  <input type="submit" value="버튼1">
  <input type="image" src="123.gif">
</form> * 이미지버튼은 전송버튼과 자바스크립트 구문이 동일하다.


3. <IMG> 태그를 버튼으로 사용 #1 (2010-09-07 추가)
<script>
function Check() {
  alert("사전등록이 마감되었습니다.\n현장등록이 가능하므로\n현장에서 등록해 주시기 바랍니다.\n\n장소 : 섬유센터 3층 이벤트홀\n일시 : 9월 8일 12:30 ~")
  return false // 주의 !!! form 태그에 이벤트핸들러 return 함수(), return false
}
</script>
<a href="#" onclick="return Check()"> <img src="123.gif" border="0"></a>


4. <IMG> 태그를 버튼으로 사용 #2
<script>
function Check(i){
  if(i=='1') {
    alert("1번 버튼 오케이!")
    return
  }
  if(i=='2') {
    alert("2번 버튼 오케이!")
    return
  }
}
</script>
<form name="form1" action="ok.html" method="post">
  <a href="javascript:Check('1')"> <img src="123.gif" border="0"></a>
  <a href="javascript:Check('2')"> <img src="123.gif" border="0"></a>
</form>

* 일반 이미지에 버튼기능을 부여하는 것은 button 사용법과 자바스크립트 구문은 동일하다.


5. button 과 image를 background 로 처리
KCP 전자결제 페이지 만드는 과정에서 button 으로 처리에 대응하기 위해서
<input type="button" onclick="jsf__pay(this.form);" style="background:url(./btn.gif); width:138px; height:38px; border:0;" />




관련자료
http://blog.naver.com/kmj2640715?Redirect=Log&logNo=100001152337
http://pikabu.tistory.com/49