HTML DOM Input Week form 속성 – 포함된 폼의 참조 반환하기

HTML DOM의 Input Week form 속성은 <input type="week"> 요소를 감싸고 있는 상위 폼(form) 객체에 대한 참조를 반환합니다. 이 속성을 활용하면 특정 주(week) 입력 필드가 어떤 폼에 속해 있는지 확인하거나, 해당 폼의 id 등 다양한 정보에 접근할 수 있습니다.

구문(Syntax)

form 속성을 사용하는 기본 문법은 다음과 같습니다.

form 객체에 대한 참조를 반환하는 경우:

inputWeekObject.form

예제

이제 Input Week form 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Week form</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form id="Mid-Term">
<fieldset>
<legend>Week-form</legend>
<label for="WeekSelect">시험 주간:
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="showExamination()" value="이번 주 시험은 무엇인가요?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputWeek = document.getElementById("WeekSelect");
   function showExamination() {
      divDisplay.textContent = '시험: '+inputWeek.form.id;
   }
</script>
</body>
</html>

출력 결과

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

'이번 주 시험은 무엇인가요?' 버튼을 클릭하기 전 화면:

HTML DOM Input Week form 속성 – 포함된 폼의 참조 반환하기

'이번 주 시험은 무엇인가요?' 버튼을 클릭한 후 화면:

HTML DOM Input Week form 속성 – 포함된 폼의 참조 반환하기

버튼을 클릭하면 showExamination() 함수가 실행되고, inputWeek.form.id를 통해 week 입력 필드가 속한 폼의 id인 "Mid-Term"이 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 form 속성은 자바스크립트에서 입력 요소와 폼 간의 관계를 동적으로 확인하고 활용하는 데 유용하게 사용됩니다.