[Javascript] Form 제어

name을 활용 Form 제어

• name을 활용한 폼 제어 시에는 form 뿐만 아니라 접근하려는 form 요소에 name값을 지정해야 함

<!-- HTML -->
<form action="" name="ship">
	<label class="field" for="fName">Name</label>
	<input type="text" class="input-box" id="fName" name="fName">
</form>

<script>
// name을 활용한 요소 접근
document.ship.fName // document.폼이름.폼요소이름
document.forms['ship'].elements['fName']  // document.forms['폼이름'].elements['폼요소이름']
docuent.ship.fName.value // document.폼이름.폼요소이름.value
</script>

---

배열을 활용한 Form 제어

• 폼 요소의 배열을 사용하여 접근하는 경우, form에 접근은 forms, 요소에 접근은 elements를 사용

docuent.forms[0].elements[0].value

select 요소 접근

// 배열 활용 select옵션 접근
document.폼 이름.폼 요소이름.options[인덱스]
document.폼 이름.폼 요소이름.options[인덱스].value

// 선태된 select index
document.폼 이름.폼 요소이름.options.seletedIndex
document.폼 이름.폼 요소이름.options[폼요소이름.seletedIndex]

radio, checkbox 요소 접근

• radio 요소는 RadioNodeList 형태로 저장
• checkbox의 경우에는 서로 다른 name을 가지고 있으므로 해당 체크박스의 name 값으로 접근

// radio 요소 접근
// 동일한 name값을 가지므로 노드리스트 형태로 저장
document.폼이름.라디오이름

// 각 요소 checked 여부 확인 (boolean)
document.폼이름.라디오이름[인덱스].checked