홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
아리랑가요(무료음악채널)
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)
미스트롯(무료음악채널)

온라이브스토어(앱다운로드)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
폼 관련 객체들
11년 전

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;

추천추천 : 228 추천 목록
번호 제목
3,016
 우클릭 완벽차단 스크립트
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
목록
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
세월따라노래따라
가슴시린트로트
트로트쌍쌍파티
7080추억속으로
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.