제9장폼객체 객체다루기 학습목표 폼객체에서사용하는속성, 메소드, 이벤트핸들러를이해한다. 목록상자에서사용하는속성, 메소드, 이벤트핸들러를이해한다.
목차 9.1 form 객체 9.2 입력상자, 체크상자, 라디오버튼 9.3 목록상자 2
9.1 form 객체 폼은주로서버에어떤데이터를보내고자하는경우에많이사용한다. <form> 태그를제어하는 form 객체의기본용법은다음과같다 document. 폼이름. 속성 document.form[ 배열번호 ]. 속성 document. 폼이름.elements[ 배열번호 ]. 속성 form 객체의속성과메소드는다음과같다. form 객체 action elements <form> 태그의 action 속성에기록된정보를보여줌 입력상자, 라디오버튼, 체크버튼등폼양식을배열로정의 속성 encoding method <form> 태그의 encoding 속성에기록된정보를알려줌 <form> 태그의 method 속성에기록된정보를알려줌 target length <form> 태그의 target 속성에기록된정보를알려줌 폼양식의개수를알려줌 메소드 이벤트핸들러 name Blur( ) Reset( ) submit( ) onreset onsubmit <form> 태그의 name 속성에기록된정보를알려줌 커서를사라지게함폼양식에입력된값을초기화폼양식에입력된값을지정된서버로보냄리셋버튼을누르면이벤트발생전송버튼을누르면이벤트발생 3
9.1 form 객체 다음예는입력된문자를대문자로자동으로바꾸어주는예제이다. 아래와같이 form.html 을작성한다. <html> <head> <title>form 객체다루기 </ title> <script language="javascript"> function makeupper1(){ var str = document.sampleform1.inp.value document.sampleform1.inp.value = str.touppercase(); function makeupper2(){ var str = document.sampleform2.inp.value document.sampleform2.inp.value = str.touppercase(); </ script> </ head> <body> <h3>form 객체 </ h3><hr><br> <form name="sampleform1"> Input1 : <input type="text" name="inp" value="test" onchange="makeupper1()"> </ form> <form name="sampleform2"> Input2 : <input type="text" name="inp" value="test" onchange="makeupper2()"> </ form></ body></ html> 4
9.1 form 객체 프로그램을수행시키면입력상자가나타나고영문자를소문자로입력한후탭 (tab) 키를누르면대문자로변경되는것을확인할수있다. 5
9.1 form 객체 다음예는종류별폼입력양식으로입력받은값을출력해주는예이다. form2.html 이라는이름으로저장하자. <html> <head><title>form 값출력하기 </ title> <script> function print(s) { var n; var x; w = window.open(""); for(var i=0; i<s.length; i++) { n = s.elements[ i].name; if(s.elements[ i].type == "select- one") { x = s.elements[ i].selectedindex; value = s.elements[ i].options[ x].value; else { value = s.elements[ i].value; w.document.writeln(n + " = " + value + "<br>"); w.document.title="form 값출력하기 "; w.document.close(); return false; </ script> </ head> <body> 6
9.1 form 객체 <h3> 입력받은값출력하기 </ h3> <hr noshade> 폼에입력한값을확인을누르면새창에출력합니다. <form method="post" onsubmit="return print(this)"> <table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="# 666666" bgcolor="# FFFFFF"> <tr> <td width="80" bgcolor="# CCCCCC"> 이름 :</ td> <td width="220"><input name="name" type="text"></ td> </tr> <tr> <td bgcolor="# CCCCCC"> 암호 : </ td> <td><input type="password" name="password"></ td> </tr> <tr> <td bgcolor="# CCCCCC"> 취미 : </ td> <td><input type="checkbox" name="game" checked> 컴퓨터게임 <input type="checkbox" name="play"> 운동 </td> </tr> <tr> <td bgcolor="# CCCCCC"> 음식 : </ td> <td><select name="favorite"> <option value="1"> 라면 <option value="2"> 돈까스 <option value="3"> 삼겹살 <option value="4"> 된장찌개 </ select></ td> </tr> 7
9.1 form 객체 <tr> <td bgcolor="# CCCCCC"> 직업 :</ td> <td><input type="radio" name="job" value="student" checked> 대학생 <input type="radio" name="job" value="employee"> 회사원 <input type="radio" name="job" value="enterprise"> 자영업 </td> </tr> <tr> <td bgcolor="# CCCCCC"> 파일 : </ td> <td><input type="file" name="file"></ td> </tr> <tr> <td colspan="2" align="right"><input type="submit" name="sub" value=" 확인 "></ td> </tr> </ table> </ form> </ body> </ html> 8
9.1 form 객체 프로그램을수행시키면각종입력상자가나타나는데값을입력하고확인을누르면새창에입력한값들이출력되는것을확인할수있다. 9
폼객체는 textarea, text, password, hidden, submit, reset, radio, checkbox, button, select 등이있는데주요객체들의속성과메소드및적용되는이벤트핸들러가아래와같다. 객체속성메소드이벤트핸들러 text textarea checkbox radio button name, value, defaultvalue, password name, value, defaultvalue name, value, checked, defaultchecked name, value, checked, defaultchecked, length type, name, value select(), blur(), focus(),eval() select(), blur(), focus(), eval() click(), blur(), focus() click(), blur(), focus() click(), blur(), focus(),eval() submit name, value click() onclick reset name, value click() onclick onblur, onchange, onfocus, onselect onblur, onchange, onfocus, onselect onclick, onblur, onfocus onclick, onblur, onfocus onclick, onblur, onfocus hidden name, type, value eval() onclick, onblur, onfocus 10
다음예제는버튼을클릭하면클릭한버튼의값을 alert 창으로표시해주는예제이다. text.html 이라는이름으로저장하자. <html> <head><title>text 복사 </ title> <style> input{ border:dotted 0; background- color:transparent </ style> </ head> <body> <h3>text 객체 </ h3> <hr> 첫번째입력상자에글을쓰고복사를눌러보세요. <form name="f"> <table width="100" height="100" border="1" cellpadding="0" cellspacing="0" bordercolor="# FF6633"> <tr> <td align="center" valign="middle"><input type="text" name="text1" size="10"></ td> </tr> <tr> <td align="center" valign="middle"> <input name="button" type="button" onclick="this.form. text2.value=this.form.text1.value" value=" 복사 "></ td> </tr> <tr> <td align="center" valign="middle"> <input type="text" name="text2" size="10"></ td> </tr> </ table> </ form> </ body> </ html> 11
text.html 을실행하여글을입력하고복사를눌러보자. 복사되는것을볼수있다. 12
다음을입력하고 text2.html 이라는이름으로저장하자. <html> <head><title>text2</ title></ head> <body> <h3>text 객체 </h3> <hr> 입력창을클릭하여영문을변경한후벗어나보십시오. <form name="f"> <br> <input type="text" name="text" value="multi" onfocus="this.select()" onchange="this.value=this.value.touppercase()"> </ form> </ body> </ html> 13
text2.html 을실행하면그림과같이출력되는것을볼수있다. 텍스트입력상자를클릭하면기본텍스트가선택되어진상태로바뀌는것을볼수있다. 14
이번에는영문을변경하고입력상자를벗어나보자. 그러면 touppercase() 에의해대문자로바뀌는것을확인할수있다. 15
다음예제는 textarea 를활용한예제이다. 아래와같이입력하고 textarea.html 이라는이름으로저장하자. <html> <head><title>textarea</ title> <script language="javascript"> t = new Array(2) t[ 0] =" 첫번째버튼을클릭하셨습니다 " t[ 1] =" 두번째버튼을클릭하셨습니다 " </ script> </ head> <body > <form name="t_area"> <h3>textarea 객체 </ h3> <hr> <h2> 버튼을눌러보세요.</ h2> <table width="1" border="1" cellpadding="0" cellspacing="0" bordercolor="# CC66CC" bgcolor="# CCCCCC"> <tr> <td align="center"> <input type="button" name=" 버튼 1" value=" 버튼 1" onclick="this.form.t_area.value=t[ 0] "></ td> <td align="center"> <input type="button" name=" 버튼 2" value=" 버튼 2" onclick="this.form.t_area.value=t[ 1] "></ td> </tr> <tr> <td colspan="2" align="center"> <textarea name="t_area" rows=3 cols=30> </ textarea></ td> </tr> </ table> <br> </ form></ body></ html> 16
textarea.html 을실행하여버튼 1 을클릭하면출력되는것을볼수있다. 17
버튼 2 를클릭하면 textarea 에바뀌는것을확인할수있다. 18
다음예제는버튼을클릭하면클릭한버튼의값을 alert 창으로표시해주는예제이다. 아래와같이작성하고 button.html 이라는이름으로저장하자. <html> <head> <title>input 객체다루기 </ title> <script language="javascript"> function out_value(btn){ var str = " 이름 : " + btn.name + "\ n"; str += " 값 : " + btn.value + "\ n"; alert(str); function out_value2(btn){ alert(btn.value + " 을눌렀습니다."); </ script> </ head> <body onload="form1.btn1.value=' 버튼 1'; form1.btn2.value=' 버튼 2'"> <h3>button 객체 </ h3><hr><br> <form name="form1"> <input type="button" name="btn1" onclick= "out_value2(form1.btn1)"> <input type="button" name="btn2" onclick= "out_value2(this)"><p> 버튼 3 을눌러보세요!<p> <input type="button" name="btn3" value= " 버튼 3" onclick="out_value(this)"> </ form> </ body> </ html> 19
button.html 을실행하면출력되는것을확인할수있다. 20
9.2 입력상자, 체크상자, 라디오버튼 다음예제는 button 을클릭하면버튼에표시되는값이나이미지를바꿔주는예제이다. button2.html 이라는이름으로저장한다. <html> <head> <title>button 객체다루기 </ title> </ head> <body> <h3>button 객체 </ h3><hr><br> <input type="button" value="on" onclick= "this.value=(this.value == 'on')? 'OFF' : 'ON'"> <input type="submit" value="submit" onclick= "this.value=(this.value == 'submit')? ' 확인 ' : 'Submit'"> <input type="reset" value="reset" onclick= "this.value=(this.value == 'reset')? ' 삭제 ' : 'Reset'"> <input type="image" src="play.gif" onclick= "this.src=(this.src.lastindexof('play.gif')==- 1)? 'play.gif' : 'stop.gif'"> </ body> </ html> 21
button2.html 을실행하면버튼을클릭할때마다버튼의이미지나값이다르게출력되는것을확인할수있다. 22
다음예제는텍스트입력양식으로입력받은값을확인버튼을누르면 alert 창으로출력해주는소스이다. input.html 이라는이름으로저장하자. <html> <head> <title>input 객체다루기 </ title> <script language="javascript"> function out_value(obj){ var str1 = " 엘리먼트이름 (name) : " + obj.id.name + "\ n"; str1 += " 현재의값 (value) : " + obj.id.value +"\ n"; str1 += " 초기문자열 (defaultvalue) : " + obj.id.defaultvalue +"\ n\ n"; str1 += " 엘리먼트이름 (name) : " + obj.dept.name + "\ n"; str1 += " 현재의값 (value) : " + obj.dept.value +"\ n"; str1 += " 초기문자열 (defaultvalue) : " + obj.dept. defaultvalue +"\ n\ n"; alert(str1); </ script> </ head> <body> <h3>input 객체 </ h3><hr><br> <form name="form1"> 이름 : <input type="text" name="id" value=" 홍길동 "><p> 부서 : <input type="text" name="dept"><p> <input type="button" value=" 확인 " onclick= "out_value(form1)"> </ form> </ body> </ html> 23
위예제에서버튼을클릭하면호출되는이벤트 onclick 이발생하면 output_value() 라는이벤트핸들러를호출한다. 이때 output_value() 함수에서는텍스트객체가담고있는속성들의값을출력하는일을수행한다. input.html 을실행하면출력되고이름란에는 홍길동 이라는문자열이나타나며, 부서에는개발부를입력하고확인을누르면 alret 창에결과가출력된다. 24
다음예제는 radio 객체와 checkbox 객체를이용한간단한예제이다. radio_check.html 이라는이름으로저장한다. <html> <head> <title>radio 와 checkbox 객체다루기 </ title> <script language="javascript"> total = 0; prior = 0; function calc(obj){ var f = obj.form; if(obj.type == "radio"){ total = eval(total) - eval(prior); prior = eval(obj.value); total = eval(total) + eval(obj.value); else{ if(obj.checked == false){ total = eval(total) - eval(obj.value); else{ total = eval(total) + eval(obj.value); return total; </ script> </ head> <body><center> <h3> 라디오와체크박스객체 </ h3><hr><br> <form> 사과 400원 <input type="checkbox" value="400" onclick="this.form. b.value=calc(this);"> 배 500원 <input type="checkbox" value="500" onclick="this.form. b.value=calc(this);"> 딸기 600 원 <input type="checkbox" value="600" onclick="this.form. b.value=calc(this);"> <hr width=400 align=center> <br> 배송은어떤방법을원하세요? <br> 퀵배송 <input type="radio"name="a"value="5000"onclick= "this. form.b.value=calc(this);"> 택배 <input type="radio" name="a" value="3000" onclick="this. form.b.value=calc(this);"> <hr width=400 align=center> <br> 총금액은 : <input type="text" name="b" size="9" onfocus= "this.blur();"> 원입니다.</ center> </ body> </ html> 25
radio_check.html 를실행하면 radio,checkbox 로된항목들을클릭하여선택하면총액에금액이더해지며선택을해제하면총액에서금액이차감된다. 26
9.2 입력상자, 체크상자, 라디오버튼 다음예제는 html 의숨겨진양식을처리할수있도록속성, 메소드, 이벤트를제공해주는 hidden 객체의예제이다. 다음과같이작성하고 hidden.html 이라는이름으로저장하자. <html> <head> <title>hidden 객체다루기 </ title> <script language="javascript"> function out_value(){ var str = " 이름 : " + frm.name.value + "\ n"; str += " 부서 : " + frm.tel.value + "\ n"; str += frm.num.value + " 번이저장되었습니다."; alert(str); </ script> </ head> <body> <h3>hidden 객체 </ h3><hr><br> <form name="frm"> <input type="hidden" name="num" value="3"> 이름 : <input type="text" name="name" value=" 홍길동 "><p> 부서 : <input type="text" name="tel" ><p> <input type="button" name="btn" value=" 저장 " onclick="out_value()"> </ form></ body> </ html> 27
hidden.html 을실행하면눈에보이지않는양식값이출력된다. 28
9.3 목록상자 <select> 태그로만들어진목록상자는 select 객체로각각의속성과메소드를제공한다. select 객체 속성 메소드 이벤트핸들러 type length options selectlnde x Blur( ) focus( ) onblur onfocus onchange multiple 정보를가져옴 목록의개수를알려줌 <select> 태그안에포함된 <option> 태그를배열로구성 목록을배열번호로표시하거나배열번호를가져옴커서를사라지게함커서를위치시킴커서를잃어버렸을때커서가위치할때목록상자의항목을변경했을때 29
9.3 목록상자 목록의항목을선택해주는 options 속성은배열번호가 0 번부터시작되고기본구문은다음과같다 폼이름.select 이름.options[ 배열번호 ] options 속성정보를알려주는속성은다음과같다. 속성 defaultselec ted index selected text value options 목록이 <option> 태그에 selected 속성 선택한목록이을사용한목록인지확인선택한목록의배열번호를가져옴선택한목록이선택되었는지확인선택한목록에입력된내용을가져옴선택한목록에사용된 value 속성값을가져옴 30
9.3 목록상자 다음은목록상자에서선택한값을 alret 창으로출력해주는예제이다. 다음과같이입력하고 select.html 이라는이름으로저장한다. <html> <head> <title>select 객체다루기 </ title> <script language="javascript"> function info_item(sel){ var str = ""; str += "[ 1] length : " + sel.length + "\ n"; str += "[ 2] name : " + sel.name + "\ n"; str += "[ 3] selectitem : " + sel.selectedindex + "\ n"; str += "[ 4] type : " + sel.type + "\ n"; str += "- - - - - - - - - - - - - - <options>- - - - - - - - - - - - - - " + "\ n"; str += "[ 5] options.length : " + sel.options. length + "\ n"; for(var i =0; i < sel.options.length; i++){ if(sel.options[ i].selected) str += " 선택된옵션 : " + sel.options[ i]. text + "\ n"; alert(str); </ script> </ head> <body> <h3>select 객체 </ h3><hr><br> <form name="frm"> <select name="select1" size="5" multiple> <option> 고등어 <option> 연어 <option> 오징어 <option> 갈치 </ select><p> <input type="button" value=" 정보보기 " onclick="info_item(frm.select1)"> </ form></ body></ html> 31
9.3 목록상자 select.html 을실행하면다음과같이출력되는것을확인할수있다. 32