1. 폼 관련 객체 개요
폼 관련 객체들은 자바스크립트의 new 연산자를 이용하여 생성할 수 없다. 오직 HTML 페이지를 포드할 때 HTML, 태그를 보고
브라우저가 자동으로 생성한다.
폼 문서는 <form>....</form> 태그로서 정의하며 항상 <body> 태그 내에 존재해야 한다.
(표) 폼 관련 객체들의 개요
| 객체 |
설 명 |
| Form |
<form> 태그에 의해 자동 생성 |
| Text |
<input type="text" > 태그에 의해 자동 생성. |
| Textarea |
<textarea>태그에 의해 자동 생성. |
| Password |
<input type="password" > 태그에 의해 자동 생성. |
| FileUpload |
<input type="file" > 태그에 의해 자동 생성. |
| Radio |
<input type="radio" > 태그에 의해 자동 생성. |
| Checkbox |
<input type="checkbox" > 태그에 의해 자동 생성. |
| Button |
<input type="button" > 태그에 의해 자동 생성. |
| Submit |
<input type="submit" > 태그에 의해 자동 생성. |
| Reset |
<input type="reset" > 태그에 의해 자동 생성. |
| Select |
<select> 태그에 의해 자동 생성. |
이 객체들 중 Form 객체를 제외하고 나머지는 모두 form 이라는 프로퍼티를 가진다. 이 프로퍼티는 상위 객체인 Form
객체에 대한 레퍼런스이다.
(예)
<form name="f">
<input type="text" name="t">
<input type="button" name="b" value="OK" onClick="this.form.t.value='버튼이
눌려졌습니다.'">
<form> |
- this는 Button 객체 b자신을 의미함.
- this.form은 객체 b가 속해있는 폼, f를 의미함.
- this.form.t는 Text객체인 t를 의미함. 어떤 객체의 하위객체는 마치 자신의 프로퍼티처럼 접근 가능함.
- this.form.t.value는 Text객체 t의 value 프로퍼티로서 텍스트 창에 출력된 스트링을 의미함.
- this.form.t.value='버튼이 눌려졌습니다.'를 실행한 경과 Text 창에는 "버튼이 눌려졌습니다."가 출력된다.
2. Form 객체
<form> 태그의 속성을 반영하며 폼 데이터 전송 및 리셋을 위한 메소드를 가지는 자바스크립트 객체이다.
폼에 존재하는 모든 폼 요소들에 대한 레퍼런스는 elements 배열에 존재하며 폼 요소의 개수는 length 프로퍼티에 존재한다.
그러므로 이 두 프로퍼티를 이용하여 폼의 모든 요소 객체들을 액세스할 수 있다.
(표) Form의 프로퍼티 및 메소드
| 프로퍼티 |
설 명 |
| action |
ACTION 속성을 반영 |
| elements |
폼 내의 모든 폼 요소 객체들의 배열 |
| encoding |
ENCTYPE 속성을 반영 |
| length |
폼 내의 폼 요소 객체들의 개수로서 elements 배열의 크기를 의미 |
| method |
METHOD 속성을 반영 |
| name |
NAME 속성을 반영 |
| target |
TARGET 속성을 반영 |
| 메소드 |
설 명 |
| handleEvent(Event 객체) |
파라미터로 지정된 이벤트의 이벤트 핸들러를 호출한다. |
| reset |
폼의 reset 버튼이 클릭된 것처럼 행동하는 함수. 폼 내의 객체들의 값을 초기화한다. |
| submit |
폼의 submit 버튼이 클릭된 것처럼 행동하는 함수. 폼 데이터를 서버로 전송한다. 내부적으로
onSubmit 핸들러 호출함. |
<form> 태그의 문법
<form
action = "serverURL"
enctype = "encodingType"
method = "GET" 또는 "POST"
name = "formName"
target = "windowName">
.........
<form> |
- action - 폼의 데이터를 처리할 ASP나 CGI 파일을 지정하는 URL.
- enctype - 폼의 데이터 전송 시 암호화 방법 지정.
- method - 폼의 데이터를 전송하는 방식 지정.
- name - 폼의 이름, 자바스크립트에서 사용.
- target - ASP나 CGI에 의하여 전송되는 데이터를 출력할 윈도우 지정.
가장 흔히 사용되는 속성이 name, action, method이다.
- name은 자바스크립트에서 하나의 객체로 인식할 때 사용하는 변수가 되고,
- action은 서버가 입력된 데이터를 받아서 처리할 프로그램을 지정하는 것이다. 따라서 이 속성이 정의되지 않으면, 아무리 중요한
데이터를 입력 받아도 소용이 없게 된다.
- method는 입력된 데이터를 서버측에 전달하는 방식이다.
Form의 이벤트 핸들러
onReset, onSubmit
3. Text, Password 객체
이 두 객체들은 각각 text와 password 타입의 <input> 태그를 반영하는 객체들로서 한 줄 짜리 텍스트 창이다.
Text, Password의 프로퍼티 및 메소드
| 프로퍼티 |
설 명 |
| defaultValue |
<input> 태그에 주어진 초기 VALUE 속성 값을 반영하며 읽기전용 필드. |
| form |
상위 객체인 Form 객체에 대한 레퍼런스. |
| name |
NAME 속성을 반영. |
| type |
TYPE 속성을 반영. Text 객체의 경우 "text"이며 Password 객체의
경우는 "password" |
| value |
초기 값은 VALUE 속성 값으로 주어지지만 사용자가 입력한 텍스트가 즉시 반영된다. |
| 메소드 |
설 명 |
| blur() |
포커스를 해제한다. |
| focus() |
포커스를 준다. |
| handleEvent(Event 객체) |
파라미터로 지정된 이벤트의 이벤트 핸들러를 호출한다. |
| select() |
입력 창에 존재하는 텍스트를 "선택 상태"로 만든다. |
defaultValue와 value의 차이점
<input type="text" name="id" value="2000523-">
이때 defaultValue와 value는 초기에 "2000523-"의 스트링 값을 가지며, 사용자가 입력창에
"2000523-88888"을 입력하면 defaultValue는 여전히 "2000523-"의 값을 가지지만 value는
"2000523-88888" 스트링 값을 가지게 된다.
Password 객체의 입력 창은 '*' 문자로 출력되지만 내부적인 defaultValue와 value값은 실제 입력된 스트링을 가진다.
Text, Password의 이벤트 핸들러
onBlur, onChange, onFocus, onSelect
4. Textarea 객체
Textarea 객체는 <textarea> 태그의 속성을 반영하는 자바스크립트 객체로서 Text 객체와 매우 유사하다. type의 값이 "textarea"인
점을 제외하면 프로퍼티와 메소드는 Text객체와 동일하다.
Textarea의 이벤트 핸들러
onBlur, onChange, onFocus, onKeyDown, onKeyPress, onKeyUp, onSelect
5. FileUpload 객체
FileUpload 객체는 사용자의 local 컴퓨터 상에 있는 파일을 웹 서버 컴퓨터로 업로드(upload)하기위해 제공된 객체이다.
<form> 태그의 enctype속성은 보통 생략되는데 디폴트 값은 다음과 같다.
| "application/x-www-form-urlencoded" |
enctype 속성은 POST 방식을 사용할 때만 의미를 가진다. 폼이 전송될 때 <form> 태그의 enctype속성에 따라
FileUpload 객체의 전송되는 내용이 달라진다. enctype을 디폴트로 설정하게 되면 FileUpload 객체의 값이 서버로 전달될 때
사용자가 local 컴퓨터에서 선택한 파일 이름만이 전달된다.
FileUpload 객체에서 사용자가 선택한 local 파일의 내용을 웹 서버로 업로드하기 위해서는 enctype 속성을 다음과 같이
지정해야 한다.
FileUpload 객체의 프로퍼티와 메소드는 Text 객체와 동일한 의미를 가진다. FileUpload 객체의 value 프로퍼티는
FileUpload 객체에서 사용자가 선택한 파일의 경로명 정보에 해당한다.
FileUpload의 이벤트 핸들러
onBlur, onChange, onFocus
6. Button, Submit, Reset 객체
이 세 객체들은 모두 버튼의 모양을 가지며, 메소드 중 blur, focus, click 등이 실행되면 내부적으로는 이벤트가 발생한 것 과
같은 효과가 나타난다. 즉 해당하는 이벤트의 핸들러 즉 onBlur, onFocus, onClick이 호출된다. 이 메소드들은 이 메소드를 가진
모든 자바스크립트 객체에 있어 동일한 의미를 가진다.
(표) Button, Submit, Reset의 프로퍼티 및 메소드
| 프로퍼티 |
설 명 |
| form |
상위 객체인 Form 객체에 대한 레퍼런스. |
| name |
NAME 속성을 반영. |
| type |
TYPE 속성을 반영. Text 객체의 경우 "text"이며 Password 객체의
경우는 "password" |
| value |
초기 값은 VALUE 속성 반영. |
| 메소드 |
설 명 |
| blur() |
포커스를 해제한다. |
| focus() |
포커스를 준다. |
| handleEvent(Event 객체) |
파라미터로 지정된 이벤트의 이벤트 핸들러를 호출한다. |
| click() |
버튼에 마우스 클릭된 것처럼 실행된다. |
Button의 이벤트 핸들러
onBlur, onClick, onFocus, onMouseDown, onMouseUp
Submit과 Reset의 이벤트 핸들러
onBlur, onClick, onFocus
7. Radio, Checkbox 객체
Radio와 Checkbox 객체는 각각 radio와 checkbox 타입의 <input> 태그를 반영한 객체들이다. 동일한 그룹 내의
Radio 버튼들은 모두 같은 이름을 가지고 있으므로 자바스크립트 코드에서 각 Radio 버튼 객체에 접근할 수 있는 방법이 필요하다.
# Radio 객체의 경우
<html>
<head></head>
<body>
<form name="korea">
<input type="radio" name="city" value="s">Seoul
<input type="radio" name="city" value="p">Pusan
<input type="radio" name="city" value="c">Chonju
</form>
</body>
</html> |
HTML 소드에는 이름이 city인 3개의 radio 객체가 하나의 그룹으로 존재한다. 이들 각 Radio 객체들은 순서대로 다음과 같은
레퍼런스로 액세스된다.
document.korea.city[0]
document.korea.city[1]
document.korea.city[2] |
이름이 city인 Radio 객체의 개수는 다음과 같이 length 프로퍼티를 이용한다.
| n = document.korea.city.length |
# Checkbox 객체의 경우
각 객체의 이름이 동일할 수 없기 때문에 Radio 객체에서 발생하는 문제들은 발생하지 않는다.
(표) Radio, Checkbox의 프로퍼티 및 메소드
| 프로퍼티 |
설 명 |
| checked |
선택된 상태이면 true, 선택되지 않았으면 false |
| defaultChecked |
초기에 선택된 상태이면 true, 선택되지 않았으면 false |
| form |
상위 객체인 Form 객체에 대한 레퍼런스. |
| name |
NAME 속성을 반영. |
| type |
TYPE 속성, 즉 "radio" 스트링 |
| value |
VALUE 속성을 반영. |
| 메소드 |
설 명 |
| blur() |
포커스를 해제한다. |
| focus() |
포커스를 준다. |
| handleEvent(Event 객체) |
파라미터로 지정된 이벤트의 이벤트 핸들러를 호출한다. |
| click() |
버튼에 마우스 클릭된 것처럼 실행된다. |
Radio, Checkbox의 이벤트 핸들러
onBlur, onClick, onFocus
8. Select, Option 객체
Select 객체는 <select> 태그에 의해 브라우저가 자동 생성하는 객체이다. <select> 태그와 </select> 태그 사이에는
다수의 선택 항목을 지정하는 <option> 태그를 포함한다. Option 객체는 <option> 태그에 의해 자동 생성한다. Option
객체는 Select 객체의 하위 객체이다. 그러므로 어떤 Option 객체가 액세스될 때는 Select 객체의 프로퍼티인 것처럼 액세스된다.
Option 객체의 생성
Option 객체는 폼 요소가 아니며 다음 두 가지 방법으로 생성된다.
- <option> 태그에 의해 브라우저가 자동 생성
- 자바스크립트 코드에서 Option 객체의 생성자를 호출하여 생성
예를들어, new Option("사과", "과일", true, true);
|
이미 출력된 문서상에서 자바스크립트 코드를 이용하여 Option 객체를 생성하고 Select 객체에 삽입하였다면 반드시 다음의 코드를
실행하여야 옵션이 변경된 문서를 볼 수 있다.
이 코드는 HTML 문서를 재로드하는 기능을 한다. 문서의 재로드는 생성된 Option 객체들을 가진 Select 객체를 출력하는 효과를
가진다.
자바스크립트로 Select 객체의 옵션 선택하기
Option 객체의 생성자에서 처음부터 선택된 상태로 옵션을 생성하고자 한다면, 3, 4 번째 파라미터중에서 4번째 파라미터를 true로
주어야 한다. 옵션을 선택상태로 만드는 방법은 Option 객체의 selected 프로퍼티를 true로 만들든지, Select 객체의
selectedIndex를 변경하면 가능하다.
예를 들어, 문서내에 폼 객체의 이름이 f이고 Select 객체의 이름이 sel이면 sel의 두 번째 옵션을 선택상태로 만드는 자바스크립트
코드는 다음과 같다.
document.f.sel.options[1].selected = true
history.go(0) |
혹은
document.f.sel.selectedIndex = 1
history.go(0) |
(표) Select의 프로퍼티 및 메소드
| 프로퍼티 |
설 명 |
| length |
옵션 리스트에 있는 옵션의 개수. |
| options |
옵션 객체들의 배열. 이 배열의 원소는 Option 객체. |
| selectedIndex |
선택된 옵션에 대한 인덱스. 다수개의 옵션이 선택되었으며 첫번째 옵션에 대한 인덱스이고
아무 옵션도 선택되지 않았다면 0 값. |
| form |
상위 폼 객체에 대한 레퍼런스 |
| name |
NAME 속성을 반영하는 객체의 이름 스트링. |
| type |
<select> 태그에 MULTIPLE 필드가 지정되었으면
"select-multiple", 아니면 "select-one" 스트링 값 |
| 메소드 |
설 명 |
| blur() |
포커스를 해제한다. |
| focus() |
포커스를 준다. |
| handleEvent(Event 객체) |
파라미터로 지정된 이벤트의 이벤트 핸들러를 호출한다. |
(표) Option 객체의 생성자
| new Option(text, value, defaultSelected, selected) |
- text - 옵션 리스트레 출력할 텍스트 스트링(선택사항)
- value - 옵션이 선택되었을 때 서버로 전송되는 value 값(선택사항)
- defaultSelected - 옵션이 초기에 선택된 상태인지를 가리키는 boolean 값(선택사항)
- selected - 현재 옵션의 선택 상태를 표시하는 boolean 값(선택사항)
(표) Option의 프포퍼티(메소드 없음)
| 프로퍼티 |
설 명 |
| defaultSelected |
옵션이 초기에 선택되었는지를 표시하는 boolean 값. |
| selected |
현재 옵션의 선택 상태를 표시하는 boolean 값. |
| text |
옵션 리스트에 출력되는 텍스트 스트링. |
| value |
옵션이 선택되었을 때 서버에게 전송되는 value 값. |
Select의 이벤트 핸들러
onBlur, onChange, onFocus
Select 객체의 옵션 리스트에서 옵션을 동적으로 제거할 수 있다. 옵션을 제거하기 위해서는 Select 객체의 옵션 배열에 대한
레퍼런스이 options에서 해당 옵션에 null 값을 주면된다.
sel.options[2] = null;
추천 : 