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

HTMLのinput要素placeholder属性とは?基本構文と実装例をわかりやすく解説

<input>要素の placeholder 属性は、入力欄にヒント(プレースホルダー)を設定するための属性です。このヒントは、その入力欄にどのような内容を入力すべきかを短く説明するものであり、ユーザーがWebページを訪れた際に入力欄内に表示されます。

この属性は、次の入力タイプで使用できます。text、url、search、email、password、tel です。なお、placeholder属性はHTML5で新たに導入されたものです。

基本構文

<input placeholder="placeholder_text">

ここで指定する placeholder_text は短いヒント(プレースホルダー)であり、ユーザーがそのWebページを開いたときに入力欄に表示されるテキストです。

それでは、<input> 要素のplaceholder属性を実装した具体的な例を見てみましょう。

実装例

<!DOCTYPE html>
<html>
<body>
<h2>登録フォーム</h2>
<form action="" method="get">
   ID − <input type="text" name="id" placeholder="ユーザーIDを入力してください..."><br>
   パスワード − <input type="password" name="pwd" placeholder="パスワードを入力してください..."><br>
   生年月日 − <input type="date" name="dob"><br>
   電話番号 − <input type="tel" name="tel" placeholder="電話番号を入力してください..."><br>
   メールアドレス − <input type="email" name="email" placeholder="メールアドレスを入力してください..."><br><br>
   <button type="submit" value="Submit">送信</button>
</form>
</body>
</html>

出力結果

HTMLのinput要素placeholder属性とは?基本構文と実装例をわかりやすく解説

上記の例では、複数の入力フィールドを持つフォームを作成しています。

<form action="" method="get">
   ID − <input type="text" name="id" placeholder="ユーザーIDを入力してください..."><br>
   パスワード − <input type="password" name="pwd" placeholder="パスワードを入力してください..."><br>
   生年月日 − <input type="date" name="dob"><br>
   電話番号 − <input type="tel" name="tel" placeholder="電話番号を入力してください..."><br>
   メールアドレス − <input type="email" name="email" placeholder="メールアドレスを入力してください..."><br><br>
   <button type="submit" value="Submit">送信</button>
</form>

各フィールドにはすべてplaceholder属性が設定されています。たとえば、パスワード入力欄の場合は次のように記述します。

<input type="password" name="pwd" placeholder="パスワードを入力してください...">

ポイントは、placeholder属性を追加して短いヒントを設定するだけというシンプルさです。

placeholder="パスワードを入力してください..."

補足:placeholder属性を使う際の注意点

placeholder属性は便利ですが、以下の点に注意して使用しましょう。

  • ラベルの代わりにはしない: プレースホルダーは入力を始めると消えてしまうため、アクセシビリティの観点からも <label> 要素と併用することが推奨されています。
  • 色のコントラストに注意: プレースホルダーの文字色が薄すぎると視認性が低下します。CSSの ::placeholder 疑似要素でスタイルを調整できます。
  • 長文にしない: ヒントは短く簡潔にまとめることで、ユーザーが素早く理解できるようになります。
  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

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

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