1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlにおけるtextareaの利用方法とよくある問題点・ケーススタディ

2022-01-16 08:31:21
textareaタグは、主に長い文章を入力する際に、改行などの効果を得るためによく使うhtmlタグです。ここでは、その基本的な使用例を紹介します。
textarea タグ -- HTML フォームの複数行入力フィールドを表します。
textareaタグは、<textarea>で始まり、</textarea>.で終わる、2つ1組で表示されます。
属性 :
共通 -- 一般的な属性
cols -- 複数行の入力フィールドにおける列の数
rows -- 複数行の入力フィールドの行数
accesskey -- フォームのショートカットアクセス方法
disabled -- 入力フィールドにフォーカスが当たらない、選択できない、グレーで表示される、フォームで機能しない。
readonly -- 入力フィールドは選択できるが、変更できない。
tabindex -- 入力フィールドで、"tab" キーの探索順序を使用します。
ユースケースは以下の通りです。 :
Htmlコード
コピーコード
コードは以下の通りです。

<form id="textareaDem" action="#" method="post">
<textarea cols="50" rows="10" id="contactus" name="contactus"> tag line on </textarea>
</form>

コードをコピーして、ローカルでテストすることができます。
問題は、2つの <textarea></textarea> が同じ行にない場合、例えば次のようになります。
別の行に書くと、また違った効果があります。
コピーコード
コードは以下の通りです。

<form id="textareaDemo" action="#" method="post">
<textarea>
This is the textarea tag not on line by line
See the effect will be different
</textarea>
</form>

が見つかります。 : 冒頭のコードは左寄せで表示され、次のコードは中央寄せで表示されます。ですから、textareaを使うときには、textareaタグ内のテキストはtextareaに対する相対的なものであり、textareaは編集領域を提供することと同じで、textareaの開始直後、つまりいわゆるWYSIWYGバーのようなものであることに注意しなければなりません。限り、2つのタグが行にされていないとして、その後&lt;/textarea&gt;空白も空白のテキストとして彼によって識別される前に、あなたのマウス編集ポインタがテキストの先頭にまたはテキストの横に点滅させないことがわかります。ですから、このタグをうまく使って、問題が発生したときにどこから解決すればよいかを知っておきましょう。
以上、とりとめのない話でしたが、少し実験してみると、なるほどと思うことがあるはずです。0_*