HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。

required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。

構文（シンタックス）

required属性の基本的な構文は以下の通りです。

<tagname required></tagname>

サンプルコード

ここでは、HTMLのrequired属性を使用した具体的な例を見てみましょう。以下のコードでは、ドロップダウンリスト（select要素）にrequired属性を設定し、科目が選択されていない状態ではフォームを送信できないようにしています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML required属性のデモ</h1>
<p>好きな科目を選択してください：</p>
<form method="post">
<select required>
<option value="">未選択</option>
<option value="Physics">物理</option>
<option value="Chemistry">化学</option>
<option value="Biology">生物</option>
</select>
<input type="submit" value="送信" class="btn">
</form>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような画面になります。

HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

ドロップダウンリストから何も科目を選択せずに「送信」ボタンをクリックしてみてください。

HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

すると、ブラウザ側のバリデーション機能により「このフィールドに入力してください」というエラーメッセージが表示され、フォームの送信がキャンセルされます。これがrequired属性による必須入力チェックの動作です。

まとめ

required属性を使えば、追加のスクリプトなしで必須項目のチェックを実装できます。ユーザー体験を損なわないよう、placeholderやlabelと組み合わせて、どの項目が必須なのかを明示しておくこともおすすめです。

  1. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動

  2. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次