JS - input 다루기

<input>태그에 접근할 수 있는 방법을 다룹니다. 물론 <input> 뿐만 아니라 <textarea>도 접근할 수 있습니다. 형식은 다음과 같습니다.

document.폼이름.input이름.속성(or 메서드)

document.폼이름.elements[인덱스].속성(or 메서드)

속 성	설 명
defaultValue	폼 요소의 특정 필드에 대한 기본 값
name	폼 요소의 name 의 속성 값
type	폼 요소의 type 의 속성 값
value	폼 요소의 value 의 속성 값
elements	<form>태그 안의 폼 요소들을 배열로 반환
length	속성 혹은 속성 값의 문자열 길이 Ex.) document.frm.job.value.length

<form name="frm" method="post" action="#">
  <!-- elements[0] -->
  이름 <input type="text" name="youname" value="하보니">
  <!-- elements[1] -->
  <!-- 이벤트 처리를 위해 onChange 속성 추가 -->
  나이 <input type="text" name="age"
                     value="20" onchange="frm_change()">
  <!-- elements[2] -->
  직업 <input type="text" name="job" value="it">
  <!-- elements[3] -->
  비밀번호 <input type="password" name="pw" value="">

  <!-- elements[4] -->
  <input type="submit" value="전송">
</form>

<script>
// "youname" 에 커서가 깜빡이는 건 
// 포커스되었기 때문이겠죠.
document.frm.youname.focus();

// 나이의 기본값은 20 이지만 
// 다른 내용으로 변경하면 대화상자가 떠요.
function frm_change() {
  alert("age 요소의 내용이 변경되었습니다.");
}

// "youname" 의 name 값은 "youname" 입니다.
document.write(
  "youname.name = " + document.frm.youname.name + "<br/>"
);
// "youname" 의 name 값의 길이는 7입니다.
document.write(
  "length = " + document.frm.youname.name.length + "<br/>"
);
// length = 7

// "youname" 의 값은 "하보니" 입니다.
document.write(
  "youname.value = " + document.frm.youname.value + "<br/>"
);
// youname.value = 하보니

// "job" 의 기본 값은 "it" 이지만
// "php" 를 기본값으로 변경합니다.
document.frm.job.defaultValue = "php";
// php



/*
 elements 예제 
*/
// 두 번째 필드의 값은 "20" 입니다.
// 엘리먼트는 0 부터 시작해서 
// 두 번째 요소를 가리키는 필드는 age 입니다.
document.write(
  "age.value = " + document.frm.elements[1].value + "<br/>"
);
// age.value = 20

// 세 번째 필드의 값은 "php" 입니다.
// 엘리먼트는 0 부터 시작해서 
// 세 번째 요소를 가리키는 필드는 job 입니다.
document.write(
  "job.value = " + document.frm.elements[2].value + "<br/>"
);
// job.value = php


// "youname" 의 값은 "하보니" 이고,
// 문자열 길이는 "3" 입니다. 
document.write(
  "youname.value.length = " + document.frm.elements[0].value.length + "<br/>"
);
// youname.value.length = 3
</script>