자바스크립트 다섯번째 요약정리
5강 자바스크립트 폼객체(입력양식)
- Form 객체
<form> 태그의 입력 양식정보를 제어하기 위한 객체
- Text 객체
사용자로부터 한줄을 입력받기 위한 객체
- Password 객체
비밀번호 입력양식을 위한 객체
- Hidden 객체
숨겨진 입력 양식을 위한 객체
- Reset 객체
사용자로부터 입력된 DATA를 초기화 시키는 객체
- Submit 객체
사용자로부터 입력된 DATA를 서버에 전송하기 위한 객체
- Checkbox 객체
사용자로부터 여러개의 선택적 입력을 받기 위한 객체
- Radio 객체
사용자로부터 같은 그룹에서는 하나의 입력을 받기 위한 객체
- Textarea 객체
사용자로부터 여러줄의 입력을 받기 위한 객체
- Select 객체
리스트나 콤보박스를 위한 객체
1. 자바스크립트 form 객체
- Form 객체
<form> 태그의 입력 양식정보를 제어하기 위한 객체
- 형식
document.폼객체명.속성
document.폼객체명.메소드
- 예
document.frm.length
document.frm.elements
------------------------------------------------------
property | 설명
------------------------------------------------------
action | <form> tag의 action속성 정보 반환
------------------------------------------------------
elements | 입력양식을 배열로 정의
------------------------------------------------------
encoding | <form> tag의 enctype속성 정보 반환
------------------------------------------------------
length | 입력양식의 개수를 반환
------------------------------------------------------
name | <form> tag의 name속성 반환
------------------------------------------------------
target | <form> tag의 target속성 반환
------------------------------------------------------
method | <form> tag의 method속성 반환
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
submit() | 입력양식에 입력한 내용을 서버로 보냄
------------------------------------------------------
reset() | 입력양식에 입력한 내용 초기화
------------------------------------------------------
<html>
<head>
<title>소스7-1</title>
<script language="javascript">
<!--
function test()
{
var str="1) name = "+document.myform.name+"\n"
str+="2) action = "+document.myform.action+"\n"
str+="3) target = "+document.myform.target+"\n"
str+="4) method = "+document.myform.method+"\n"
str+="5) encoding = "+document.myform.encoding+"\n"
str+="6) length = "+document.myform.length+"\n"
}
funciton test2()
{
if(document.myform.name.value=="")
{
window.alert("이름을 적어주세요")
document.myform.name.focus();
return false;
}
if(document.myform.tel.value=="")
{
window.alert("전화번호를 적어주세요")
document.myform.tel.focus();
return false;
}
var str2="1) 이름="+document.myform.name.value+"\n"
str2 +="2) 전화번호="+document.myform.tel.value
window.alert(str2)
}
//-->
</script>
</head>
<body>
<form name="myform" method=post target="_self">
1) 이름 : <input type=text size=10 name="name"><br>
2) 전화번호 : <input type=text size=10 name="tel"><br><br>
<input type=button value="form정보" onclick="test()">
<input type=button value="보내기" onclick="test2()">
<input type=button value="다시" onclick="document.myform.reset()">
</form>
</body>
</html>
2. 자바스크립트 text 객체
- Text 객체
사용자로부터 한줄로 입력받기 위한 객체
- 형식
document.폼객체명.text객체명.속성
document.폼객체명.text객체명.메소드
- 예
document.frm.txt.value="검색어를 입력하세요"
document.frm.txt.focus()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | text객체에 입력한 문자열을 알아냄
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
blur() | 특정한 텍스트 입력 양식에 커서를 제거함
------------------------------------------------------
focus() | 특정한 텍스트 입력 양식에 커서를 지정함
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
select() | 텍스트 입력 양식 안에 있는 문자열을 모두 선택
------------------------------------------------------
<html>
<head>
<title>소스7-2</title>
<script language="javascript">
<!--
function test()
{
var mylen=document.myform.money.value.length
var str=document.myform.money.value
for(var i=0; i<mylen; i++)
{
if((str.charAt(i)<"0") || (str.charAt(i) >"9"))
{
window.alert("숫자만 입력 가능합니다.")
document.myform.money.value='';
document.myform.money.focus();
break
}
}
}
function test2()
{
if(document.myform.money.value=="")
{
window.alert("금액을 입력하여 주세요")
document.myform.money.focus();
return false;
}
var str="금액 = "+document.myform.money.value+"원"
window.alert(str)
}
//-->
</script>
</head>
<body>
<form name="myform">
금액 <input type=text size=10 name="money" onblur="test()"><br>
<input type=button value="입력" onclick="test2()">
</form>
</body>
</html>
3. 자바스크립트 password 객체
- Password 객체
비밀번호 입력양식을 위한 객체
- 형식
document.폼객체명.password객체명.속성
document.폼객체명.password객체명.메소드
- 예
document.frm.pwtxt.value
document.frm.pwtxt.focus()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | text객체에 입력한 문자열을 알아냄
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
blur() | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
focus() | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
select() | 암호 입력 양식 안에 있는 문자열을 모두 선택
------------------------------------------------------
<html>
<head>
<title>소스7-3</title>
<script language="javascript">
<!--
function test()
{
u_pw=document.myform.pwd
if((u_pw.value.length>=4) &&(u_pw.value.length<8))
{
window.alert("정상적으로 입력하셨습니다.")
u_pw.focus()
}
else
{
window.alert("암호는 4자이상 8자이하로 입력하세요")
u_pw.value=""
u_pw.focus()
}
}
//-->
</script>
</head>
<body>
<form name="myform">
암호를 입력하세요(4자이상 8자이하) <input type="password" size=10 name="pwd" maxlength=8 >
<input type=button value="입력" onclick="test()">
</form>
</body>
</html>
4. 자바스크립트 hidden 객체
- hidden 객체
숨겨진 입력 양식을 위한 객체
- 형식
document.폼객체명.hidden객체명.속성
document.폼객체명.hidden객체명.메소드
- 예
document.frm.hidden.value="보여라"
document.frm.hidden.eval()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | text객체에 입력한 문자열을 알아냄
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
<html>
<head>
<title>소스7-4</title>
<script language="javascript">
<!--
function test()
{
var str="주체= "+document.myform.hide.value+"\n"
str="주소= "+document.myform.add.value
window.alert(str)
}
//-->
</script>
</head>
<body>
<form name="myform">
주소를 입력하세요 <input type=hidden name="hide" value="중앙사이버교육">
<input type=text size=20 name="add" >
<input type=button value="입력" onclick="test()">
</form>
</body>
</html>
5. 자바스크립트 Checkbox 객체
- Checkbox 객체
사용자로부터 여러개의 선택적 입력을 받기 위한 객체
- 형식
document.폼객체명.checkbox객체명.속성
document.폼객체명.checkbox객체명.메소드
- 예
document.frm.checkbox.checked
document.frm.checkbox.focus()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | <input>태그에서 value속성과 동일하게 적용
------------------------------------------------------
checked | 체크상태를 설정하거나 반환
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
blur() | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
focus() | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
click() | 체크박스를 클릭함
------------------------------------------------------
<html>
<head>
<title>소스7-5</title>
<script language="javascript">
<!--
function test()
{
sel=""
if(myform.a1.checked)
sel += "1번 "
if(myform.a2.checked)
sel += "2번 "
if(myform.a3.checked)
sel += "3번 "
window.alert(sel+"그림이 맘에 드시는군요...")
}
//-->
</script>
</head>
<body>
<form name="myform">
맘에드는 그림을 선택하세요.<br>
<input type=checkbox name="a1">1.<img src="1.gif"><br><br>
<input type=checkbox name="a2">2.<img src="2.gif"><br><br>
<input type=checkbox name="a3">3.<img src="3.gif"><br><br>
<input type=button value="확인" onclick="test()">
</form>
</body>
</html>
6. 자바스크립트 radio 객체
- Radio 객체
사용자로부터 같은 그룹에서는 하나의 입력을 받기 위한 객체
- 형식
document.폼객체명.radio객체명.속성
document.폼객체명.radio객체명.메소드
- 예
documemt.frm.radio.checked
documemt.frm.radio.focus()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | <input>태그에서 value속성과 동일하게 적용
------------------------------------------------------
checked | 체크상태를 설정하거나 반환
------------------------------------------------------
length | 같은 그룹안에 있는 라디오 버튼의 개수를 반환
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
blur() | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
focus() | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
click() | 체크박스를 클릭함
------------------------------------------------------
<html>
<head>
<title>소스7-6</title>
<script language="javascript">
<!--
function test()
{
if(myform.ok[0].checked)
window.alert("1번 그림이 맘에 드시는군요...")
else if(myform.ok[1].checked)
window.alert("2번 그림이 맘에 드시는군요...")
else if(myform.ok[2].checked)
window.alert("3번 그림이 맘에 드시는군요...")
else
window.alert("그림이 선택되지 않으셨네요.")
}
//-->
</script>
</head>
<body>
<form name="myform">
맘에드는 그림을 선택하세요.<br>
<input type="radio" name="ok">1.<img src="1.gif"><br><br>
<input type="radio" name="ok">2.<img src="2.gif"><br><br>
<input type="radio" name="ok">3.<img src="3.gif"><br><br>
<input type=button value="확인" onclick="test()">
</form>
</body>
</html>
7. 자바스크립트 textarea 객체
- Textarea 객체
사용자로부터 여러줄의 입력을 받기 위한 객체
- 형식
document.폼객체명.textarea객체명.속성
document.폼객체명.textarea객체명.메소드
- 예
document.frm.ta.value="자기소개를 하세요"
document.frm.ta.focus()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | textarea객체에 입력한 문자열을 알아냄
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
blur() | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
focus() | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
select() | 텍스트 입력 양식 안에 있는 문자열 모두 선택
------------------------------------------------------
8. 자바스크립티 select 객체
- Select 객체
리스트나 콤보박스를 위한 객체
- 형식
document.폼객체명.select객체명.속성
document.폼객체명.select객체명.메소드
- 예
document.frm.sel.length
document.frm.sel.focus()
------------------------------------------------------
Property | 설명
------------------------------------------------------
length | 항목의 개수를 알아냄
------------------------------------------------------
selectedIndex | 선택된 항목의 인덱스번호를 반환
------------------------------------------------------
option | <option> 태그 정보를 배열로 포함
------------------------------------------------------
name | name속성과 동일하게 적용
------------------------------------------------------
------------------------------------------------------
property | 설명
------------------------------------------------------
blur() | 특정한 텍스트 입력 양식에 커서를 제거함
------------------------------------------------------
9. 자바스크립트 file 객체
- File 객체
파일 업로드 입력 양식을 위한 객체
- 형식
document.폼객체명.file객체명.속성
document.폼객체명.file객체명.메소드
- 예
document.frm.file.value
document.frm.file.focus()
------------------------------------------------------
property | 설명
------------------------------------------------------
value | text객체에 입력한 문자열을 알아냄
------------------------------------------------------
------------------------------------------------------
Method | 설명
------------------------------------------------------
blur() | 특정한 암호 입력 양식에 커서를 제거함
------------------------------------------------------
focus() | 특정한 암호 입력 양식에 커서를 지정함
------------------------------------------------------
eval() | 수식으로 되어 있는 문자열을 계산
------------------------------------------------------
| [프로그래밍/자바스크립트] 객체,속성,메서드,이벤트의 의미 (0) | 2017.08.06 |
|---|---|
| [프로그래밍/JavaScript] 자바스크립트에서 아이프레임(iframe) 링크걸기 (0) | 2017.06.24 |
| 자바스크립트 네번째 요약정리 (0) | 2016.11.06 |
| 자바스크립트 세번째 요약정리 (0) | 2016.11.06 |
| 자바스크립트 두번째 요약정리 (0) | 2016.11.05 |