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

HTMLのinput要素「required属性」とは？必須入力フィールドの設定方法を解説

HTMLのinput要素におけるrequired属性とは

<input>要素のrequired属性は、フォームの送信前に入力が必須となるフィールド（必須入力欄）を設定するために使用します。required属性が付いたフィールドが空のまま送信ボタンをクリックすると、フォームは送信されず、ブラウザによってエラーメッセージが自動的に表示されます。

required属性は値を持たないブール属性のため、属性名だけで有効になり、テキストやパスワード、電話番号などあらゆるタイプの<input>要素に追加できます。JavaScriptを書かずにクライアント側で入力チェックを行えるため、フォームの使い勝手を向上させるうえで非常に便利です。

基本の書き方

<input required>

required属性の使用例

それでは、<input>要素のrequired属性を実装した具体例を見てみましょう。以下のサンプルコードでは、登録フォームの中から「Id」「Password」「Telephone」の3つのフィールドを必須項目として設定しています。

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..."><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

実行結果

HTMLのinput要素「required属性」とは？必須入力フィールドの設定方法を解説

Id・Password・Telephoneの3つの必須フィールドをすべて未入力のまま送信ボタンをクリックした場合、フォームは送信されません。この例では「Telephone」フィールドが未入力のため、画面上にエラーメッセージが表示され、フォームの送信がブロックされることが確認できます。

HTMLのinput要素「required属性」とは？必須入力フィールドの設定方法を解説

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

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属