【HTML Living Standard】required属性の使い方
required属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
requiredプロパティは、HTMLフォームの入力要素（<input>、<select>、<textarea>など）において、ユーザーがそのフィールドに値を入力することを必須とするかどうかを保持するプロパティです。このプロパティが指定されたフィールドは、フォームを送信する前に必ず値が入力されている必要があります。
具体的には、ユーザーが必須フィールドを空のままフォームを送信しようとすると、ウェブブラウザが自動的にそのフィールドが未入力であることを検出し、エラーメッセージを表示してフォームの送信をブロックします。これにより、フォームの必須項目が確実に埋められるようになり、データの完全性を高めることができます。
このプロパティは、type属性がtext、search、url、tel、email、password、date、month、week、time、datetime-local、number、checkbox、radio、fileなどの<input>要素や、<select>要素、<textarea>要素に適用可能です。例えば、ユーザー登録フォームでメールアドレスの入力を必須にしたい場合などに利用されます。
requiredプロパティは、ユーザーインターフェースにおける入力のガイドとして機能し、ユーザーエクスペリエンスを向上させます。ただし、このプロパティによる検証はクライアントサイド（ブラウザ側）で行われるため、悪意のあるユーザーによる検証回避の可能性も考慮し、サーバーサイド（ウェブサーバー側）でのデータ検証も併せて実装することが、セキュリティとデータ整合性を確保するために非常に重要です。
構文(syntax)
1<input type="text" name="username" required>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML required属性で入力必須にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML required 属性のサンプル</title> 7</head> 8<body> 9 <!-- 10 「required」属性は、フォームの入力フィールドが必須であることを指定します。 11 この属性を持つフィールドが空の場合、フォームは送信されず、 12 ブラウザによってエラーメッセージが表示されます。 13 以下のフォームで、必須フィールドを空のまま「送信」ボタンを押してみてください。 14 --> 15 <form action="#" method="post"> 16 <!-- この入力フィールドは「required」属性がないため、入力は任意です。 --> 17 <label for="name">名前 (任意):</label><br> 18 <input type="text" id="name" name="name"><br><br> 19 20 <!-- この入力フィールドは「required」属性があるため、入力が必須です。 --> 21 <label for="email">メールアドレス (必須):</label><br> 22 <input type="email" id="email" name="email" required><br><br> 23 24 <!-- 「textarea」要素にも「required」属性を適用できます。 --> 25 <label for="message">メッセージ (必須):</label><br> 26 <textarea id="message" name="message" rows="4" required></textarea><br><br> 27 28 <!-- 「select」要素にも「required」属性を適用できます。 29 最初のオプションのvalueを空にすることで、初期状態での選択を必須にします。 --> 30 <label for="country">国 (必須):</label><br> 31 <select id="country" name="country" required> 32 <option value="">--選択してください--</option> 33 <option value="jp">日本</option> 34 <option value="us">アメリカ</option> 35 <option value="ca">カナダ</option> 36 </select><br><br> 37 38 <button type="submit">送信</button> 39 </form> 40</body> 41</html>
HTMLのrequired属性は、Webフォームの入力フィールドを「必須項目」として指定するための属性です。この属性を付与された入力フィールドは、ユーザーがデータを入力せずにフォームを送信しようとすると、ブラウザが自動的にエラーメッセージを表示し、フォームの送信をブロックします。これにより、必要な情報が確実に入力されるように促すことができます。
required属性は、<input>、<textarea>、<select>などのフォーム関連要素に適用できます。この属性自体は値を持ちません（引数なし）し、特定の値を返すこともありません（戻り値なし）。属性が存在するだけで「必須」の状態を示します。
サンプルコードでは、まず「名前」の入力フィールドにはrequired属性がないため、入力は任意です。一方、「メールアドレス」の<input type="email">フィールドと「メッセージ」の<textarea>フィールドにはrequired属性が付与されており、これらは必須入力となります。もしこれらのフィールドが空のまま「送信」ボタンを押すと、ブラウザが警告を表示し、フォームは送信されません。
また、「国」を選択する<select>要素にもrequired属性が適用されています。最初の<option>要素のvalue属性を空に設定することで、ユーザーが「--選択してください--」の状態のままでは送信できず、具体的な国を選択するよう促すことができます。このようにrequired属性を活用することで、ユーザーエクスペリエンスを向上させ、必要なデータ収集を確実に行うフォームを作成できます。
「required」属性は、フォームの入力フィールドが必須であることをブラウザに伝え、未入力時の送信を自動で阻止します。これはユーザーの利便性を高めるクライアントサイドの機能であり、フォームの使いやすさに役立ちます。しかし、セキュリティの観点からは、これだけで入力データの安全性が保証されるわけではありません。悪意のあるユーザーはブラウザ側の検証を迂回できるため、必ずサーバーサイドでも入力データの検証を厳重に行ってください。また、「select」要素に「required」を適用する際は、最初の「option」タグの「value」属性を空に設定することで、初期状態での選択を必須にできます。ユーザーに必須項目であることを分かりやすく伝えるため、CSSなどで視覚的なヒント（例：アスタリスク）を加えることを推奨します。
HTMLのrequired属性で入力必須にする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>required属性のサンプル</title> 6</head> 7<body> 8 <h1>必須入力フィールドの例</h1> 9 10 <form action="#" method="post"> 11 <!-- 'required'属性を追加すると、この入力フィールドはフォーム送信前に値の入力が必須になります。 --> 12 <label for="username">ユーザー名:</label><br> 13 <input type="text" id="username" name="username" required><br><br> 14 15 <!-- メールアドレスの入力も'required'属性で必須に設定しています。 --> 16 <label for="email">メールアドレス:</label><br> 17 <input type="email" id="email" name="email" required><br><br> 18 19 <!-- この入力フィールドには'required'属性がないため、入力は任意です。 --> 20 <label for="optional_info">任意情報:</label><br> 21 <input type="text" id="optional_info" name="optional_info"><br><br> 22 23 <input type="submit" value="送信"> 24 </form> 25</body> 26</html>
HTMLのrequired属性は、フォームの入力フィールドを必須項目として設定するために使用される真偽値属性です。この属性を<input>, <select>, <textarea>といった要素に追加することで、ユーザーがそのフィールドに何も入力せずにフォームを送信しようとした際に、ブラウザが自動的にエラーを検知し、フォームの送信をブロックします。これにより、ユーザーは必要な情報の入力を促され、アプリケーション側で最低限のデータが確保されることを期待できます。
サンプルコードでは、「ユーザー名」と「メールアドレス」の入力フィールドにrequired属性が付与されています。例えば、<input type="text" id="username" name="username" required>という記述があるため、ユーザー名フィールドは入力が必須となります。これらのフィールドが空のまま「送信」ボタンをクリックすると、ブラウザがエラーメッセージを表示し、フォームは送信されません。一方で、「任意情報」のフィールドにはrequired属性がないため、このフィールドは未入力のままでもフォームを送信できます。
required属性は、引数を必要とせず、また何かを返す戻り値もありません。この属性自体が存在するかしないかで、その入力フィールドが必須であるかどうかをブラウザに伝えます。これにより、サーバーサイドの処理を待つことなく、ユーザーにとって分かりやすいクライアントサイドでの入力チェックが実現され、ユーザーエクスペリエンスの向上にも貢献します。
required属性は、ユーザーがフォームを送信する前に特定の入力フィールドへの値入力を必須にするHTMLの機能です。これはブラウザが自動的に行うクライアントサイドの検証であり、入力漏れを防ぐのに役立ちます。
しかし、クライアントサイドの検証だけではセキュリティ上不十分であるため、必ずサーバーサイドでも同様の入力チェックを実装してください。悪意のあるユーザーはブラウザの機能を回避できるため、この二重の検証が非常に重要です。
また、required属性自体は、必須項目であることの視覚的な表示（例：赤いアスタリスク）を自動で行いません。ユーザーに分かりやすく伝えるためには、CSSやJavaScriptを組み合わせて表示を補完することをお勧めします。この属性はinput、select、textarea要素に適用可能です。