Form Event란 입력란에 커저가 들어가거나(focus) 빠져 나가거나(blur), 또는 단추를 눌러서 입력한 데이터를 전송(submit)하거나 할 때 생기는 동작을 이용하여 필요한 기능을 JavaScript로 실행하게 만드는 것을 말 합니다. 간단한 예를 들면 아래의 왼쪽 입력한 처럼 "검색어를 입력해 주세요." 라는 안내 문구를 넣는 것 까지는 좋은데 마우스로 커저를 입력란에 집어 넣었을 때 검색어를 입력하기 위해서 "검색어를 입력해 주세요." 라는 문장을 지워야 된다는 거져. 하지만 오른쪽 입력란은 커저가 들어가면 문장 전체가 선택되기 때문에 지울 필요 없이 바로 검색어를 입력할 수 있다는 겁니다. 바로 이런 Control에 Form Event를 사용하게 됩니다.
다음은 Form Event의 종류 입니다.
Form Event
onFocus
입력란에 커저가 들어 가는 순간 또는 마우스 커저로 브라우저 창(body)을 클릭하여 커저가 들어 가는 순간
onBlur
입력란에 커저가 빠져 나오는 순간 또는 마우스 커저가 브라우저 창(body)을 빠져 나가는 순간
onSubmit
submit Button을 눌러서 입력 테이터를 전송하는 순간
onReset
Reset button을 눌러서 입력 양식을 초기화하는 순간
onChange
Drop down box 목록 중에 하나를 선택하는 순간
Form Method
focus()
지정하는 곳에 커저 넣기
select()
지정하는 문자열을 선택
submit()
입력 데이터 전송
reset()
입력 데이터 초기화
onfucus & onblur
onfocus는 input, textarea 등의 입력란에 커저가 들어 가는 순간을 뜻하고, onblur는 입력란에 들어 갔던 커저가 입력란에서 빠져 나오는 순간을 말합니다. 아래의 입력란에 커저를 넣었다가 빼 보세요.
Source code
<input type="text" name="focusing" value="여기에 커저를 넣어 보세요." size="60" onfocus="this.value='focus가 생겼습니다. 이번엔 입력란 밖을 클릭하세요.';" onblur="this.value='focus를 잃었습니다. 이 입력란은 blur 상태가 되었습니다.';alert(this.value);this.value='여기에 커저를 넣어 보세요.';" />
select() Method
select Method는 입력란에 있는 문자열을 선택하게 해 주는 Method로서 위의 예 처럼 입력란에 커저가 들어가는 순간(onfocus) 문자열 전체가 선택됩니다. 또 focus를 읽으면(onblur) 'blur 상태가 되었습니다.' 라는 경고창을 띄우게 됩니다.
Source code
<input type="text" name="selecting" size="60" onfocus="this.select()" onblur="alert('blur 상태가 되었습니다.');" value="커저를 넣어서 focus가 생기면 전체가 선택 됩니다." />
focus() Method
focus() Method 는 scripting으로 지정하는 입력란에 커저를 위치 시키는 Method 입니다.
Source code
<input type="text" name="focus_in" size="60" value="오른 쪽 버튼을 클릭하세요." /> <input type="button" value="입력란에 focus 주기" onclick="focus_in.focus()" />
onChange Event
onchange Event는 select - option 으로 만든 Drop down box 목록 중에서 하나를 선택할 때 발생하는 Event 로서 selectdIndex 라는 Method 로 value 값을 선택합니다. selectedIndex란 Drop down List 중에 선택(selected)된 항목(Index) 라는 뜻이 되겠습니다. 입력
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function msg_box(){
txt = document.form.box.options[document.form.box.selectedIndex].value
alert(txt)
}
// -->
</script>
</head>
<body>
<form name="form">
<select name="box" onchange="msg_box()">
<option>아래의 항목중에 하나를 선택하세요.</option>
<option value="첫 번째 항목입니다.">Item 1</option>
<option value="두 번째 항목입니다.">Item 2</option>
<option value="세 번째 항목입니다.">Item 3</option>
</select>
</form>
</body>
</html>
disabled Attribute
앞의 Input Element에서 예제로 보여줬던 '항복', '저항' button의 source code 입니다. scripting 방법은 Value & Length 페이지에서 설명한 대로 상위 Tag의 name 속성 부터 하위 Tag의 name 속성 및 value를 차례로 점(.)으로 연결 시키면 되겠습니다. 아래의 Source code에서 보는 바와 같이 enabled 속성의 경우와 같이 값이 따로 있지 않고 참(true) 인지, 거짓(false) 인지를 결정하는 Boolean 의 경우 true 또는 false 로 여부를 결정하면 되겠습니다. 입력
