객체 접근 (TEXT, RADIO, CHECKBOX, SELECT, RESET, ONSUBMIT)

Java/JavaScript 2013. 1. 14. 15:32

폼 객체

 

1. text 객체

 

주요 메서드와 속성

설명

name

텍스트 박스의 이름

value

텍스트 박스의 값

 

WebContent/form/text.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>text.html</title>

<script>

function copyFunc(ff){

ori = ff.ori.value;

ff.copy.value = ori;

}

</script>

</head>

<body>

<h1>text 입력상자의 값 제어</h1>

<form name='frm'>

원본 : <input type='text' name='ori' value='park'><br>

사본 : <input type='text' name='copy' value=''>

<p>

<input type='button' value='copy' onclick='copyFunc(this.form)'>

</form>

</body>

</html>

 

[실행결과]

 

2. radio 객체

 

주요 메서드와 속성

설명

form

체크 박스 입력 양식을 포함하는 폼 객체의 정보를 가져옴.

checked

체크 박스를 선택하도록함.

defaultChecked

체크 속성이 설정되었는지 확인

name

체크 박스의 이름

value

체크 박스의 값

type

type속성값을 제어

blur() focus()

포커스를 제어

click()

체크 박스를 체크함.

 

WebConent/form/radio.html

 

<html>

<head>

<title>라됴객체 </title>

<script language="JavaScript">

function mclick(f){

l=f.chk.length

for(i=0 ; i < l ; ++i){

if(f.chk[i].checked){

f.re.style.backgroundColor=f.chk[i].value

f.re.value=f.chk[i].value}

}

}

</script>

</head>

<body>

<form name=ff>

<table border=0>

<th><center>Box의 색상을 고르시요</center></th>

<tr>

<td>

<textarea name=re rows=5 cols=30 ></textarea>

</td></tr><tr>

<td>

<input type="radio" name=chk value="#330000">검정

<input type="radio" name=chk value="#3300FF">파랑

<input type="radio" name=chk value="#00FF00">녹색

<input type="radio" name=chk value="#FF0000">빨강<br>

<input type="radio" name=chk value="#FFFF00">노랑

<input type="radio" name=chk value="#FFFFFF">흰색

<input type="radio" name=chk value="#FF9900">오랜지

<input type=button name=bu value="click" onclick="mclick(this.form)">

</td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

3. checkbox 객체

 

주요 메서드와 속성

설명

form

체크 박스 입력 양식을 포함하는 폼 객체의 정보를 가져옴.

checked

체크 박스를 선택하도록함.

defaultChecked

체크 속성이 설정되었는지 확인

name

체크 박스의 이름

value

체크 박스의 값

type

type속성값을 제어

blur() focus()

포커스를 제어

click()

체크 박스를 체크함.

 

WebContent/form/checkbox2.html

 

<html>

<head>

<title> Check Box2 </title>

<script language="JavaScript">

function mclick(f){

l=f.chk.length

f.re.value=""

for(i=0 ; i<l ; i++){

if(f.chk[i].checked) {f.re.value=f.re.value + f.chk[i].value + "\n"}

}

}

</script>

</head>

<body>

<form name="ff" method="post">

<table border=0>

<th>마음에 드는 연예인을 고르시요</th>

<tr>

<td>

<textarea name=re rows=5 cols=30 ></textarea>

</td></tr><tr>

<td>

<input type="checkbox" name=chk value="황수정">황수정

<input type="checkbox" name=chk value="채림">채림

<input type="checkbox" name=chk value="황신혜">황신혜

<input type="checkbox" name=chk value="김미화">김미화<br>

<input type="checkbox" name=chk value="이영자">이영자

<input type="checkbox" name=chk value="고두심">고두심

<input type="checkbox" name=chk value="신지">신지<br>

<input type=button name=bu value="선택" onclick="mclick(this.form)">

<input type=reset value="취소">

</td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

4. select 객체

 

1) 객체명.selectedIndex : 선택한 항목의 번호(0번부터)

2) 객체명.[객체명.options.selectedIndex].value : 선택한 항목의 값.

3)객체명.[객체명.options.selectedIndex].text : 선택한 항목의 text.

 

WebContent/form/select.html

 

<HTML>

<HEAD>

<title> </title>

<script language="JavaScript">

function mclick(f,n){

f.tt.style.backgroundColor=n

}

function chang(f){

f.tt.style.backgroundColor=f.sel.options[f.sel.options.selectedIndex].value

}

</script>

</HEAD>

<BODY>

<b><h3>Select 를 이용하여 바탕 색상 바꾸기</h3></b><p>

<form name="ff">

<input type=text name=tt >

<select name="sel" onChange="chang(this.form)">

<option value="#000000">검은색

<option value="#006600">녹색

<option value="#00FF00">연두색

<option value="#FF0000">뻘건색

<option value="#FFFFFF">흰색

</select>

<input type="button" value="white" onClick="mclick(this.form, 'white')">

</form>

</BODY>

</HTML>

 

 

 

 

5. reset 버튼 객체

 

각 항목의 값을 초기값으로 셋팅한다.

특정항목에 값이 있을때 reset 되지 않도록 제어하는 예제임.

 

WebContent/form/onReset.html

<HTML>

<HEAD>

<TITLE>onReset()-1</TITLE>

<style>

input{font-size:40;}

</style>

<script>

function fun(ff)

{

if(ff.irum.value =="") return true;

else return false;

}

</script>

</HEAD>

<BODY>

<h3> 이름 항목에 값이 있으면 리셋버튼의 기능 중지</h3>

<form name="frm" onReset="return fun(this)">

Name <input type="text" name="irum" value=""><br>

Address <input type="text" name="addre" value=""><br>

<input type=reset value="다시">

</form>

</BODY>

</HTML>

 

[실행결과]

 

 

 

 

6. onSubmit 버튼

 

폼에 있는 정보를 서버로 전달하는 기능

'Java > JavaScript' 카테고리의 다른 글

jsp 와 ajax(xml사용) 통신 기본 영문 예제 (데이터 흐름도 개별정리)  (0) 2013.07.04
우클릭, 드래그, 복사 방지 스크립트  (0) 2013.01.10
Javascript event Keycode  (0) 2013.01.10
[20121112 ~ 1113] 5일차 (text박스, 속성, select, window객체, DOM, 사용자 정의 객체)  (0) 2012.11.15
[20121109] 4일차 (달력구현, 난수, radio 버튼, checkbox)  (0) 2012.11.15
WRITTEN BY
빨강꼬마
,