テキストエリア内にタグ？

こんな感じのボックスを見たことがありませんか？ このボックスはテキストエリア(textarea要素)が使用され、中には自サイトのリンク用 バナーのソースやHTML講座のようなサイトのサンプルソースなどが入っており、 マウスカーソルが乗ったとき（またはクリックしたとき）に中のソースが選択状態と なってコピー操作を容易にするものです。
ブラウザの表示ではtextarea要素内に書かれたタグは単なる文字として 表示されますので、ついつい次のように書いてしまいがちですが、本当は textarea要素の中には直接タグを書き入れてはいけないのです。

<textarea cols="5" rows="1" readonly onfocus="this.select();" onmouseover="this.select();">
<a href="http://amenti.usamimi.info/" title="駄目な例" target="_blank">Amenti</a>
 </textarea>

textarea要素内はテキストのみと仕様で定められていますので、中にHTMLソースを 入れるときは次のようにタグの < や > は文字参照に変換して、それぞれ &gt; &lt; と書かなければいけません。

<textarea cols="5" rows="1" readonly onfocus="this.select();" onmouseover="this.select();">
&lt;a href="http://amenti.usamimi.info/" title="良い例" target="_blank"&gt;Amenti&lt;/a&gt;
 </textarea>

初心者向けになりますが、簡単にバナーを使ったリンクのコピペ用のボックスを 作ることが出来るフォームを作成してみました。 リンク用のソースが入ったボックスにはテキストエリアを使用するかインプットを 使用するかを選択出来ます。
※ 但し、サイズはテキストエリアは rows="1" cols="5" 、インプット は size="5" に固定しています。
2007/02/25 修正したつもりが記述ミスがあったため再度修正しました。 orz

ステップ１




ステップ２
ボックスに使う要素

 


HTMLソース