HTML에서 novalidate 속성을 사용하면 폼(form)을 제출할 때 브라우저가 기본적으로 수행하는 입력값 유효성 검사를 생략하도록 지정할 수 있습니다. 이 속성은 불리언(Boolean) 속성으로, <form> 태그에 추가하기만 하면 되며 별도의 값을 설정할 필요가 없습니다.
novalidate 속성이 적용되면 필수 입력란이 비어 있거나 이메일 형식이 올바르지 않은 경우에도 브라우저가 오류 메시지를 표시하지 않고 그대로 폼을 전송합니다.
novalidate 속성 사용 예제
<!DOCTYPE html> <html> <head> <title>HTML novalidate 속성</title> </head> <body> <form action = "" method = "get" novalidate> 학생 이름<br><input type = "text" name = "sname"><br> 석차<br><input type = "number" name = "rank"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
코드 설명
- <form> 태그에 novalidate 속성을 추가하여 해당 폼 전체의 유효성 검사를 비활성화했습니다.
- 입력 필드에는
type="number"와 같은 제약 조건이 있지만, novalidate가 설정되어 있으므로 잘못된 값이 입력되어도 브라우저가 이를 차단하지 않습니다.
특정 제출 버튼에서만 검사를 생략하는 방법
폼 전체가 아닌 특정 제출 버튼 클릭 시에만 유효성 검사를 건너뛰고 싶다면, 해당 버튼에 formnovalidate 속성을 사용하면 됩니다.
<input type = "submit" value = "임시 저장" formnovalidate>
이처럼 novalidate와 formnovalidate 속성을 활용하면 상황에 따라 유연하게 폼 유효성 검사 동작을 제어할 수 있습니다.