자바스크립트 Form 객체의 태그와 속성, 메소드

자바스크립트 javascript Form 객체의 태그와 속성과 메소드

1. Form 태그

HTML 문서에는 Form 태그를 이용해서 입력 양식을 나타낼 수 있다. Form 태그의 속성은 다음과 같다.

속성	내용
action	입력하고자 하는 서버 컴퓨터의 CGI 프로그램에 해당하는 URL을 지정할 때 사용한다.
enctype	서버 컴퓨터의 CGI에 보낼 데이터의 타입을 지정한다.
method	데이터를 어떤 프로토콜로 보낼지 지정한다. 예를 들면 http, ftp 등이 그것이다.
name	입력 양식의 이름을 나타내는 것으로 어떠한 양식을 사용하는지에 대해 지정한다.
target	클라이언트 측에서 입력한 데이터를 서버로 전송하고, 또 다른 윈도우에서 볼 때 사용한다.

Form 태그의 이벤트 핸들러는 다음과 같다.

이벤트 핸들러	내용
onSubmit	클라이언트 측의 사용자가 입력 양식 데이터를 서버로 전송하고자 할 때 사용하는 이벤트 핸들러이다.
onReset	Reset 버튼을 클릭했을 때 발생하는 이벤트 핸들러로 입력 양식을 초기화한다.

2. Form 객체의 속성

Form 객체는 document 객체의 하위계층이다. Form 객체에 접근하기 위한 방법에는 두 가지가 있다. Form 태그를 이용해서 name 속성에 지정하는 방법이 있고, 또 다른 방법에는 document.forms[0], document.forms[1] 등과 같이 사용하는 방법이 있다.

form 객체의 속성에 대해서 예제를 통해 살펴보도록 하자.

예제 바로가기 -> http://usefull.tistory.com/734

* element 속성 -

모든 입력 양식에 대한 객체 정보들을 배열의 형태로 포함하고 있다. 예를 들면 element의 form.element[0]을 체크 박스, form.element[1]을 옵션 버튼이라고 지정해줄 수 있다. 단, 여기서 배열의 초기값은 "0" 부터 시작한다.

이와 같이 element의 배열을 이용함으로써 입력 양식에 대한 모든 정보를 접근할 수 있다. 만약 한 번 배열을 이용해서 입력 양식을 가리켰다면 다음에 순서를 변경할 때 무리가 따르게 된다.

3. Form 객체의 메소드

submit() 메소드의 뜻 바로가기 -> http://usefull.tistory.com/734

* reset() 메소드 -

reset() 메소드는 입력한 데이터가 잘못되었거나 처음부터 다시 입력하고자 할 때 사용되는 메소드로 리셋 버튼을 클릭한 것과 같은 효과를 준다. reset() 메소드를 사용하면 입력 양식을 초기화한다. 사용자가 입력한 데이터를 하나하나 지우는 것을 좀더 편리하게 만들어준 메소드이다. 좀더 사용자를 위한 배려라고 할 수 있다. 만약 이러한 사소한 것들을 처리해주지 않으면 사용자는 다음에는 찾지 않게 될 수 있다.

또한, 데이터를 입력한 후에 확인 버튼을 클릭해서 입력을 완료하고자 할 때 화면의 입력 창을 깨끗하게 만들어주면 다음 사람이 또 다시 입력하고자 할 때 편리할 것이다.

예를 들면 홈페이지 등록할 때 입력해야 하는 양식이 많다. 이 모든 것을 초기화 해주지 않는다면 다음에 홈페이지를 등록할 때 불편할 뿐만 아니라 이전에 등록했던 사용자의 정보를 보게 된다. 그러면 개인 정보가 유출되는 것이다. 이것 뿐 아니라 많은 불편함이 따를 것이다.