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

HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。

HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

記述例

以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。

<!DOCTYPE html>
<html>
   <body>
      <h2>Register</h2>
      <form action="/new.php">
         <input type="text" placeholder="Student UserName" name="name"/><br>
         <input type="password" placeholder="Password" name="password"> <br><br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

placeholder属性を使う際のポイント

  • 入力例の案内に最適： ユーザーが入力を始めるとヒントは消えるため、「半角英数字で入力」のような書式の案内向けに便利です。
  • ラベルの代わりにはしない： 項目名自体は<label>タグで別途表示し、placeholderだけに頼らないことがアクセシビリティの観点から推奨されます。
  • デザインのカスタマイズも可能： CSSの::placeholder擬似要素を使えば、ヒント文字の色やフォントサイズなどを自由に調整できます。
  • 幅広いブラウザ対応： Chrome、Firefox、Safari、Edgeなど、すべての主要なモダンブラウザで問題なく動作します。
  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

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

    <input>要素の placeholder 属性は、入力欄にヒント(プレースホルダー)を設定するための属性です。このヒントは、その入力欄にどのような内容を入力すべきかを短く説明するものであり、ユーザーがWebページを訪れた際に入力欄内に表示されます。 この属性は、次の入力タイプで使用できます。text、url、search、email、password、tel です。なお、placeholder属性はHTML5で新たに導入されたものです。 基本構文 <input placeholder="placeholder_text"> ここで指定する pla