HTML DOM Input Email required 속성 – 개념부터 실전 예제까지

HTML DOM의 Input Email required 속성은 이메일 입력 필드(<input type="email">)가 필수 항목인지 여부를 확인하고 설정하는 데 사용됩니다. 이 속성을 활용하면 폼(form) 제출 시 사용자가 반드시 이메일 주소를 입력하도록 강제할 수 있어, 유효성 검사와 사용자 경험 향상에 매우 유용합니다.

문법(Syntax)

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

1. 속성 값 가져오기

현재 required 속성의 불리언(boolean) 값을 반환합니다.

inputEmailObject.required

2. 속성 값 설정하기

required 속성에 불리언 값을 지정하여 필수 여부를 변경할 수 있습니다.

inputEmailObject.required = booleanValue

불리언 값(Boolean Values)

booleanValue에는 다음 두 가지 값을 사용할 수 있습니다.

값	설명
true	폼을 제출하려면 이메일 필드의 입력이 필수입니다.
false	기본값(default)으로, 이메일 필드 입력이 필수가 아닙니다.

실전 예제

다음은 Input Email required 속성을 활용한 간단한 메일 작성 폼 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Email 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>
<h1>Compose Mail</h1>
<fieldset>
<legend>Email-required</legend>
<label for="EmailSelect">Email Id :
<input type="email" id="EmailSelect" required>
</label><br>
<label for="textarea">Message :
<textarea id="textarea" rows="2" cols="20" name="message" placeholder="Type message..."></textarea></label><br>
<input type="button" onclick="showMessage()" value="Send Mail">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    function showMessage() {
        if(inputEmail.required === true && inputEmail.value === '')
            divDisplay.textContent = 'Cannot Send Mail: Email Id Required';
        else
            divDisplay.textContent = 'Mail Sent';
    }
</script>
</body>
</html>

코드 동작 방식

HTML에서 이메일 입력 필드에 required 속성이 직접 지정되어 있어, 자바스크립트로 접근하면 inputEmail.required는 true를 반환합니다.
'Send Mail' 버튼을 클릭하면 showMessage() 함수가 실행됩니다.
required 값이 true인데 이메일 입력란이 비어 있다면 'Cannot Send Mail: Email Id Required'라는 안내 문구가 표시됩니다.
반대로 이메일이 정상적으로 입력되어 있으면 'Mail Sent' 메시지가 출력됩니다.

실행 결과(Output)

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

'Send Mail' 버튼 클릭 시 — 이메일이 비어 있으면 필수 입력 안내가 나타납니다.

HTML DOM Input Email required 속성 – 개념부터 실전 예제까지

이메일 값을 입력한 후 'Send Mail' 버튼 클릭 시 — 메일 전송 성공 메시지가 표시됩니다.

HTML DOM Input Email required 속성 – 개념부터 실전 예제까지

정리

Input Email의 required 속성은 자바스크립트로 읽고 쓸 수 있는 불리언 속성으로, 폼 제출 전 이메일 입력을 강제하는 유효성 검사에 활용됩니다. HTML 마크업 단계에서 required를 추가하거나, DOM 스크립트로 동적으로 필수 여부를 제어할 수 있다는 점이 핵심입니다.