forms 객체 입력상자 체크상자, 라디오 버튼 목록상자

Presentation on theme: "forms 객체 입력상자 체크상자, 라디오 버튼 목록상자"— Presentation transcript:

1 forms 객체 입력상자 체크상자, 라디오 버튼 목록상자
22장. 폼 관련 객체 forms 객체 입력상자 체크상자, 라디오 버튼 목록상자

2 폼 관련 객체 – form 객체 form 객체 : 폼양식 전체를 감싸고 있는 <form> 태그 안에 기술된 폼양식을 제어 document.폼이름.속성 document.forms[배열번호].속성 element 객체: 폼 양식 안에 포함되는 모든 입력 양식을 제어하고 관리 document.폼이름.elements[배열번호].속성

3 폼 관련 객체 – form 객체가 제공하는 속성 속성 설명 action
elements 입력상자, 라디오 버튼, 체크 버튼 등 폼 양식을 배열로 정의 encoding <form> 태그의 encoding 속성에 기록된 정보를 알려줌 method <form> 태그의 method 속성에 기록된 정보를 알려줌 target <form> 태그의 target 속성에 기록된 정보를 알려줌 length 폼 양식의 개수를 알려줌 name <form> 태그의 name 속성에 기록된 정보를 알려줌

4 폼 관련 객체 – form 객체의 메소드와 이벤트
blur( ) 커서를 사라지게 함 reset( ) 폼 양식에 입력된 값을 초기화 submit( ) 폼 양식에 입력된 값을 지정된 서버로 보냄 form 객체에서 사용하는 이벤트핸들러 onreset 리셋 버튼을 누르면 이벤트가 발생한다. onsubmit 제출 버튼을 누르면 이벤트가 발생한다. form 객체에 포함된 버튼들 <input type=button>: 일반버튼 <input type=rest> : 리셋버튼 <input type=submit>: 전송버튼

5 버튼 다루기 버튼 객체의 속성들 type, name, value 등 버튼 객체의 메소드들
blur(), click(), focus(): 커서를 위치시킴 버튼 객체의 이벤트핸들러들 onblur, onclick, onfocus (커서가 위치할 때), onmousedown,(버튼을 눌렀을 때 이벤트 발생), onmouseup (버튼을 눌렀다 떼었을 때 이벤트 발생), Section4/Chap22/2201/2201end.htm

6 입력상자, 체크상자, 라디오 버튼 입력상자들 <input type=text> : 한줄 입력상자
<input type=password>: 비밀번호 입력상자 <textarea> : 여러줄 입력상자 입력상자 관련 예제들 p.465 Section4/Chap22/2202/2202end.htm 체크상자 속성: type, name, value, checked, defaultChecked 라디오버튼 속성: length 메소드: blur(), click(), focus() 이벤트핸들러: onblur, onclick, onfocus Section4/Chap22/2203/2203end.htm

7 폼 관련 객체 – select 객체 - <select>태그: 드롭다운 메뉴, 즉 목록상자를 만들어 줌
- 메소드: blur(), focus() - 이벤트핸들러: onblur, onfocus, onchange - select 객체의 속성 속성 설명 type multiple 정보를 가져옴 length 목록의 개수를 알려줌 options <select> 태그 안에 포함된 <option> 태그를 배열로 구성 selectIndex 목록을 배열 번호로 표시하거나 배열 번호를 가져옴

8 폼 관련 객체 – <select> options
속성 설명 defaultSelected 선택한 목록이 <option> 태그에 selected 속성을 사용한 목록인지 확인 index 선택한 목록의 배열 번호를 가져옴 selected 선택한 목록이 선택되었는지 확인 text 선택한 목록에 입력된 내용을 가져옴 value 선택한 목록에 사용된 value 속성 값을 가져옴

9 폼 관련 객체 – 목록상자에 항목 추가/삭제하기
목록상자에 항목 추가하기 변수=new Option(내용, value 속성 값, 초기선택 상태, 선택) e.g., var newOpt=new “1”, true) ‘ 추가하고 value=1로 하며 선택되어 있는 상태로 한다. 목록상자에서 항목 삭제하기 form.newAdd.options[n] =null p.471 Section4/Chap22/2204end/main.htm, address.htm