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_*
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_*
関連
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
ダブル11クーポンのHTML実装(クーポンページを開くまでの時間設定)
-
iframeのテクニックを使って、訪問者にqqの実装アイデアとサンプルコードを提供する。
-
一般的なHTMLメタタグの属性(ウェブサイトの互換性と最適化のために必要なもの)
-
ReadonlyとDisabledのわずかな違いについて説明します。
-
HTMLimgタグのalt属性とtitle属性の使い方紹介
-
overflow: hiddenを使用して、ページのスクロールバーを無効にします。
-
照合でjsを呼び出すいくつかの方法と、推奨の使用方法
-
HTML初心者のための15のベストプラクティス
-
ショートカットアイコンとアイコンコードの違いの紹介
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
指定した行の無線ラジオボックスをチェックし、その行までスクロールするLayuiフォームの実装コード
-
QuillエディタにカスタムHTMLレコードを挿入する例
-
HTMLページのスクロールは、コンテンツの位置の一部が固定されていない場合の実装
-
HTMLの5種類のスペースのそれぞれの意味
-
HTMLの横線マークアップとコードコメントの使い方を簡単にマスターできる
-
vertical-alignで入力とimgを揃える。
-
フォームからキャリッジリターンを削除する方法 i.e. キャリッジリターン! =Submit
-
タグのhref属性とonclickイベントの比較
-
きちんとした標準的なHTMLタグの書き方を学ぶ
-
Web 標準学習 構造と体裁の分離を理解する