Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML novalidate와 formnovalidate 속성의 차이점 완벽 정리

HTML에서 novalidateformnovalidate 속성은 폼(form)의 유효성 검사를 건너뛰기 위해 사용됩니다. novalidate 속성은 <form> 요소 자체에 적용되어 해당 폼의 유효성 검사를 비활성화합니다. 반면 formnovalidate 속성은 제출(submit) 버튼에 적용되며, 폼에 설정된 유효성 검사 규칙을 개별적으로 재정의(override)하여 검사 없이 폼을 제출할 수 있게 합니다.

novalidate 속성은 불리언(Boolean) 속성으로, 이 속성을 사용하면 폼 제출 시 유효성 검사가 수행되지 않습니다. formnovalidate 속성은 하나의 폼에 여러 개의 제출 버튼이 있을 때 특히 유용하게 활용됩니다.

HTML novalidate 속성이란?

HTML의 novalidate 속성은 폼이 제출될 때 유효성 검사를 수행하지 않도록 지정하는 데 사용됩니다. 이 역시 불리언 속성으로, 사용자가 폼 작성 중간에 내용을 임시 저장해야 하는 상황에서 매우 유용합니다. 유효성 검사가 비활성화되어 있으면 사용자는 필수 입력 항목을 모두 채우지 않아도 폼을 저장할 수 있고, 나중에 이어서 작성한 뒤 최종 제출할 수 있습니다.

HTML novalidate와 formnovalidate 속성의 차이점 완벽 정리

예제

다음 코드를 실행하면 HTML에서 novalidate 속성을 사용하는 방법을 직접 확인할 수 있습니다. 아래 예제에서 <input type="number"> 필드에 숫자가 아닌 텍스트를 입력해도 오류 메시지가 표시되지 않습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML novalidate attribute</title>
   </head>

   <body>
      <form action = "" method = "get" novalidate>
         Team Name<br><input type = "name" name = "tname"><br>
         Team Rank<br><input type = "number" name = "trank"><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

HTML formnovalidate 속성이란?

HTML의 formnovalidate 속성은 하나의 폼에 여러 개의 제출 버튼이 존재할 때 유용합니다.
formnovalidate 속성은 <form> 요소에 설정된 novalidate 속성의 동작을 재정의합니다. 즉, 폼 전체에는 유효성 검사를 유지하면서 특정 버튼을 통한 제출에 한해서만 검사를 생략할 수 있습니다.
참고: formnovalidate 속성은 Internet Explorer와 Safari에서는 지원되지 않습니다.

HTML novalidate와 formnovalidate 속성의 차이점 완벽 정리

예제

다음 코드를 실행하면 HTML에서 formnovalidate 속성을 사용하는 방법을 학습할 수 있습니다. "Submit with no validation(유효성 검사 없이 제출)" 버튼을 클릭하면 해당 제출 시에는 폼의 유효성 검사가 수행되지 않습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML formnovalidate attribute</title>
   </head>

   <body>
      <form action = "" 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>