HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 16. form 객체

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 form 객체의 하위 객체를 알 수 있다. 양식을 처리하는데 중요한 form 객체의 프로퍼티와 메서드, 이벤트 핸들러에 대해 알 수 있다. text 객체를 비롯해서 다양한 form 객체의 하위 객체에 대하여 프로퍼티와 메서드, 이벤트 핸들러를 알 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 form 객체 ※ form 객체 사용할 때 주의할 점 document 객체의 하위 객체
기본형식 document.폼 이름.프로퍼티 이름 ※ form 객체 사용할 때 주의할 점 * <form> 태그를 삽입할 때에는 반드시 폼에 대한 이름을 지정해야 한다. 자바스크립트 실행 부분을 <form> 태그가 삽입된 위치보다 아래에 두어야 한다. HTML CSS 자바스크립트 무작정 따라하기

5 form 객체 form 객체의 하위 객체 HTML CSS 자바스크립트 무작정 따라하기

6 form 객체의 프로퍼티 <form> 태그와 관련된 프로퍼티 <form> 태그와 관련된 프로퍼티 프로퍼티
설명 action submit 버튼을 클릭했을 때 실행할 프로그램 name 폼의 이름 method 폼에 입력된 정보를 전송하는 방식 target action에서 지정한 프로그램의 실행 결과를 표시할 대상 <form> 태그와 관련된 프로퍼티 프로퍼티 설명 기본형식 elements <form> 태그 안의 폼 요소들을 배열 형태로 저장 document.폼 이름.elements[인덱스] length <form> 태그 안에 삽입된 폼 요소의 개수 document.폼 이름.length HTML CSS 자바스크립트 무작정 따라하기

7 form 객체의 메서드 메서드 설명 submit
사용자가 폼 요소에 입력한 내용들을 ACTION에서 지정한 프로그램으로 넘겨준다. reset 사용자가 폼 요소에 입력한 내용들을 모두 지운다. HTML CSS 자바스크립트 무작정 따라하기

8 text 객체 text 객체는 폼 안에 삽입된 텍스트 필드를 관리하는 객체
기본형식 [window.]document.폼 이름.텍스트필드 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스].텍스트필드 이름 [window.]document.forms[인덱스].elements[인덱스] text 객체의 프로퍼티 프로퍼티 설명 defaultValue HTML 태그에서 따로 값을 지정하지 않을 경우 텍스트 필드 안에 표시할 기본값 name 텍스트 필드의 이름 value 사용자가 텍스트 필드에 입력하는 내용을 저장한다. HTML CSS 자바스크립트 무작정 따라하기

9 text 객체 text 객체의 메서드 text 객체의 이벤트 핸들러 메서드 설명 focus( )
텍스트 필드에 포커스를 지정한다. blur( ) 텍스트 필드에서 포커스를 제거한다. select( ) 텍스트 필드 안의 텍스트를 선택한다. text 객체의 이벤트 핸들러 이벤트 핸들러 설명 onBlur 텍스트 필드에서 포커스가 제거되었을 때 실행할 명령이나 함수를 연결한다. onChange 텍스트 필드에서 텍스트가 변경되었을 때 실행할 명령이나 함수를 연결한다. onFocus 텍스트 필드에 포커스가 지정되었을 때 실행할 명령이나 함수를 연결한다. onSelect 텍스트 필드의 텍스트가 선택되었을 때 실행할 명령이나 함수를 연결한다. HTML CSS 자바스크립트 무작정 따라하기

10 password 객체 비밀번호를 입력할 때 사용하는 패스워드 필드를 관리하는 객체
기본형식 [window.]document.폼 이름. 패스워드필드 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스].패스워드필드 이름 [window.]document.forms[인덱스].elements[인덱스] password 객체의 프로퍼티 프로퍼티 설명 defaultValue 패스워드 필드의 기본값 name 패스워드 필드의 이름 value 사용자가 패스워드 필드에 입력하는 내용을 저장한다. HTML CSS 자바스크립트 무작정 따라하기

