통상 form의 element에 접근하는 방식은
js를 사용하는 사람들 마다 다소 약간의 차이가 있습니다.
선호하는 코딩 스타일이 다르다는 소리죠
그렇지만 한가지 공통점은 어디서든 돌아가게 만들자~ 는게 목적 아닐까요?
javascript 에서 form 뿐만 아니라 document단의 element에 접근하는 방법은
계층적 접근에 대해서 약간 이해를 해야할 부분이 있습니다.
그럼 아래에 기본적인 형식을 이용해서 설명을 곁들여 보겠습니다.
-------------------------------------- 예제 코드1 --------------------------------------
<html>
<head>
<title>문서제목</title>
</head>
<body>
<form name="wfm">
<input type="text" name="lg" /><br />
<input type="password" name="lp" /><br />
<input type="checkbox" name="auto" /><br />
<input type="submit" value="전송" />
</form>
</body>
</html>
------------------------------------------------------------------------------------------------
위와 같은 form이 있다고 가정 하겠습니다.
스크립트를 통해서 문서내의 특정 tag에 접근하는 규칙은 . 을 기준으로
계층적 구조로 접근하는 형식을 쓰는 것입니다.
쉬운예로
document.forms["wfm"].elements["lg"];
문서 . 폼 . 객체
이해가 되시나요?
물론 폼을 거치지 않고 바로 접근하는 방법도 있습니다.
document.getElementById("id");
document.getElementsByName("name");
문서 . 아이디 | 네임 객체지정;
이런 형식이 대표적인 예라고 보시면 됩니다.
get은 가져오다 라는 의미로 해석을 하시면 이해가 빠를것이라 생각됩니다.
엘리먼트의 아이디나 네임을 지정해서 해당객체를 지정하는 것입니다.
그럼 이런 형식의 접근을 이용한 실질적인 방법을 만들어 보겠습니다.
-------------------------------------- 예제 코드2 --------------------------------------
<html>
<head>
<title>문서제목</title>
</head>
<script language="javascript">
function fm(){
var obj = document.getElementById("sp");//span tag의 id를 이용한 접근
var frm = document.forms["wfm"];//폼까지의 접근자를 지정
for ( i=0; i < frm.length; i++){
// form elements는 form의 배열형식으로도 접근 가능합니다.
tc = "=\n\n"
tc += "element type : " + frm[i].type + "\n\n"; //tc 변수에 문자열지정
tc += "element name : " + frm[i].name + "\n\n";
tc += "element value : " + frm[i].value + "\n\n";
obj.innerText += tc;//지정된 id의 연결정보를 담고있는 obj변수에
//innerText 를 이용하여 span tag영역안에 문자를 넣어라는 표현입니다.
}
return false;
}
</script>
<body>
<form name="wfm" onsubmit="return fm();">
<input type="text" name="lg" /><br />
<input type="password" name="lp" /><br />
<input type="checkbox" name="auto" value="1" /><br />
<input type="submit" value="전송" />
</form>
<span id="sp"></span>
</body>
</html>
------------------------------------------------------------------------------------------------
실행된 결과물을 보시면
element type : text
element name : lg
element value :
element type : password
element name : lp
element value :
element type : checkbox
element name : auto
element value : 1
element type : submit
element name :
element value : 전송
이런 값이 출력됩니다.
단편적인 예를 들어 설명을 하였지만 javascript를 이용하여
window, document 등에 접근하는 형식 대동소이합니다.
forms[""], elements[""] 이런 내용은 하나의 형식입니다.
elements["string"] 이런 표현식은 form의 객체에 접근하는 경우에만
사용가능 합니다.
예제코드2에 사용된 onsubmit 이벤트핸들러에 대해서 말씀드리면
많은 초보자들이 <input type="button" value="전송" onclick="함수명()" />
이런식으로 사용하여 폼유효성 체크를 하고 js에서 form.submit();를 이용하여
form을 전송하는 것을 많이 보았습니다.
하지만 스쿨 팁텍에도 언젠가 올라온 내용이 있는데요
이런경우 form의 input field에서 enter를 입력하면 form이 submit 되는 현상을
보게 됩니다.
위 input field 예는 버튼을 클릭을 해야만 함수를 호출하게 되어 있습니다.
반면 onsubmit 이벤트 핸들러는 form이 submit 되는것을 인식합니다.
onsubmit = "return 함수명();"
이런식으로 사용하여 함수내에서 form의 입력된 정보에 유효성 검사를 하여
맞지 않을 경우 false를 return 하는 형식을 취해주면 form이 전송되는 것도
막을 수 있습니다. = "return <- 이문장은 함수로 부터 되돌아 오는
값이 false가 아니면 submit을 시키겠다는 뜻입니다.
