HTML required 속성으로 필수 입력란 미입력 시 폼 제출 막기

사용자가 필수 입력란을 모두 작성하지 않은 상태에서 폼(form)을 제출하지 못하도록 하려면, 반드시 입력해야 하는 input 요소에 required 속성만 추가하면 됩니다. 별도의 JavaScript 코드 없이 HTML만으로 간단히 구현할 수 있습니다.

사용 예제

<form id="form">
  <input type="text" name="full-name" placeholder="이름" required />
  <input type="text" name="email" placeholder="이메일" required />
  <input type="text" name="phone-number" placeholder="전화번호" />
  <button id="button-submit-form" type="submit">
    폼 제출하기
  </button>
</form>

위 코드에서 이름(full name)과 이메일(email) 입력란에는 required 속성이 적용되어 있습니다. 반면 전화번호(phone number) 입력란에는 해당 속성이 없으므로 선택 사항으로 처리됩니다.

동작 방식

required 속성이 설정된 필드를 비워 둔 채 사용자가 폼 제출하기 버튼을 클릭하면, 폼이 서버로 전송되지 않고 브라우저가 자동으로 다음과 같은 경고 팝업을 표시합니다.

참고 사항

• required 속성은 HTML5 폼 유효성 검사 기능의 일부로, 대부분의 최신 브라우저에서 기본적으로 지원됩니다.
• 경고 메시지는 브라우저 언어 설정에 따라 자동으로 현지화되어 표시됩니다.
• 클라이언트 측 검증만으로는 보안이 완전히 보장되지 않으므로, 서버 측에서도 반드시 입력값 유효성 검사를 함께 수행하는 것이 좋습니다.