홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
폼 관련 객체들
15년 전

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 속성을 다음과 같이 지정해야 한다.

 "multipart/form-data"

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 객체에 삽입하였다면 반드시 다음의 코드를 실행하여야 옵션이 변경된 문서를 볼 수 있다.

 history.go(0)

이 코드는 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;

추천추천 : 271 추천 목록
번호 제목
3,033
 PHP 정규식 정리
3,032
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
3,031
 php 크롤링 또는 파싱 함수, 정규식 모음
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.