入力必須の入力フォームを指定する（required 属性）

下記のサンプルでは、先頭の２つの要素に required 属性を指定し、そのフィールドの入力が必須であることを Web ブラウザに知らせています。 required 属性が指定された入力要素の振る舞いがどうなるかは、Web ブラウザの実装によって異なりますが、例えば、マウスカーソルを重ねたときにポップアップメッセージを表示する、必須フィールドの入力を行わずに Submit ボタンを押したときにエラーメッセージを表示する、といった実装が一般的のようです。

<form>
  <label>お名前: <input type="text" required></label>（必須）<br>
  <label>メール: <input type="email" required></label>（必須）<br>
  <label>電話番号: <input type="tel"></label><br>
  <input type="submit" value="送信する">
  <input type="reset" value="リセット">
</form>

下記のデモで、入力フィールドにマウスカーソルを置いたり、何も入力せずに送信ボタンを押したりしてみてください。

デモ

デモページを開く

required 属性が指定された要素に「必須」の表示を行う

required 属性が付加された要素は、CSS の疑似クラス :required で選択することができます。 逆に、required 属性が付加されていない要素は、疑似クラス :optional で選択することができます。 下記のサンプルでは、required 属性のついた input 要素の背景色を変更しています。

input:required {
  background: pink;
}

デモ

デモページを開く