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|작성자 붉은매