formnovalidate 속성이란?
HTML5에서는 사용자가 입력한 값이 조건에 맞는지 자동으로 확인하는 유효성 검사(validation) 기능이 기본적으로 활성화되어 있습니다. 하지만 경우에 따라 이 검사를 건너뛴 채 폼을 제출해야 할 때가 있습니다. 예를 들어 임시 저장, 초안 제출, 또는 테스트 목적으로 데이터를 전송할 때 유용합니다.
이럴 때 사용하는 것이 바로 formnovalidate 속성입니다. 이 속성은 불리언(Boolean) 속성으로, 제출(submit) 버튼에 추가하면 해당 버튼을 클릭했을 때 브라우저가 유효성 검사를 수행하지 않고 폼을 그대로 전송합니다.
기본 사용 예제
아래 예제에서는 두 개의 제출 버튼이 있습니다. 첫 번째 버튼은 일반적인 유효성 검사를 수행하고, 두 번째 버튼에는 formnovalidate 속성이 적용되어 검사 없이 즉시 제출됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML formnovalidate attribute</title>
</head>
<body>
<form action="new.php" method="get">
Rank <input type="number" name="rank"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit with no validation">
</form>
</body>
</html>동작 방식 설명
- 첫 번째 버튼(Submit): 숫자 입력 필드의 유효성 검사가 정상적으로 실행됩니다. 잘못된 값이 입력되면 브라우저가 오류 메시지를 표시하며 제출을 막습니다.
- 두 번째 버튼(Submit with no validation):
formnovalidate속성 덕분에 입력값과 관계없이 유효성 검사를 건너뛰고new.php로 데이터가 바로 전송됩니다.
활용 팁
formnovalidate는 반드시<input type="submit">또는<button type="submit">요소에 적용해야 합니다.- 폼 전체에 유효성 검사를 비활성화하려면
<form novalidate>처럼 폼 태그 자체에novalidate속성을 사용할 수도 있습니다. - 서버 측에서도 별도의 유효성 검사를 수행하는 것이 안전합니다. 클라이언트 측 검사만으로는 우회가 가능하기 때문입니다.