まくまくHTML/CSSノート
入力必須の入力フォームを指定する(required 属性)
2017-12-10
入力フォームの要素に、required 属性を指定しておくと、その要素が入力必須であることを示すことができます。

下記のサンプルでは、先頭の2つの要素に 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;
}

デモ

デモページを開く

CSS の ::before::after といった疑似要素と組み合わせて使用することで、自動的に required な入力フィールドに「必須」というテキストを付加をしたくなるところですが、置換要素 (replaced elements) である input 要素は、::before::after などの疑似要素と組み合わせて使用することができません。 素直に label 要素内のテキストに「必須」という文字列を含めてしまうのがよいでしょう。
2017-12-10