웹프로그래밍/javascript

입력양식(form)관련 자바스크립트

zelkova 2013. 8. 31. 12:47

<목차로 돌아가기>


사용 형식

document.폼명.속성

document.폼명.메소드

 

 속성

메소드 

  action 

  blur() 

  <form>태그의 action 속성 정보를 가져옴

 커서가 사라지게 함

  elements

  reset() 

  입력 양식을 배열로 정의

 입력 양식의 내용이 초기화 됨

  encoding 

  submit() 

  <form>태그의 enctype 속성을 가져옴

 입력 양식에 입력한 내용을 지정된 서버로 전송

  length 

 

  입력양식의 개수를 알려줌

 

  name 

 

 <form>태그의 name속성을 가져옴

 

  method

 

 <form>태그의method 속성 정보를 가져옴

 

  target

 

  <form>태그의 속성 정보를 가져옴

 

 

document.write(document.forms["joinform"]["birth"].value);


 소스 연습하기

form.html

<html>
<head>
<title>form양식관련 자바스크립트 연습 </title>
<script language="javascript">
function test()
{
 var str="0)name" + document.testform.name + "\n"
  str+="1)action" + document.testform.action + "\n"
  str+="2)elements" + document.testform.elements + "\n"
  str+="3)encoding" + document.testform.encoding + "\n"
  str+="4)length" + document.testform.length + "\n"
  str+="5)name" + document.testform.name + "\n"
  str+="6)method" + document.testform.method + "\n"
  str+="7)target" + document.testform.target
 alert(str)
}
function test2()
{
 if(document.testform.name.value=="")
 {
  alert("이름을 적어주세요")
  document.testform.name.focus()
  return false;
 }
 if(document.testform.telvalue=="")
 {
  alert("전화번호를 적어주세요")
  docuemnt.testform.burthday.value
  return false;
 }
var str2="1)이름=" + document.testform.name.value + "\n"
 str2+="2)생년월일=" + document.testform.burthday.value
 alert(str2)
 }

</script>
</head>
<body>
<form name="testform" method=post target="_self">
1)이름 : <input type=text size=10 name="name"> <br>
2)생년월일 : <input type=text size=10 name="burthday"><br><br>
<input type=button value="form 정보" onClick="test()">
<input type=button value="보내기" onClick="test2()">
<input type=button value="다시" onClick="document.testform.reset()">
</form>
</body>
</html>

 

반응형

'웹프로그래밍 > javascript' 카테고리의 다른 글

form(password)관련 자바스크립트  (0) 2013.08.31
form(text) 관련 자바스크립트  (0) 2013.08.31
JavaScript  (0) 2011.11.26
javascript - 이미지  (0) 2011.04.14
javascript-새창뜨게하기  (0) 2011.04.08