<input>태그의 type 속성 중 "image" 속성값은 기본적으로 서밋(submit) 기능을 가지고 있다. 타입 속성을 "image"로 만들면 서밋이 일어나기 때문에 입력폼에서 버튼을 "image"속성을 주어 사용할 경우 주의가 필요합니다.
<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=EUC-KR">
<script type="text/javascript">
<!--
function submit(form) {
if( !form1.field1.value ) {
alert("입력필드1을 확인하세요");
form1.field1.focus();
return false;
}
if( !form1.field2.value ) {
alert("입력필드2을 확인하세요");
form1.field2.focus();
return false;
}
}
// 이 함수를 수정하면서 image 타입의 submit 속성을 알아본다.
// form1.field1.value 값 일 경우 submit
// form1.field1.value을 form1.field2.value로 수정하면 submit 되지 않음
function check() {
if( !form1.field1.value ) {
alert("입력필드을 확인하세요");
form1.field2.focus();
return false;
}
}
-->
</script>
<title>Insert title here</title>
</head>
<body>
<form name="form1" action="test1.jsp" onSubmit="return submit(this);">
<input type="text" name="field1" />
<input name="button1" type="image" onclick="return check();" value="체크1" src="btn_ok.gif"><p />
<input type="text" name="field2" />
<input name="button2" type="image" value="체크2" src="btn_ok.gif">
</form>
</body>
</html>
check()함수로 입력폼 전부를 체크한다면 서밋(submit)이 일어나지 않지만 하나의 입력폼만 체크한다면 그 입력폼에 값이 있는 순간 서밋(submit)이 일어납니다. 따라서 타입속성에 "image"값을 사용할 때는 주의를 기울려야 합니다.
'HTML& CSS > HTML' 카테고리의 다른 글
| 웹 접근성 - 웹 접근성(Web Accessiblility) (0) | 2009.12.01 |
|---|---|
| 고급 - 입력 필드와 라벨(<label>) 연결하기 (0) | 2009.08.03 |
| 고급 - head 엘레멘트들 (0) | 2009.08.03 |
| 레이아웃 - <div>태그와 <span>태그 사용 (0) | 2009.07.05 |
| 입력필드의 드랍다운 리스트를 출력하는 <select>태그 (0) | 2009.07.01 |