formnovalidate属性

input要素のformnovalidate属性は、フォームの入力内容の検証を無効にするかどうかを指定する属性。

ブラウザ対応

構文

<input formnovalidate>

formnovalidate属性は、論理属性である。

formnovalidate属性が存在すると、フォームの入力内容の検証を無効にする。

要点

  • formnovalidate属性は、フォームの入力内容の検証を無効にするかどうかを指定する属性である。
  • 例えば、入力必須の入力欄が空白でないかどうかの検証を、無効にできる。
  • input要素にformnovalidate属性を指定した場合、input要素が所属するform要素novalidate属性よりも優先される。
  • formnovalidate属性は、HTML5にて新たに導入された属性である。

formnovalidate属性に対応しているinput要素のタイプ(type属性値)

サンプルコード

送信ボタン

<p><input type="submit" value="送信" formnovalidate></p>

画像ボタン

<p><input type="image" src="sample.png" alt="送信" formnovalidate></p>

サンプル

HTMLソースコード

<form action="sample-input.php" method="post" target="_blank">
	<p>
		<label>
			1行テキスト入力欄:
			<input name="sampleName" required>
		</label>
	</p>
	<p>
		送信ボタン(formnovalidate属性あり): <input type="submit" formnovalidate>
	</p>
	<p>
		送信ボタン(formnovalidate属性なし): <input type="submit">
	</p>
	<p>
		画像ボタン(formnovalidate属性あり): <input type="image" src="input-type-image.png" formnovalidate>
	</p>
	<p>
		画像ボタン(formnovalidate属性なし): <input type="image" src="input-type-image.png">
	</p>
</form>

実際の表示

送信ボタン(formnovalidate属性あり):

送信ボタン(formnovalidate属性なし):

画像ボタン(formnovalidate属性あり):

画像ボタン(formnovalidate属性なし):

サンプルの動作について

1行テキスト入力欄が空欄の状態で、formnovalidate属性を指定していないボタンをクリックすると、テキスト入力欄の周辺に、入力を促すメッセージが現れる。