HTML DOM의 Input Search required 속성은 <input type="search"> 요소의 required 속성과 연결된 기능입니다. 이 속성은 폼(form)이 서버로 제출되기 전에 해당 검색 필드를 반드시 채워야 하는지 여부를 설정하거나 반환하는 데 사용됩니다.
required 속성이 적용된 검색 필드가 비어 있는 상태에서 사용자가 폼을 제출하려고 하면, 브라우저는 제출을 차단하고 값을 입력하도록 안내합니다. 이를 통해 데이터 누락 없이 유효한 폼 데이터만 서버로 전송되도록 보장할 수 있습니다.
문법(Syntax)
required 속성을 설정하는 기본 문법은 다음과 같습니다.
searchObject.required = true|false
- true : 폼을 제출하기 전에 검색 필드를 반드시 입력해야 합니다.
- false : 검색 필드는 선택 사항이며, 비워 둔 채로 폼을 제출할 수 있습니다.
예제(Example)
다음 예제는 CHECK 버튼을 클릭했을 때, 해당 검색 필드가 필수 입력 항목인지 여부를 화면에 표시해 줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input search required property</h1>
<p>아래 버튼을 클릭하여 위 필드가 필수 입력인지 확인해 보세요</p>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" required>
<input type="submit">
</form>
<br>
<button onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
var Req=document.getElementById("SEARCH1").required;
if(Req==true)
document.getElementById("Sample").innerHTML="제출 전에 반드시 검색 필드를 입력해야 합니다";
else
document.getElementById("Sample").innerHTML="검색 필드는 선택 사항이며 비워 둘 수 있습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHECK 버튼을 클릭한 경우
required 속성이 true로 설정된 상태에서 아무 값도 입력하지 않고 submit 버튼을 클릭하면, 브라우저가 폼 제출을 막고 필드를 채우라는 경고 메시지를 표시합니다.
정리
required 속성은 별도의 자바스크립트 유효성 검사 코드 없이도 HTML 표준만으로 필수 입력 검증을 수행할 수 있게 해주는 편리한 기능입니다. 검색 필드뿐 아니라 텍스트, 이메일 등 다양한 input 타입에 동일하게 적용할 수 있으며, 모든 주요 최신 브라우저에서 지원됩니다.