자바스크립트 공부(8) - 폼(Form)

1. 폼 요소 접근하기

---

(1) id 또는 class 값을 사용해 접근하기

querySelector() 함수 또는 querySelectorAll() 함수를 사용한다. id 값을 사용할 때는 폼 요소 하나에, class 값을 사용할 때는 여러 요소를 가져와 배열 형태로 저장한다.
텍스트 필드에 있는 값을 가져올 때는 텍스트 필드에 접근하는 코드 맨 뒤에 .value를 붙여준다.

(2) name 값을 사용해 접근하기

폼 요소에 id나 class 속성이 없고 name 속성만 있을 때 사용하는 방법이다. id, class는 CSS를 사용하면서부터 등장했지만 name은 HTML 초기부터 자바스크립트에서 값을 참조할 수 있도록 사용하던 방법이다. (* 폼 요소의 name 값은 주로 id 값과 같게 지정한다.)

document.formName.textName    // 첫 번째 방법
document.forms["formName"].elements["textName"]    // 두 번째 방법

이 방법은 <form> 태그뿐 아니라 폼 요소에 모두 name 속성이 있는지 확인해야 한다.

(3) 폼 배열을 사용해 접근하기

폼 요소에 id, class, name 모두 존재하지 않을 때 사용하는 방법이다. 이 방법은 웹 문서에 <form> 태그가 몇 개나 사용되었는지 알아야 하고, 폼 요소가 많을 경우 원하는 요소에 접근하기 어렵기 때문에 자주 사용하지 않는다.

document.forms[index].elements

 

2. 폼 요소 기타

---

(1) 선택 목록(<select>) 및 옵션(<option>) 항목

선택 목록의 항목은 <option> 태그와 함께 사용된다. 따라서 자바스크립트에서 선택 목록에 접근하면 선택 목록 내 옵션 항목은 배열로 저장된다. 옵션 항목에 접근하려면 options 속성을 사용한다. options 속성을 사용하면 옵션 항목이 저장된 배열과 길이(length), 사용자가 선택한 옵션의 인덱스 값(selectedIndex)을 반환한다.

document.formName.idName.options[4] // 다섯 번째 항목에 접근
document.formName.idName.options[4].innerText // 화면 표시 내용
document.formName.idName.options[4].value // 서버 전달 값

특정 옵션이 화면에 표시하는 내용에 접근하려면 innerText, 서버에 어떤 값을 전달하는지 알려면 value를 사용한다.

(2) 라디오 버튼과 체크 상자

라디오 버튼은 같은 name을 가진 요소가 여러 개이기 때문에 RadioNodeList라는 노드 리스트 형태로 저장된다. RadioNodeList에는 각 라디오 버튼 요소들과 길이(length), 선택한 버튼의 value 값(value)이 저장된다. 아무 것도 선택되지 않았다면 빈 값("")이 저장된다.

• checked : 라디오 버튼과 체크 상자가 가진 속성. 기본 값은 false이고 해당 항목을 선택하면 true로 바뀐다.

  document.formName.contact[0].checked

 

3. 기타 내용 정리

---

• select() : 사용자가 기존에 입력한 값을 선택한다.
• focus() : 텍스트 필드 안에 커서를 가져다 놓는다.
• HTML5 <input> 태그의 유형과 속성 : HTML5에서 새로 추가된 유형과 속성을 사용해서 자바스크립트 대신 필드 값을 체크할 수 있다. (https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input)