This page was translated from English by the community.Learn more and join the MDN Web Docs community.
HTMLFormElement.elements
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTMLFormElement 의HTMLFormElement.elements 속성은<form> 요소에 포함된 모든 컨트롤 폼을 나열하는HTMLFormControlsCollection을 반환합니다.
HTMLFormElement.length 속성을 독립적으로 사용하면 컨트롤 폼의 수만 얻을 수 있습니다.
인덱스나 요소의name 또는id 속성을 사용하여 반환된 컬렉션의 특정 컨트롤 폼에 액세스할 수 있습니다.
HTML 5 이전에는HTMLFormControlsCollection을 기반으로 하는HTMLCollection을 반환하였습니다.
참고 :문서의<form> 속성을 사용해도 마찬가지로 주어진 문서에 포함된 모든 컨트롤 폼의 목록을 얻을 수 있습니다.
값
이미지가 아닌 모든 컨트롤을 포함한HTMLFormControlsCollection를 가집니다. 이것은 라이브 컬렉션입니다. 컨트롤 폼이 컬렉션에 추가되거나 제거되면 이 컬렉션은 변경 사항을 반영하도록 업데이트됩니다.
반환된 컬렉션의 컨트롤 폼은 사전 순서, 깊이 우선 트리 순회를 따라 양식에 나타나는 순서와 동일합니다. 이것을트리 오더라고 합니다.
다음 요소들만 반환합니다:
<button><fieldset><input>(단,type이"image"인 경우는 역사적으로 다른 기능을 위해 작동했기 때문에 생략됩니다.)<object><output><select><textarea>
예제
빠른 구문 예제
이 예제에서는 컨트롤 폼 목록을 얻는 방법과 인덱스 및 이름 또는 ID별로 해당 요소에 액세스하는 방법을 알아봅니다.
<form> <input type="text" name="username" /> <input type="text" name="full-name" /> <input type="password" name="password" /></form>var inputs = document.getElementById("my-form").elements;var inputByIndex = inputs[0];var inputByName = inputs["username"];컨트롤 폼에 액세스하기
이 예제에서는 폼의 요소 목록을 가져온 다음 목록을 반복하면서text 유형의<input> 요소를 찾아 일부 형식의 처리를 수행할 수 있도록 합니다.
var inputs = document.getElementById("my-form").elements;// Iterate over the form controlsfor (i = 0; i < inputs.length; i++) { if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") { // Update text input inputs[i].value.toLocaleUpperCase(); }}폼 컨트롤 비활성화
var inputs = document.getElementById("my-form").elements;// Iterate over the form controlsfor (i = 0; i < inputs.length; i++) { // Disable all form controls inputs[i].setAttribute("disabled", "");}명세서
| Specification |
|---|
| HTML # dom-form-elements-dev |
브라우저 호환성
같이 보기
- The HTML element implementing this interface:
<form>.