HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのnovalidate属性とformnovalidate属性の違いを徹底解説！使い分けのポイントとは？

HTMLには、フォーム送信時に入力内容の検証（バリデーション）をスキップするための属性が2つ用意されています。それがnovalidate属性とformnovalidate属性です。どちらも「検証を回避する」という目的は同じですが、適用対象と動作のタイミングが異なります。

novalidate属性は<form>要素自体に指定し、フォーム全体の入力チェックを無効化します。一方、formnovalidate属性はtype="submit"のボタンに指定する属性で、そのボタンが押された場合のみ検証を行わずにフォームを送信できます。

HTML novalidate属性とは

novalidate属性は、フォーム送信時に入力値の検証を行わないことを示すための属性です。真偽値（Boolean）属性なので、記述するだけで有効になります。

この属性が特に役立つのは、「ユーザーに入力途中の状態を保存させたい」ケースです。バリデーションが無効になっていれば、未入力や形式不正の項目があってもフォームデータを保存でき、後で入力を再開してから改めて送信することが可能になります。

novalidate属性のコード例

以下のコードを実行すると、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属性とは

formnovalidate属性は、1つのフォームに複数の送信ボタンがある場合に特に便利です。この属性を持つボタンがクリックされたときだけ、検証をスキップしてフォームが送信されます。

また、<form>>要素側でnovalidateが指定されていない通常のフォームでも、特定の送信ボタンにformnovalidateを付けることで、そのボタン経由の送信時に限り検証を無効化できます。つまり、ボタン単位で検証のON/OFFを制御できるのが大きな特徴です。

注意：formnovalidate属性はInternet ExplorerおよびSafariではサポートされていません。利用する際は対応ブラウザを確認しましょう。

formnovalidate属性のコード例

以下の例では、通常の「Submit」ボタンでは検証が行われますが、「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>

まとめ：2つの属性の違い

属性名適用対象主な用途
novalidate<form>要素フォーム全体の検証を常時無効化する（下書き保存など）
formnovalidatetype="submit"のボタン特定のボタンでのみ検証をスキップする

このように、novalidateはフォームレベルで恒久的に検証をオフにしたい場合、formnovalidateは「下書きとして送信」「キャンセル扱いで送信」など、ボタンごとに挙動を変えたい場合に使うのが基本です。用途に応じて正しく使い分けましょう。

  1. DirectX11とDirectX12の違いを徹底解説！ゲーマーが知っておくべきポイント

    DirectXは、ソフトウェアがマルチメディアコンテンツを描画し、グラフィックハードウェアと通信するために使用されるAPI（アプリケーションプログラミングインターフェース）のコレクションです。DirectXの主要な構成要素であるDirect3Dは、ソフトウェアとグラフィックスハードウェア間の通信を担っています。ハードウェアは製品ごとに異なるため、標準化された関数や呼び出しのライブラリを通じてグラフィックカードと通信することで、ゲーム開発を大幅にスピードアップできます。これは「ハードウェア抽象化」と呼ばれ、APIの最も重要な役割となっています。車に例えてみましょう。1台の車の運転ができれば、ほぼ

  2. Pythonの「属性」と「プロパティ」の違いとは？仕組みと使い方をわかりやすく解説

    Pythonではすべてがオブジェクト Pythonにおいて、すべてはオブジェクトです。そして、すべてのオブジェクトは属性（アトリビュート）とメソッド（関数）を持ちます。属性とは、名前・年齢・身長などのデータを表す変数によって記述されるものです。 プロパティとは何か プロパティは、__get__、__set__、__delete__ といったゲッター・セッター・デリート用の特殊メソッドを持つ、特別な種類の属性です。Pythonには property デコレーターが用意されており、これを使うことで属性へのゲッター／セッターアクセスを簡単に提供できます。 基本的な仕組みとして、Pythonが次の