제목에서 처럼 초급용 입니다.

이미 아는 내용이라고 태클 거신다면 할말 없지만 그래도 초급용입니다 -_-;



통상 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을 시키겠다는 뜻입니다.

다소 귀찮고 힘들지 몰라도 개발자가 생각을 많이 하면 사용자는 더욱 편해진다는

간단한 이치 잊어버리지 맙시다 ^^

위 예제를 통해 도움이 되었다면 좋겠습니다.

감사합니다.
[이 게시물은 PHPSCHOOL님에 의해 2006-06-01 15:59:28 팁앤테크에서 복사 됨]


출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=teach&wr_id=1587&page=2