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

HTMLのtextarea要素におけるplaceholder属性の使い方

textarea要素のplaceholder属性とは

<textarea>要素のplaceholder属性は、テキストエリア内にプレースホルダー（仮表示）テキストを設定するために使用します。プレースホルダーはユーザーへの入力のヒントとして機能し、「お名前を入力してください」「電話番号を入力してください」「100文字以内でご記入ください」などがその代表的な例です。

なお、プレースホルダーのテキストはテキストエリアが空の状態でのみ表示され、ユーザーが入力を開始すると自動的に消えます。

構文

<textarea placeholder="text">

上記の「text」の部分には、プレースホルダーとして表示したいヒント文を指定します。

placeholder属性の実装例

それでは、<textarea>要素のplaceholder属性を実装した具体例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>面接アンケート</h2>
<p>質問1</p>
<textarea rows="6" cols="70" placeholder="編集者職を志望する理由をご記入ください（100文字以内）">
</textarea>
<p>質問2</p>
<textarea rows="6" cols="70" placeholder="出版業界での経験があればご記入ください（100文字以内）">
</textarea>
</body>
</html>

出力結果

HTMLのtextarea要素におけるplaceholder属性の使い方

上記の例では、面接アンケート用に2つのテキストエリアを配置しています。

<p>質問1</p>
<textarea rows="6" cols="70" placeholder="編集者職を志望する理由をご記入ください（100文字以内）">
</textarea>
<p>質問2</p>
<textarea rows="6" cols="70" placeholder="出版業界での経験があればご記入ください（100文字以内）">
</textarea>

プレースホルダーテキストを表示するには、次のようにplaceholder属性を使用します。

placeholder="編集者職を志望する理由をご記入ください（100文字以内）"

ポイントまとめ

  • rows属性：テキストエリアの行数（高さ）を指定します。
  • cols属性：テキストエリアの1行あたりの文字数（幅）を指定します。
  • placeholder属性：入力欄が空のときに表示されるヒント文を指定します。

placeholder属性は、すべてのモダンブラウザでサポートされているため、安心して利用できます。フォームのユーザビリティを向上させるために、適切なヒント文を設定しておきましょう。

  1. HTMLのlow属性とは？meter要素での使い方とコード例をわかりやすく解説

    HTMLのlow属性は、ゲージ（計測バー）の値が「低い」とみなされる範囲の境界値を定義するための属性です。この属性を適用できるのは、<meter>要素のみであり、他のHTML要素では使用できません。low属性に指定した数値より小さい値がmeter要素に入力された場合、ブラウザはその状態を「低い値」として認識し、多くの場合ゲージの色が変化して視覚的に警告を表現します。low属性と対になるものとして、値が「高い」とみなされる範囲を定義するhigh属性も存在します。low属性の基本構文low属性の記述方法は以下のとおりです。<meter low=数値></meter&g

  2. HTMLのrows属性とは？textareaの高さ指定方法をわかりやすく解説

    HTMLのrows属性とはHTMLのrows属性は、<textarea>要素の表示される高さ（行数）を指定するための属性です。テキストエリアを画面に表示したときに、何行分の入力欄の高さを確保するかを制御できます。なお、rows属性を指定しない場合の初期値は「2」となっており、多くのブラウザでは2行分の高さで表示されます。基本構文rows属性の基本的な書き方は以下の通りです。<textarea rows=数値></textarea>「数値」の部分に、表示したい行数を半角数字で指定します。例えば「10」と指定すれば、10行分の高さを持つテキストエリアが表示されま