Javascript DOM 객체 2 - Javascript

2021/02/01 - [IT국비교육] - Index Javascript

2021/02/10 - [IT국비교육/Javascript] - Javascript DOM 객체 1 - Javascript

5. Form 객체

Form 태그를 관리하는 객체입니다.
jQuery가 대체하지 못합니다.

- 객체 생성 방법
객체를 생성하지 않고 사용합니다.

- 속성변수 호출 방법

document.Form태그Name값.속성변수

- 메소드 호출 방법

document.Form태그Name값.메소드(~)

- 속성변수 종류

속성변수 이름	설명
action	form 태그 안의 입력양식에 입력(선택) 데이터를 보낼 서버쪽 url주소를 지정
method	· get : 입력(선택) 데이터가 url 뒤에 붙어 전송 · post : 입력(선택) 데이터가 안보이게 전송
enctype	· “application/x-www-form-urlencoded“(default)(사용 안 함) method=“post”일 경우 서버에 전송할 데이터를 ket-value 형태로 인코딩 · “multipart/form-data” 태그 내부에 <input type=“file”>가 있을 경우 파일도 전송 가능 · “text/plain”(사용 안 함) 전송할 데이터를 인코딩 없이 전송
target	서버에서 보내주는 응답을 받을 창이 어디인지 알려줌 서버로 데이터를 전송할 때 이용하는 화면의 id 값을 얻거나 설정할 수 있음
element	Form 태그 안에 실질적인 입력 양식에 대한 정보를 알려줌

- 메소드 종류

메소드 이름	설명
submit()	Form 태그 안의 입력 양식에 입력(선택)된 모든 내용을 서버에 보냄 ※ Form 태그 밖에 있는 입력 양식의 데이터는 서버로 전송되지 않음
reset()	Form 태그 안의 입력 양식에 입력(선택)된 모든 내용을 초기값으로 변경

 

6. Text 객체

<input type=“text” ~>를 관리하는 객체, 문자 입력 상자 태그를 관리하는 객체입니다.
※ <input type=“text” ~>, <input type=“password” ~>, <textarea ~>는 사용자가 무엇을 입력할 줄 모르므로 유효성 체크가 필요합니다.

- 객체 생성 방법
객체를 생성하지 않고 사용합니다.

- 속성변수 호출 방법

document.Form태그Name값.Text태그Name값.속성변수

- 메소드 호출 방법

document.Form태그Name값.Text태그Name값.메소드(~)

- 속성변수 종류

속성변수 이름	설명
value	문자 입력 상자에 입력된 문자열이 저장
defaultValue	문자 입력 상자가 처음 나타날 때 표시된 내용을 설정 ※ value 속성값이 변경되더라도 defaultValue 속성값은 영향받지 않음

- 메소드 종류

메소드 이름	설명
focus()	문자 입력 상자 안에 커서를 들여 놓음
blur()	문자 입력 상자 안에 커서를 뺌
select()	문자 입력 상자 안을 드래그 하여 입력 내용을 선택

 

7. Password 객체

<input type=“password” ~>를 관리하는 객체, 암호 입력 상자 태그를 관리하는 객체입니다.
문자 입력 상자와 다른 점은 입력한 문자가 보안상 ● 모양으로 보입니다.

- 객체 생성 방법
객체를 생성하지 않고 사용합니다.

- 속성변수 호출 방법

 document.Form태그Name값.Password태그Name값.속성변수

- 메소드 호출 방법

document.Form태그Name값.Password태그Name값.메소드(~)

※ Text 객체의 속성변수, 메소드와 동일

 

8. Textarea 객체

<Textarea>를 관리하는 객체, 다중 문자 입력 상자 태그를 관리하는 객체입니다.

- 객체 생성 방법
객체를 생성하지 않고 사용합니다.

- 속성변수 호출 방법

document.Form태그Name값.Textarea태그Name값.속성변수

- 메소드 호출 방법

document.Form태그Name값.Textarea태그Name값.메소드(~)

document.Form태그Name값.Textarea태그Name값.value = “문자열”;는 <textarea>문자열</textarea>과 동일한 기능을 합니다.
※ Text 객체의 속성변수, 메소드와 동일
※ textarea 태그는 value 속성이 없음

9. Hidden 객체

<input type=“hidden” ~>를 관리하는 객체로 숨겨진 입력 상자 태그를 관리합니다.
사용자가 키보드로 입력할 수 없는 입력 양식입니다.
Javascript에서 제작된 데이터를 담거나 데이터베이스(DB) 검색 결과 출력 시 PK값을 저장할 경우 사용합니다.
화면에 보이고 싶지는 않지만 웹서버에 반드시 보내고 싶은 데이터가 있을 때 사용합니다.

- 객체 생성 방법
객체를 생성하지 않고 사용합니다.

- 속성변수 호출 방법

document.Form태그Name값.Hidden태그Name값.속성변수

- 메소드 호출 방법

document.Form태그Name값.Hidden태그Name값.메소드(~)

What is Form Tag in Javascript What is Text Tag in Javascript What is Password Tag in Javascript What is Textarea Tag in Javascript What is Hidden Tag in Javascript What kind of Text Tag method in Javascript What kind of Password Tag method in Javascript What kind of Textarea Tag method in Javascript What kind of Hidden Tag method in Javascript