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

HTMLのplaceholder属性とは？使い方とサンプルコードを解説

HTMLのplaceholder（プレースホルダー）属性は、ユーザーが何も入力する前に、input要素やtextarea要素の中に表示されるヒントテキスト（仮置きの文字列）を指定するための属性です。フォームの入力欄に「氏名」「メールアドレス」など、どのような内容を入力すべきかを示すことで、ユーザーの理解を助け、入力ミスを減らす効果があります。

placeholder属性の基本構文

placeholder属性は以下のように記述します。

<タグ名 placeholder="表示したいテキスト"></タグ名>

placeholder属性に指定したテキストは、入力欄が空の状態でのみ表示され、ユーザーが入力を始めると自動的に消えます。また、このテキストは実際の値として送信されない点にも注意が必要です。

HTML placeholder属性の使用例

それでは、placeholder属性を使った具体的なコード例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML placeholder デモ</h1>
<input type="text" placeholder='姓を入力してください'>
<input type="text" placeholder='名を入力してください'>
</body>
</html>

出力結果

上記のコードを実行すると、2つのテキスト入力欄が表示され、それぞれの入力欄には薄いグレーの文字でヒントが表示されます。ユーザーが入力欄をクリックして文字を入力すると、プレースホルダーのテキストは消えて、入力した内容に置き換わります。

HTMLのplaceholder属性とは？使い方とサンプルコードを解説

placeholder属性を使用する際の注意点

  • ラベルの代わりには使わない： プレースホルダーは入力開始とともに消えるため、アクセシビリティの観点から、必ずlabel要素と併用することが推奨されています。
  • 重要な情報を含めない： 入力例や補足説明など、常に見えている必要がある情報はplaceholderではなく、別途テキストで表示しましょう。
  • 対応ブラウザ： placeholder属性は主要なモダンブラウザすべてでサポートされています。
  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性は、input要素またはselect要素にのみ適用できます。基本構文multiple属性の記述方法は以下のとおりです。<tagname multiple></tagname>使用例ここでは、select要素にmultiple属性を指定した実際のコード例を見てみましょう。以下のサンプルでは、好きな科目を複数選択できるセレクトボックスを作成しています。<!DOCTYPE html> <html> <style> body {

  2. HTMLのonpasteイベント属性とは？構文とサンプルコードで解説

    HTMLのonpasteイベント属性は、ユーザーがHTMLドキュメント内の要素に対してコンテンツを貼り付け（ペースト）した瞬間に発火するイベント属性です。テキストエリアや入力フィールドなど、貼り付け操作が行われる可能性のある要素に設定することで、そのタイミングに合わせて任意のスクリプトを実行できます。 基本構文 onpasteイベント属性の基本的な書き方は以下のとおりです。 <tagname onpaste="script"></tagname> 実装例 ここでは、onpasteイベント属性を使った具体的なサンプルを見ていきましょう。以下のコードでは