HTML DOM Input Week required 속성 완벽 정리

HTML DOM의 Input Week required 속성은 폼을 제출할 때 주(week) 입력 필드를 반드시 설정해야 하는지 여부를 결정합니다. 이 속성을 활용하면 사용자가 특정 주 값을 반드시 선택하도록 강제하는 유효성 검사를 간단하게 구현할 수 있습니다.

문법(Syntax)

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

1. 불리언 값 반환

inputWeekObject.required

현재 required 속성이 설정되어 있는지 여부를 true 또는 false로 반환합니다.

2. required 속성 설정

inputWeekObject.required = booleanValue

required 속성에 불리언 값을 직접 할당하여 필수 여부를 동적으로 변경할 수 있습니다.

불리언 값(Boolean Values)

booleanValue에 사용할 수 있는 값은 다음과 같습니다.

booleanValue	설명
true	폼을 제출하려면 주 필드 설정이 필수입니다.
false	기본값이며, 주 필드 설정이 필수가 아닙니다.

예제(Example)

다음은 Input Week required 속성을 활용한 실제 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Week required</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-required</legend>
<label for="WeekSelect">Examination Week:
<input type="week" id="WeekSelect" required>
</label>
<input type="button" onclick="confirmWeek()" value="Confirm Week">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    divDisplay.textContent = 'Week Input Required: '+inputWeek.required;
    function confirmWeek() {
        if(inputWeek.value === '')
            divDisplay.textContent += ', Choose a valid Week. ';
        else
            divDisplay.textContent = 'Week Confirmed: '+inputWeek.required;
    }
</script>
</body>
</html>

코드 설명

HTML에서 <input type="week"> 요소에 required 속성이 추가되어 있어 해당 필드는 필수 입력 항목이 됩니다.
페이지가 로드되면 자바스크립트가 inputWeek.required 값을 읽어 화면에 표시합니다.
'Confirm Week' 버튼을 클릭하면 confirmWeek() 함수가 실행되어, 값이 비어 있으면 유효한 주를 선택하라는 안내 메시지를 출력하고, 값이 설정되어 있으면 확인 메시지를 표시합니다.

실행 결과(Output)

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

1. 'Confirm Week' 버튼 클릭 시

주 필드가 비어 있는 상태에서 버튼을 클릭하면 required 속성이 true로 설정되어 있기 때문에 유효한 주를 선택하라는 메시지가 함께 표시됩니다.

HTML DOM Input Week required 속성 완벽 정리

2. 주 필드에 값이 설정된 후 'Confirm Week' 버튼 클릭 시

사용자가 유효한 주 값을 선택한 뒤 버튼을 클릭하면 'Week Confirmed'라는 확인 메시지가 출력됩니다.

HTML DOM Input Week required 속성 완벽 정리

정리

HTML DOM의 Input Week required 속성은 자바스크립트만으로 주 입력 필드의 필수 여부를 읽고 설정할 수 있는 편리한 기능입니다. HTML 마크업 단계에서 required 속성을 지정하거나, 자바스크립트로 true/false 값을 동적으로 할당하여 폼 유효성 검사 로직을 유연하게 구성할 수 있습니다.