보통 폼값을 넘길 때 submit 버튼과 reset 버튼을 달 경우가 빈번합니다...
이걸 외우고 있지는 않겠지만 하다보면 자연스레 코딩이 진행이 될 듯 하지만, 정확히 해본 적이 드물어서 매번 헷갈려서 정리를 해봅니다.
다음과 같은 간단한 코드가 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>submit & reset 버튼 정리</title>
<SCRIPT LANGUAGE="JavaScript">
//<![CDATA[
function focus() {
document.checkForm.myVar.focus();
}
function check(){
if(document.checkForm.myVar.value==""){
alert("값을 입력하세요") ;
document.checkForm.myVar.focus();
return ;
}
document.checkForm.submit() ;
}
//]]>
</SCRIPT>
</head>
<body onload="focus()">
<form method="post" name="checkForm" action="submit_reset_trans.php">
넘길 값 : <input type="text" name="myVar" size="10" /><br />
<input type="button" value="확인" onclick="check()" /><br />
<input type="reset" value="취소" onclick="checkForm.reset()" />
</form>
</body>
</html>여기서 submit 버튼과 reset 버튼을 예로 설명하겠습니다.
우선 submit 버튼
1. 텍스트로 사용할때
<a href="javascript:check()">확인</a>
<a href="#" onclick="check()">확인</a>
<span onclick="check()" style="cursor:pointer">확인</span>
<a href="#" onclick="check()">확인</a>
<span onclick="check()" style="cursor:pointer">확인</span>
2. 이미지를 사용할때
<img src="ok.gif" onclick="check()" style="cursor:pointer;border:0;">
<a href="javascript:check()"><img src="ok.gif" style="border:0;"></a>
<a href="#" onclick="check()"><img src="ok.gif" style="border:0;"></a>
<span onclick="check()" style="cursor:pointer"><img src="ok.gif" style="border:0;"></span>
<a href="javascript:check()"><img src="ok.gif" style="border:0;"></a>
<a href="#" onclick="check()"><img src="ok.gif" style="border:0;"></a>
<span onclick="check()" style="cursor:pointer"><img src="ok.gif" style="border:0;"></span>
다음으로 reset 버튼...
1. 텍스트를 사용할 때
<a href="javascript:checkForm.reset()">취소</a>
<a href="#" onclick="checkForm.reset()">취소</a>
<span onclick="checkForm.reset()" style="cursor:pointer">취소</span>
<a href="#" onclick="checkForm.reset()">취소</a>
<span onclick="checkForm.reset()" style="cursor:pointer">취소</span>
2. 이미지를 이용할 때
<img src="reset.gif" onclick="checkForm.reset()" style="cursor:pointer;border:0;">
<a href="javascript:checkForm.reset()"><img src="reset.gif" style="border:0;"></a>
<a href="#" onclick="checkForm.reset()"><img src="reset.gif" style="border:0;"></a>
<span onclick="checkForm.reset()" style="cursor:pointer"><img src="reset.gif" style="border:0;"></span>
<a href="javascript:checkForm.reset()"><img src="reset.gif" style="border:0;"></a>
<a href="#" onclick="checkForm.reset()"><img src="reset.gif" style="border:0;"></a>
<span onclick="checkForm.reset()" style="cursor:pointer"><img src="reset.gif" style="border:0;"></span>
(출처:http://deki.kr/blog/tag/reset?TSSESSION=7a983afa6ecc7a0a28a317c32aefc10d)