HTML DOM Input Week type 속성 완벽 가이드

HTML DOM에서 Input Week 요소의 type 속성은 해당 입력 필드의 타입을 반환하거나 새로운 값으로 설정할 수 있는 속성입니다. 이 속성을 활용하면 자바스크립트로 특정 입력 요소가 어떤 유형인지 동적으로 확인하거나 변경할 수 있습니다.

구문(Syntax)

type 속성의 기본적인 사용 구문은 다음과 같습니다.

1. 문자열 값 반환하기

inputWeekObject.type

위 구문은 해당 Input Week 객체의 현재 타입을 문자열 형태로 반환합니다.

2. type 속성에 문자열 값 설정하기

inputWeekObject.type = stringValue

위 구문은 지정한 문자열 값으로 입력 요소의 타입을 변경합니다.

설정 가능한 문자열 값(String Values)

stringValue 자리에는 아래 표와 같은 값들을 사용할 수 있습니다.

값	설명
week	입력 타입이 'week'(주 선택)임을 정의합니다.
datetime-local	입력 타입이 'datetime-local'(현지 날짜 및 시간)임을 정의합니다.
checkbox	입력 타입이 'checkbox'(체크박스)임을 정의합니다.
text	입력 타입이 'text'(일반 텍스트)임을 정의합니다.

예제(Example)

아래 예제를 통해 Input Week type 속성이 실제로 어떻게 동작하는지 살펴보겠습니다. 버튼을 클릭하면 해당 입력 필드의 타입이 화면에 출력됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Week type</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>
<fieldset>
<legend>Week-type</legend>
<label for="WeekSelect">Event:
<input type="week" id="WeekSelect">
</label>
<input type="button" onclick="getTypeOfInput()" value="What type of input?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    function getTypeOfInput() {
        divDisplay.textContent = 'Type of input Expected: '+inputWeek.type;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'What type of input?' 버튼을 클릭하기 전 화면 −

HTML DOM Input Week type 속성 완벽 가이드 – 구문과 예제

'What type of input?' 버튼을 클릭한 후 화면 −

HTML DOM Input Week type 속성 완벽 가이드 – 구문과 예제

버튼을 클릭하면 자바스크립트 함수 getTypeOfInput()이 호출되어, 해당 입력 요소의 type 값을 읽어와 div 영역에 'Type of input Expected: week'라는 문구로 출력하는 것을 확인할 수 있습니다. 이처럼 type 속성은 폼 유효성 검사나 동적 UI 처리 시 매우 유용하게 활용됩니다.