본문 바로가기
BOOK/자바스크립트

폼 객체

by "뭉치" 2021. 7. 30.
728x90

폼 객체

 

 

 

 

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>

 

 

 

[실행결과]

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock>

 

 

 

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>

 

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

 

 

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>

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

 

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>

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

 

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>

 

 

[실행결과]

 

<v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f><o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

<o:lock aspectratio="t" v:ext="edit"></o:lock> 

 

 

6. onSubmit 버튼

 

 

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

728x90
저작자표시 비영리 변경금지

'BOOK > 자바스크립트' 카테고리의 다른 글

Date 객체  (0) 2021.07.30
navigator 객체  (0) 2021.07.30
window 객체  (0) 2021.07.30
history 객체  (0) 2021.07.30
location 객체  (0) 2021.07.30

관련글

댓글

티스토리툴바

티스토리툴바