“form”要素~“novalidate”属性

“novalidate”属性について

“novalidate”属性はフォームの送信時に入力内容の妥当性をチェックしないことを指示します。

“novalidate”属性が指定されていない場合はブラウザにより入力内容の妥当性がチェックされ、入力必須の項目が未入力になっていないかや、正しい形式で入力されているかなどがチェックされます。

フォームの送信ボタンとなる“button”要素や“input”要素に“formnovalidate”属性が指定されている場合は“formnovalidate”属性が優先されます。

指定できる値

属性値は省略できます。

サンプルコード

<form method="post" action="sample-formtag6.php" target="_blank" novalidate>

<fieldset>

<legend>あなたの情報</legend>
<p><label>ペンネーム：<input type="text" name="name" required></label></p>
<p><label>メールアドレス：<input type="email" name="email"></label></p>
<p><label>ウェブサイト：<input type="url" name="website"></label></p>
<p><label>猫が好きです：<input type="checkbox" name="love" required></label></p>

</fieldset>
<p><input type="submit" value="登録する"></p>

</form>

あなたの情報

ペンネーム：

メールアドレス：

ウェブサイト：

猫が好きです：

＊送信すると入力内容が表示されます。

以下のフォームは“novalidate”属性が指定されていないため、未入力の項目や書式が不正な項目がないかがチェックされます。

<form method="post" action="sample-formtag6.php" target="_blank">

<fieldset>

<legend>あなたの情報</legend>
<p><label>ペンネーム：<input type="text" name="name" required></label></p>
<p><label>メールアドレス：<input type="email" name="email"></label></p>
<p><label>ウェブサイト：<input type="url" name="website"></label></p>
<p><label>猫が好きです：<input type="checkbox" name="love" required></label></p>

</fieldset>
<p><input type="submit" value="登録する"></p>

</form>

あなたの情報

ペンネーム：

メールアドレス：

ウェブサイト：

猫が好きです：

＊送信すると入力内容が表示されます。