HTML DOM의 input FileUpload required 속성은 HTML 문서 내 파일 업로드(file upload) 입력 요소의 required 속성 값을 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 사용자가 반드시 파일을 선택하도록 강제할 수 있어, 폼(form) 제출 시 유효성 검사에 유용합니다.
문법(Syntax)
required 속성의 기본 문법은 다음과 같습니다.
1. required 값 반환하기
object.required
2. required 값 설정하기
object.required = true|false
예제(Example)
아래는 HTML DOM 파일 업로드 required 속성을 실제로 활용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM file upload 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>file upload required Property Example</h1>
<form id="form" method="post" action="">
<fieldset>
<legend >Form </legend>
<input type="file" required>
<input type="submit" class="btn" value="Submit Form" onclick="checkRequired()">
</fieldset>
</form>
<div class="show-message"></div>
<script>
function checkRequired(){
var fileBtn=document.querySelector("input[type='file']");
if(fileBtn.value === ""){
document.querySelector(".show-message").innerHTML = "Please Select a File!";
}
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
파일을 선택하지 않은 상태에서 [Submit Form] 버튼을 클릭하면 아래와 같이 안내 메시지가 표시됩니다.
정리
required 속성은 파일 업로드 필드가 비어 있는 상태로 폼이 제출되는 것을 방지하는 간단하면서도 효과적인 방법입니다. 자바스크립트를 통해 동적으로 true 또는 false 값을 설정하면 상황에 따라 필수 여부를 유연하게 제어할 수 있습니다.