HTML DOM Input Week 객체 완벽 가이드 – 속성, 메서드, 실전 예제

HTML DOM Input Week 객체는 HTML에서 type="week"로 지정된 <input> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트로 주(week) 단위 날짜 입력 필드를 동적으로 생성하고 제어할 수 있습니다.

문법(Syntax)

다음은 Input Week 객체를 생성하는 기본 문법입니다.

type이 Week인 <input> 요소 생성하기:

var weekObject = document.createElement("INPUT");
weekObject.type = "week";

주요 속성(Attributes)

weekObject에서 사용할 수 있는 주요 속성은 다음과 같습니다.

속성	설명
autocomplete	week 필드의 autocomplete 속성 값을 정의합니다.
autofocus	페이지가 처음 로드될 때 week 필드에 자동으로 포커스를 설정할지 여부를 정의합니다.
defaultValue	week 필드의 기본값을 설정하거나 반환합니다.
disabled	week 필드의 비활성화/활성화 여부를 정의합니다.
form	week 필드를 포함하고 있는 상위 폼(form)에 대한 참조를 반환합니다.
max	week 필드의 max 속성 값을 설정하거나 반환합니다.
min	week 필드의 min 속성 값을 설정하거나 반환합니다.
name	week 필드의 name 속성 값을 정의합니다.
readOnly	week 필드가 읽기 전용인지 여부를 정의합니다.
required	폼을 제출하기 위해 week 필드 입력이 필수인지 여부를 정의합니다.
step	week 필드의 step 속성 값을 정의합니다.
type	week 필드의 폼 요소 유형(type)을 반환합니다.
value	week 필드의 value 속성 값을 정의합니다.

주요 메서드(Methods)

Input Week 객체에서 사용할 수 있는 메서드는 다음과 같습니다.

메서드	설명
stepDown()	week 필드의 값을 지정한 주(週) 수만큼 감소시킵니다.
stepUp()	week 필드의 값을 지정한 주 수만큼 증가시킵니다.

예제

다음은 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">Examination Week:
<input type="week" id="WeekSelect" value="2019-W36">
</label>
<input type="button" onclick="showExamination()" value="What exams are in this week? ">
<div id="divDisplay"></div>
</fieldset>
</form><script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function showExamination() {
        divDisplay.textContent = 'Examinations: '+inputWeek.form.id;
    }
</script>
</body>
</html>

실행 결과

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

'What exams are in this week?' 버튼을 클릭하기 전 화면:

HTML DOM Input Week 객체 완벽 가이드 – 속성, 메서드, 실전 예제

'What exams are in this week?' 버튼을 클릭한 후 화면:

HTML DOM Input Week 객체 완벽 가이드 – 속성, 메서드, 실전 예제

버튼을 클릭하면 form 속성을 통해 week 입력 필드가 속한 폼의 id(여기서는 "Mid-Term")가 화면에 표시되는 것을 확인할 수 있습니다. 이처럼 Input Week 객체를 사용하면 주 단위 입력 필드와 폼 간의 관계를 손쉽게 다룰 수 있습니다.