このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“required”属性HTML5で追加

記事Sep.18th, 2020
入力を必須にする属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

required”属性について

required”属性はinput”要素で表される入力欄の入力を必須にします。

required”属性はtype”属性に以下の値が指定されている場合に使用できます。

フォームの送信時にブラウザによって妥当性のチェックが行われる場合には“required”属性が指定された入力欄が未入力の場合は送信できなくなります。

ラジオボタン(type="radio")の場合同一グループに属するラジオボタンのいずれかに“required”属性に指定されていれば入力必須になります。なお、“required”属性を指定したラジオボタンが非選択状態でも同じグループのラジオボタンのいずれかが選択されていればフォームを送信できます。

指定できる値

属性値 説明
required 入力を必須にする

属性値は省略できます。

サンプルコード

属性値を省略
<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>
<fieldset>
<legend>猫が好きですか?</legend>
<p>
<label><input type="radio" name="love" value="好き" required>好き</label>
<label><input type="radio" name="love" value="とても好き">とても好き</label>
<label><input type="radio" name="love" value="愛している">愛している</label>
</p>
</fieldset>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
属性値を省略
あなたの情報

猫が好きですか?

*送信すると入力内容が表示されます。
属性値を省略しない
<form method="post" action="sample-formtag6.php" target="_blank">
<fieldset>
<legend>あなたの情報</legend>
<p><label>ペンネーム: <input type="text" name="name" required="required"></label></p>
<p><label>メールアドレス:<input type="email" name="email"></label></p>
<p><label>ウェブサイト:<input type="url" name="website"></label></p>
<fieldset>
<legend>猫が好きですか?</legend>
<p>
<label><input type="radio" name="love" value="好き" required="required">好き</label>
<label><input type="radio" name="love" value="とても好き">とても好き</label>
<label><input type="radio" name="love" value="愛している">愛している</label>
</p>
</fieldset>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク