LAPM 개발자 정보공유

igniter.egloos.com

포토로그



form object 접근과 제어 javaScript

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

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



통상 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" omsubmit="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="전송" omclick="함수명()" /> 

이런식으로 사용하여 폼유효성 체크를 하고 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.com 눈팅님의 글]

null

덧글

댓글 입력 영역
◀ 다음덧글    이전덧글 ▶