11 password 객체 password 객체의 메서드 password 객체의 이벤트 핸들러 메서드 설명 blur()
패스워드 필드에서 포커스를 제거한다. focus() 패스워드 필드에 포커스를 지정한다. select() 패스워드 필드 안의 텍스트를 선택한다. password 객체의 이벤트 핸들러 이벤트 핸들러 설명 onBlur 패스워드 필드에서 포커스가 제거되었을 때 실행할 명령이나 함수를 연결한다. onChange 패스워드 필드에서 텍스트가 변경되었을 때 실행할 명령이나 함수를 연결한다. onFocus 패스워드 필드에 포커스가 지정되었을 때 실행할 명령이나 함수를 연결한다다. onSelect 패스워드 필드의 텍스트가 선택되었을 때 실행할 명령이나 함수를 연결한다. HTML CSS 자바스크립트 무작정 따라하기

12 textarea 객체 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드를 관리하는 객체
기본형식 [window.]document.폼 이름. 텍스트 영역 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스]. 텍스트 영역 이름 [window.]document.forms[인덱스].elements[인덱스] password 객체의 프로퍼티 프로퍼티 설명 defaultValue 텍스트 영역의 기본값 name 텍스트 영역의 이름 value 사용자가 텍스트 영역에 입력하는 내용을 저장한다. HTML CSS 자바스크립트 무작정 따라하기

13 textarea 객체 textarea 객체의 메서드 textarea 객체의 이벤트 핸들러 메서드 설명 blur()
텍스트 영역에서 포커스를 제거한다. focus() 텍스트 영역에 포커스를 지정한다. select() 텍스트 영역 안의 텍스트를 선택한다. textarea 객체의 이벤트 핸들러 이벤트 핸들러 설명 onBlur 텍스트 필드에서 포커스가 제거되었을 때 실행할 명령이나 함수를 연결한다. onChange 텍스트 필드에서 텍스트가 변경되었을 때 실행할 명령이나 함수를 연결한다. onFocus 텍스트 필드에 포커스가 지정되었을 때 실행할 명령이나 함수를 연결한다. onSelect 텍스트 필드의 텍스트가 선택되었을 때 실행할 명령이나 함수를 연결한다. HTML CSS 자바스크립트 무작정 따라하기

14 hidden 객체 양식에서 히든 필드를 관리하는 객체 자바스크립트를 이용하여 hidden 객체에 접근하는 방법
기본형식 [window.]document.폼 이름. 히든 필드 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스]. 히든 필드 이름 [window.]document.forms[인덱스].elements[인덱스] password 객체의 프로퍼티 프로퍼티 설명 defaultValue 히든 필드의 기본값. name 히든 필드의 이름. value 히든 필드의 값. HTML CSS 자바스크립트 무작정 따라하기

15 button/submit/reset 객체
웹 문서의 폼 안에 삽입된 버튼을 처리하기 위한 객체 자바스크립트를 이용하여 버튼 객체에 접근하는 방법 기본형식 [window.]document.폼 이름. 버튼 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스]. 버튼 이름 [window.]document.forms[인덱스].elements[인덱스] password 객체의 프로퍼티 프로퍼티 설명 name 버튼 요소의 이름. value 버튼에 표시할 내용. HTML CSS 자바스크립트 무작정 따라하기

16 button/submit/reset 객체
버튼 객체의 메서드 메서드 설명 blur() 버튼에서 포커스를 제거합니다. click() 버튼을 클릭합니다. focus() 버튼에 포커스를 지정합니다. 버튼 객체의 이벤트 핸들러 이벤트 핸들러 설명 onBlur 객체에서 포커스를 제거했을 때 실행할 함수를 연결한다. onClick 객체를 클릭했을 때 실행할 함수를 연결한다. onFocus 객체에 포커스를 지정했을 때 실행할 함수를 연결한다. HTML CSS 자바스크립트 무작정 따라하기

