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

HTMLのtextarea要素におけるreadonly（読み取り専用）属性の使い方

<textarea>要素のreadonly属性は、テキストエリアを読み取り専用に設定するために使用されます。readonly属性が設定されたテキストエリアは、ユーザーが内容を編集・変更することができません。

ただし、読み取り専用に設定されていても、ユーザーはテキストの内容をコピーすることは可能です。

構文

<textarea readonly>

実装例

以下は、<textarea>要素のreadonly属性を実装した例です。面接の質問フォームと、編集不可の案内文を組み合わせたケースを想定しています。

<!DOCTYPE html>
<html>
<body>
<h2>Interview Questions</h2>
<p>Q1</p>
   <textarea rows="6" cols="70" placeholder="Why do you want go for the Editor Job Profile? (100 words)">
   </textarea>
   <p>Q2</p>
   <textarea rows="6" cols="70" placeholder="Do you have any previous publishing experience? (100 words)">
   </textarea>
   <p>Guidelines to appear for interview:</p>
   <textarea rows="6" cols="70" readonly>
      The interviewee should reach at 10AM with the certificates.
   </textarea>
</body>
</html>

出力結果

HTMLのtextarea要素におけるreadonly（読み取り専用）属性の使い方

上記の例では、3つのテキストエリアを配置しています。

<p>Q1</p>
<textarea rows="6" cols="70" placeholder="Why do you want go for the Editor Job Profile? (100 words)">
</textarea>
<p>Q2</p>
<textarea rows="6" cols="70" placeholder="Do you have any previous publishing experience? (100 words)">
</textarea>
<p>Guidelines to appear for interview:</p>
<textarea rows="6" cols="70" readonly>
   The interviewee should reach at 10AM with the certificates.
</textarea>

このうち1つのテキストエリアにはreadonly属性が設定されているため、ユーザーはそのテキストエリアに文字を入力・編集することができません。

<textarea rows="6" cols="70" readonly>
   The interviewee should reach at 10AM with the certificates.
</textarea>

readonly属性とdisabled属性の違い

readonly属性とよく似た属性にdisabled属性があります。両者の主な違いは以下のとおりです。

  • readonly属性：編集はできないが、テキストの選択・コピーが可能。フォーム送信時にも値が送信される。
  • disabled属性：編集・コピーともにできず、フォーム送信時にも値が送信されない。要素がグレーアウトして表示される。

案内文や規約など「表示はさせたいが編集はさせたくない」テキストにはreadonly属性が適しています。用途に応じて使い分けましょう。


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

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">

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

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