“input”要素~“required”属性

“required”属性について

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

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

• “text”
• “search”
• “url”
• “tel”
• “email”
• “password”
• “date”
• “month”
• “week”
• “time”
• “datetime-local”
• “number”
• “checkbox”
• “radio”

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

ラジオボタン(“type="radio"”)の場合同一グループに属するラジオボタンのいずれかに“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>

属性値を省略

あなたの情報

ペンネーム：

メールアドレス：

ウェブサイト：

猫が好きですか？

好き とても好き 愛している

送信する

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