11장. 입력양식 객체
form 객체
폼(Forms)은 어떠한 정보를 서버측으로 보내거나, 또는 메일계정으로 보낼 때 흔히 사용된다. 그렇지만 사용자가 과연 폼에다가 형식에 맞게 제대로 입력을 했는지는 어떻게 알 수 있을까? 자바스크립트를 이용하면 이렇게 폼에 입력된 정보를 보내기 전에 폼입력을 쉽게 체크해 볼 수 있다.
사용 형식 :
<form [name="form_name"] [target="target_window"] [action="cgi_url"] [method=get | post] [enctype="MIME_type"] [onSubmit="event_handler"]>
</form>
속 성
설 명
name
입력 양식의 이름. 자바스크립트에서 입력 양식을 지정할 때 사용
target
입력 양식의 데이터를 서버로 보낸후 다른 윈도우에서 보고 싶은 경우에 지정
action
사용자가 입력할 데이터를 처러할 CGI 프로그램의 URL 지정
method
데이터를 어떠한 HTTP 프로토콜로 보낼 것인지 지정
enctype
CGI 프로그램에 보내질 데이터 타입 지정
onSubmit
입력 양식의 데이터를 서버로 보낼때 실행되는 이벤트 핸들러
onReset
입력 양식의 Reset 버튼을 눌렀을 때
focus()와 select() 메소드
text 객체, textarea 객체, password 객체에 존재하는 메소드
버튼을 누르면 텍스트 입력란에 커서가 옮겨감과 동시에 문자열이 선택되는 것을 볼 수 있을 것이다.
<head>
<script language="javascript">
function sel_focus() {
document.forms[0].T2.focus()
document.forms[0].T2.select()
}
</script> </head>
<body onload="sel_focus()" >
<form >
<p>name : <input type="text" name="T1" size="20" value="name" ></p>
<p>age : <input type="text" name="T2" size="20" value="age"></p>
</form> </body> </html>
텍스트 영역 - text 객체
속 성 설 명
type
text
name
텍스트 입력 양식의 이름 지정. 자바스크립트에서 지정할때 사용
value
텍스트 입력 양식에 미리 입력하고 싶은 문자열 지정
size
텍스트 입력 양식의 가로길이를 지정(디폴트 : 20)
maxlength
사용자가 최대로 입력할 수 있는 글자수
onChange
텍스트 입력 양식의 값을 바꾸었을 때 발생하는 이벤트 지정
onFocus
마우스나 탭을 이용하여 커서가 입력필드 안에 들어갔을 때
onBlur
마우스나 탭을 이용하여 커서가 입력필드에서 나갔을 때
onSelect
마우스를 이용하여 입력필드를 클릭하거나 끌어서 선택했을 때
defaultValue
value 값으로 복원
1. 영문소문자로 입력후 input2로 커서를 옮기면 소문자가 대문자로 변경된다.
2. reset 버튼을 누르면 value 값으로 복원된다.
<html>
<head>
<script language=javascript>
function makeUpper(field) {
var str=field.value
field.value=str.toUpperCase()
}
function resetValue(form){
form.input1.value=form.input1.defaultValue
form.input2.value=form.input2.defaultValue
}
</script>
</head>
<body>
<form name=form>
Input 1: <input type=text name=input1 value="test1" onChange="makeUpper(this)">
Input 2: <input type=text name=input2 value="text2" onChange="makeUpper(this)">
<input type=button value="Reset" onClick="resetValue(this.form)">
< body>
< html>
Comments List