반응형


Button 객체
버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Button 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Button 객체의 특성
특성 의미
name  버튼 입력양식의 이름 
value  버튼 입력양식에 입력한 값 
type  type택에 입력된값(button) 

 

Button 객체의 메소드
메소드 의미
click()  버튼을 클릭시키는 메소드 

 

Button 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  버튼을 클릭하는 순간 실행되는 이벤트 핸들러 
onMouseDown  마우스 버튼을 눌렀을때 실행되는 이벤트 핸들러 
onMouseUp  마우스 버튼을 놓았을때 실행되는 이벤트 핸들러 

 

Submit 객체
데이터 보내기 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Submit 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Submit 객체의 특성
특성 의미
name  데이터 보내기 버튼 입력양식의 이름 
value  데이터 보내기 버튼 입력 양식에 입력한 값 
type  type에 입력된 값(submit) 

 

Submit 객체의 메소드
메소드 의미
click()  데이터 보내기 버튼을 클릭시키는 메소드 

 

Submit 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  데이터 보내기 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

 

Reset 객체
리셋 버튼 입력양식을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Reset 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Reset 객체의 특성
특성 의미
name  리셋 버튼 입력양식의 이름 
value  리셋 버튼 입력양식에 입력한 값 
type  type에 입력된 값(reset) 

 

Reset 객체의 메소드
메소드 의미
click()  리셋 버튼을 클릭시키는 메소드 

 

Reset 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  리셋 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 

 

Checkbox 객체
체크박스를 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Checkbox 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Checkbox 객체의 특성
특성 의미
name  체크박스의 이름 
value  체크박스에 할당할 값 
type  type에 입력된 값(checkbox) 
checked  체크박스가 체크 되었는지의 여부 
defaultChecked  체크박스가 처음 체크 되었는지의 여부 

 

Checkbox 객체의 메소드
메소드 의미
click()  체크박스를 클릭시키는 메소드 

 

Checkbox 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  체크박스를 클릭하는 순간에 실행되는 이벤트 핸들러 

 

Radio 객체
라디오 버튼을 자바스크립트로 접근하기 위한 객체로 form객체의 하위객체이다.
그렇기 때문에 Radio 객체에 접근하기 위해서는 form객체를 지정해 주어야 한다


Radio 객체의 특성
특성 의미
name  라디오 버튼의 이름 
value  라디오 버튼에 할당할 값 
type  type에 입력된 값(radio) 
checked  라디오 버튼이 체크 되었는지의 여부 
defaultChecked  라디오 버튼이 처음 체크 되었는지의 여부 
length  그룹안에 포함되어 있는 라디오 버튼의 수 

 

Radio 객체의 메소드
메소드 의미
click()  라디오 버튼을 클릭시키는 메소드 

 

Radio 객체의 이벤트 핸들러
이벤트 핸들러 의미
onClick  라디오 버튼을 클릭하는 순간에 실행되는 이벤트 핸들러 


예제1 실행화면
<script language="javascript">
function sel(mirage) {
ans = mirage.value
alert(ans + "를 선택했습니다")
}
</script>
선택하세요
<form name=form5 action="">
<input type="radio" name="color1" value="사과" onClick="sel(this)">사과
<input type="radio" name="color1" value="배" onClick="sel(this)">배
<input type="radio" name="color1" value="앵두" onClick="sel(this)">앵두
</form>
 선택하세요
<FORM name="form5" action=""><INPUT onclick="sel(this)" type="radio" value="사과" name="color1">사과
<INPUT onclick="sel(this)" type="radio" value="배" name="color1">배
<INPUT onclick="sel(this)" type="radio" value="앵두" name="color1">앵두
</FORM>

 

[출처] [15]입력양식2|작성자 붉은매

+ Recent posts