HTML DOM 입력 텍스트(Input Text) required 속성 완벽 가이드

HTML DOM 입력 텍스트 required 속성이란?

HTML DOM의 입력 텍스트(input text) required 속성은 <input> 요소의 required 어트리뷰트와 연동되는 기능입니다. 이 속성은 폼(form)이 서버로 제출되기 전에 해당 텍스트 필드를 반드시 작성해야 하는지 여부를 설정하거나 조회하는 데 사용됩니다.

즉, required 어트리뷰트가 지정된 텍스트 필드를 사용자가 비워 둔 상태에서 폼을 제출하려고 하면, 브라우저가 자동으로 경고 메시지를 표시하면서 폼 제출을 차단합니다. 덕분에 별도의 유효성 검사 코드를 작성하지 않아도 기본적인 필수 입력 검증을 손쉽게 구현할 수 있습니다.

문법(Syntax)

required 속성을 설정하는 문법은 다음과 같습니다.

textObject.required = true|false

true : 폼을 제출하기 전에 해당 텍스트 필드를 반드시 입력해야 합니다(필수).
false : 해당 텍스트 필드는 선택 사항이며, 비워 둔 채로 폼을 제출할 수 있습니다.

현재 설정값을 읽어오려면 다음과 같이 작성합니다.

var isChecked = textObject.required;

예제

다음은 입력 텍스트 required 속성을 활용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Text required 속성</h1>
<form action="/Sample_page.php">
USERNAME: <input type="text" id="USR" name="user_name" required>
<input type="submit">
</form>
<p>아래 버튼을 클릭하여 위 필드가 필수 입력 항목인지 확인해 보세요.</p>
<button onclick="checkReq()">확인(CHECK)</button>
<p id="Sample"></p>
<script>
    function checkReq() {
        var Req = document.getElementById("USR").required;
        if(Req == true)
            document.getElementById("Sample").innerHTML = "폼을 제출하기 전에 반드시 이 텍스트 필드를 입력해야 합니다";
        else
            document.getElementById("Sample").innerHTML = "이 텍스트 필드는 선택 사항이며 비워 둘 수 있습니다";
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM 입력 텍스트(Input Text) required 속성 완벽 가이드

[확인(CHECK)] 버튼을 클릭한 경우

HTML DOM 입력 텍스트(Input Text) required 속성 완벽 가이드

사용자 이름을 입력하지 않은 상태에서 [제출(Submit)] 버튼을 클릭하면 아래와 같이 경고 메시지가 나타나며 폼이 제출되지 않습니다.

HTML DOM 입력 텍스트(Input Text) required 속성 완벽 가이드

참고 사항

required는 HTML5에서 도입된 불리언(Boolean) 어트리뷰트로, HTML만으로도 선언할 수 있으며 DOM 스크립트를 통해 동적으로 값을 변경하거나 확인할 수도 있습니다. 주요 최신 브라우저(Chrome, Firefox, Edge, Safari 등)에서 모두 지원됩니다.