HTML DOM Input URL 필수(required) 속성 완벽 정리

HTML DOM의 Input URL required 속성은 폼(form)을 제출할 때 URL 입력 필드가 반드시 채워져야 하는지 여부를 결정하는 속성입니다. 이 속성을 활용하면 사용자가 URL을 입력하지 않고 폼을 제출하는 것을 방지할 수 있습니다.

문법(Syntax)

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

1. 불리언 값 반환

inputURLObject.required

2. required 속성 설정

inputURLObject.required = booleanValue

불리언 값(Boolean Values)

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

booleanValue	설명
true	폼을 제출하려면 URL 필드 입력이 필수입니다.
false	기본값으로, URL 필드 입력이 필수가 아닙니다.

예제(Example)

다음은 Input URL required 속성을 활용한 실전 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-required</legend>
<label for="URLSelect">URL:
<input type="url" id="URLSelect" required>
</label><br>
<input type="button" onclick="showMessage()" value="Go">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    function showMessage() {
        if(inputURL.required === true && inputURL.value === '')
            divDisplay.textContent = 'Cannot Redirect: URL is Required';
        else
            divDisplay.textContent = 'Redirecting...';
    }
</script>
</body>
</html>

출력 결과(Output)

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

'Go' 버튼 클릭 시(URL 미입력 상태) —

HTML DOM Input URL 필수(required) 속성 완벽 정리

URL 필드에 값이 입력된 상태에서 'Go' 버튼 클릭 시 —

HTML DOM Input URL 필수(required) 속성 완벽 정리

정리

required 속성은 자바스크립트로 동적으로 읽거나 설정할 수 있어, 런타임 상황에 따라 특정 입력 필드의 필수 여부를 유연하게 제어해야 할 때 매우 유용합니다. HTML 태그에 직접 required를 명시하는 방식과 함께 활용하면 더욱 견고한 폼 유효성 검사 로직을 구현할 수 있습니다.