17 checkbox 객체 체크박스는 여러 항목을 선택할 수 있기 때문에 항목마다 이름을 다르게 지정해야
기본형식 [window.]document.폼 이름. 체크박스 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스]. 체크박스 이름 [window.]document.forms[인덱스].elements[인덱스] password 객체의 프로퍼티 프로퍼티 설명 checked 체크박스의 체크 상태. defaultChecked 초기의 체크 상태. name 체크 박스의 이름. <input> 태그의 name 속성과 같다. value 체크 박스에 할당된 값. <input> 태그의 value 속성과 같다. HTML CSS 자바스크립트 무작정 따라하기

18 checkbox 객체 checkbox 객체의 메서드 checkbox 객체의 이벤트 핸들러 메서드 설명 click()
체크박스를 클릭한다. 한번 클릭하면 체크되고 한 번 더 클릭하면 체크가 해제된다. checkbox 객체의 이벤트 핸들러 이벤트 핸들러 설명 onClick 객체를 클릭했을 때 실행할 함수를 연결한다. 체크박스에 체크되어 있거나 되어 있지 않거나 상관없이 사용자가 체크박스를 클릭하기만 하면 onClick 이벤트 핸들러가 실행된다. HTML CSS 자바스크립트 무작정 따라하기

19 radio 객체 라디오 버튼을 관리하는 객체 자바스크립트를 이용하여 radio 객체에 접근하는 방법 radio 객체의 프로퍼티
기본형식 [window.]document.폼 이름.그룹 이름[인덱스3] [window.]document.폼 이름.elements[인덱스2][인덱스3] [window.]document.forms[인덱스1].그룹 이름[인덱스3] [window.]document.forms[인덱스].elements[인덱스2][인덱스3] 인덱스1: form 배열의 인덱스 인덱스2: elements 배열의 인덱스 인덱스3: 라디오 그룹 배열의 인덱스 radio 객체의 프로퍼티 프로퍼티 설명 checked 라디오 버튼의 체크 상태. defaultChecked 초기의 체크 상태. name 라디오 버튼의 이름. <input> 태그의 name 속성과 같다. value 각 항목에 할당된 값. <input> 태그의 value 속성과 같다. HTML CSS 자바스크립트 무작정 따라하기

20 radio 객체 radio 객체의 메서드 radio 객체의 이벤트 핸들러 메서드 설명 click() 라디오 버튼을 클릭한다.
onClick 객체를 클릭했을 때 실행할 함수를 연결한다. HTML CSS 자바스크립트 무작정 따라하기

21 select 객체 <select> 태그를 이용한 메뉴를 다루는 객체
기본형식 [window.]document.폼 이름. 셀렉트 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스]. 셀렉트 이름 [window.]document.forms[인덱스].elements[인덱스] select 객체의 프로퍼티 프로퍼티 설명 length select 객체의 opntion 개수 options select 객체의 각 옵션(<option>) 항목들이 저장된다. name 셀렉트의 이름 selectedIndex 선택한 옵션이 어떤 것인지 저장한다. HTML CSS 자바스크립트 무작정 따라하기

22 select 객체 select 객체의 메서드 select 객체의 이벤트 핸들러 메서드 설명 blur( )
콤보 메뉴에서 포커스를 해제한다. focus() 콤보 메뉴에 포커스를 지정한다. select 객체의 이벤트 핸들러 이벤트 핸들러 설명 onBlur 객체에서 포커스를 제거했을 때 실행할 함수를 연결한다. onFocus 객체에 포커스를 지정했을 때 실행할 함수를 연결한다. HTML CSS 자바스크립트 무작정 따라하기

23 fileUpload 객체 파일 요소를 다루는 객체 자바스크립트를 이용하여 fileUpload 객체에 접근하는 방법
기본형식 [window.]document.폼 이름. 파일 업로드 이름 [window.]document.폼이름.elements[인덱스] [window.]document.forms[인덱스]. 파일 업로드 이름 [window.]document.forms[인덱스].elements[인덱스] fileUpload 객체의 프로퍼티 프로퍼티 설명 name 파일 업로드의 이름 value 파일 업로드 요소의 현재값을 저장한다. HTML CSS 자바스크립트 무작정 따라하기