HTML의 formnovalidate 속성은 하나의 폼에 제출(submit) 버튼이 두 개 이상 있을 때 특히 유용합니다. 이 속성을 사용하면 특정 제출 버튼을 클릭했을 때만 폼 유효성 검사를 건너뛸 수 있습니다.
formnovalidate 속성이란?
formnovalidate 속성은 <form> 요소의 novalidate 속성을 재정의(override)하는 불리언(Boolean) 속성입니다. novalidate 속성 역시 불리언 속성으로, 폼 태그에 직접 지정하면 해당 폼의 모든 제출 과정에서 유효성 검사가 수행되지 않습니다.
반면 formnovalidate는 개별 제출 버튼에 적용되므로, 일반적인 제출 버튼으로는 유효성 검사를 실행하고, 이 속성이 부여된 버튼으로는 검사 없이 바로 데이터를 전송할 수 있습니다.
브라우저 호환성 주의 사항
참고: formnovalidate 속성은 Internet Explorer와 Safari에서는 지원되지 않습니다. 따라서 해당 브라우저 환경을 고려해야 하는 프로젝트라면 JavaScript 기반의 대체 구현 방안을 함께 준비하는 것이 좋습니다.
사용 예제
다음 코드를 실행하면 formnovalidate 속성의 동작을 직접 확인할 수 있습니다. '유효성 검사 없이 제출' 버튼을 클릭하면 입력값 검증 없이 폼이 그대로 전송됩니다.
<!DOCTYPE html> <html> <head> <title>HTML formnovalidate 속성</title> </head> <body> <form action = "new.php" method = "get"> 순위 <input type = "number" name = "rank"><br> <input type = "submit" value = "제출"><br> <input type = "submit" formnovalidate = "formnovalidate" value = "유효성 검사 없이 제출"> </form> </body> </html>
예제 설명
위 예제에는 두 개의 제출 버튼이 있습니다. 첫 번째 '제출' 버튼을 누르면 number 타입 입력 필드의 유효성 검사가 정상적으로 수행되지만, 두 번째 '유효성 검사 없이 제출' 버튼에는 formnovalidate 속성이 설정되어 있어 어떤 값을 입력하더라도 검증 절차를 거치지 않고 즉시 폼 데이터가 전송됩니다.
이처럼 임시 저장(draft) 기능이나 선택적 입력 폼 등 유효성 검사를 유연하게 처리해야 하는 상황에서 formnovalidate 속성을 활용하면 사용자 경험을 크게 개선할 수 있습니다.