HTML DOM Input Color form 속성 – 색상 입력 필드가 속한 폼 참조하기

개요

HTML DOM에서 Input Color 요소의 form 속성은 해당 색상 선택기(color picker)를 감싸고 있는 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 활용하면 자바스크립트만으로 특정 색상 입력 필드가 어떤 폼에 속해 있는지 손쉽게 확인할 수 있습니다.

구문

form 속성의 기본 문법은 다음과 같습니다.

inputColorObject.form

이 속성은 읽기 전용이며, 반환값은 해당 입력 필드를 포함하고 있는 폼 객체입니다. 만약 색상 입력 필드가 어떤 폼에도 속해 있지 않다면 null이 반환됩니다.

예제

Input Color form 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Color Form</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" >
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay"></div>
<script>
   function getFormID() {
      var inputColor = document.getElementById("Color");
      var divDisplay = document.getElementById("divDisplay");
      divDisplay.textContent = 'Form ID for color input: '+inputColor.form.id;
   }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 화면에 출력됩니다.

'Get Form ID' 버튼을 클릭하기 전 −

HTML DOM Input Color form 속성 – 색상 입력 필드가 속한 폼 참조하기

'Get Form ID' 버튼을 클릭한 후 −

HTML DOM Input Color form 속성 – 색상 입력 필드가 속한 폼 참조하기

버튼을 클릭하면 getFormID() 함수가 실행되어 색상 입력 필드가 속한 폼의 id 값인 'formForColorsInput'이 화면에 표시되는 것을 확인할 수 있습니다.