폼 태그의 기능

1. 폼 태그의 값을 가져오고 변경하는 명령

제이쿼리를 이용하여 폼 태그를 조작하고 한다면 val( ) 명령을 사용

val( )을 사용하면 폼 태그에 입력 ( type이 text / textarea )되어 있거나 선택

(type 속성이 select / radio 태그)되어 있는 값(value 속성값)을 가져오거나 변경할 수 있음

 

value 속성값 가져오기

val( )은 괄호 안에 아무것도 기술항지 않고 사용하면 폼 태그에 입력되어 있는 택스트나 선택되어 있는

값을 가져옴

값을 가져오려는 폼 태그를 셀렉터로 지정하고 .(dot)으로 val( ) 명령을 이어 붙이는 방식으로 기술

예를들어, 셀렉터로 input 태그를 지정하면 val( )은 폼 태그의 종류를 결정하는 type 속성에 관게없이

모든 input 태그의 value 속성값을 가져오게 됨

 

value 속성값 변경

폼 태그의 내용을 바꾸고자 할 경우에도 val( ) 명령을 사용할 수 있음

변경의 대상이 되는 태그를 셀렉터로 지정하고 변경하고 싶은 값은 괄호 안에 기술

 

 

2. 폼 태그에 관한 이벤트 처리

제이쿼리에서는 유저가 폼 태그를 조작할 때 발생하는 이벤트를 감지하는 명령이 준비되어 있음

이벤트들과 조합하여 사용하면 유저의 다양한 폼 태그 조작에 대응되는 인터랙티브한 폼 태그를

구현할 수 있음

 

태그가 선택됨을 감지하는 명령 focus( )

브라우저에서 특정 태그를 마우스로 클릭하거나 탭 키를 누르면 태그들이 선택되는 것을 볼 수 있음

이 상태를 포커스 상태라고 함

focus( ) 명령은 input 태그 등의 폼 태그가 마우스나 탭 키에 의해 선택된 상태( 포커스 상태 )가 된 것을

감지하고 미리 설정된 처리를 실행

$(셀렉터).focus(function( ) {        셀렉터로 지정한 태그가 포커스되었을 때 실행하는 처리 });

 

태그에서 포커스가 벗어남을 감지하는 명령 blur( )

blur( )는 focus( )와 반대로 폼 태그에서 포커스가 벗어났을 때(비선택 상태)를 감지하고 명령을 실행

$(셀렉터).blur(function( ) {          셀렉터로 지정한 태그에서 포커스가 벗어났을 경우 실행하는 처리 });

 

** this는 이벤트가 발생될 때 이벤트가 설정된 태그를 가져오는 셀렉터

 

폼 태그의 내용 변경을 감지하는 명령 change( )

폼 태그의 내용(폼 태그의 값)이 변경되는 것을 감지하는 명령

태그의 내용이 변경되었는지 안 되었는지를 판단하는 시점은 해당 폼 태그에서 포커스가 사라질 때 임

$(셀렉터).change(function( ) {       셀렉터로 지정한 태그의 내용이 변경되었을 때 실행하는 처리 });

 

폼 태그의 전송을 감지하는 명령 submit( )

명령은 폼 태그의 전송 버튼이 눌렸을 때 발생하는 이벤트의 처리를 설정

폼 태그의 전송 버튼(type 속성으로 "submit" 또는 "image"를 갖는 input 태그)이 클릭하면 

웹 브라우저는 폼 태그에 입력 / 선택되어 있는 정보를 전송