HTML DOM Textarea required 속성 – 문법과 예제로 배우는 필수 입력 설정

HTML DOM의 Textarea required 속성은 HTML 문서 내 텍스트 영역(textarea) 요소의 required 속성값을 가져오거나 변경할 때 사용됩니다. required 속성이 true로 설정되면 해당 텍스트 영역은 폼을 제출하기 전에 반드시 값이 입력되어야 하며, 비어 있는 상태로 제출할 경우 브라우저가 이를 허용하지 않습니다.

문법(Syntax)

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

1. required 값 가져오기

object.required

2. required 값 설정하기

object.required = true | false

반환값은 불리언(Boolean) 타입으로, required 속성이 설정되어 있으면 true, 그렇지 않으면 false를 반환합니다.

그럼 실제 예제를 통해 HTML DOM Textarea required 속성이 어떻게 동작하는지 살펴보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<head>
<title>DOM Textarea required Property</title>
<style>
    body {
        text-align: center;
    }
    .btn {
        display: block;
        margin: 1rem auto;
        background-color: #db133a;
        color: #fff;
        border: 1px solid #db133a;
        padding: 0.5rem;
        border-radius: 50px;
        width: 20%;
    }
    .show-message {
        font-weight: bold;
        font-size: 1.4rem;
        color: #ffc107;
    }
</style>
</head>
<body>
<h1>DOM Textarea required Property Demo</h1>
<form id="form" method="post" action="">
<fieldset>
<legend>Form </legend>
<textarea rows="5" cols="20" required placeholder="Enter a message"></textarea>
<input type="submit" class="btn" value="Submit Form" onclick="checkRequired()">
</fieldset>
</form>
<div class="show-message"></div>
<script>
    function checkRequired() {
        var textarea = document.querySelector("textarea");
        if (textarea.value === "") {
            document.querySelector(".show-message").innerHTML = "Please enter a message!";
        }
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같이 텍스트 영역과 제출 버튼이 포함된 폼이 화면에 나타납니다.

HTML DOM Textarea required 속성 – 문법과 예제로 배우는 필수 입력 설정

이제 텍스트 영역에 아무 내용도 입력하지 않은 상태에서 "Submit Form" 버튼을 클릭해 보세요.

HTML DOM Textarea required 속성 – 문법과 예제로 배우는 필수 입력 설정

텍스트 영역에 required 속성이 설정되어 있기 때문에, 메시지를 입력하지 않고 폼을 제출하려 하면 "Please enter a message!"라는 경고 메시지가 화면에 표시되며 폼 제출이 차단됩니다.

정리

Textarea required 속성은 자바스크립트를 통해 텍스트 영역의 필수 입력 여부를 동적으로 확인하거나 제어할 수 있는 유용한 기능입니다. 사용자가 반드시 작성해야 하는 입력란을 만들 때 활용하면 폼 유효성 검사를 보다 간편하게 구현할 수 있습니다.