ホームページ > 記事 > ウェブフロントエンド > HTML スクロール バー テキスト ボックスをコーディングする方法
タイトル: スクロール バー付きの HTML テキスト ボックス コードを記述する方法
HTML のテキスト ボックスは、一般的に使用されるユーザー入力コントロールの 1 つです。テキストの内容が長すぎると、テキスト ボックスが不完全に表示されます。この時点で、スクロールをサポートするためにテキスト ボックスにスクロール バーを追加できます。この記事では、スクロールバー効果を備えたHTMLテキストボックスコードの書き方と具体的なコード例を詳しく紹介します。
1. textarea 要素を使用してテキスト ボックスを作成する
HTML では、textarea 要素を使用してテキスト ボックスを作成します。 textarea要素にはrows属性とcols属性があり、テキストボックスの行数と列数を指定します。ただし、これら 2 つのプロパティだけを使用してスクロール バー効果を実現することはできず、スクロール バー効果を実現するには CSS スタイルも使用する必要があります。以下は、基本的なテキスト ボックスのコード例です。
<textarea rows="5" cols="30" style="overflow:auto"></textarea>
上記のコードでは、5 行 30 列のテキスト ボックスを設定し、style 属性を通じて overflow:auto スタイルを追加しました。このスタイルでは、スクロール バーを自動的に表示したり、テキスト コンテンツが長すぎる場合にのみスクロール バーを表示したりできます。
2. テキスト ボックスの幅と高さを設定します
テキスト ボックスの行数と列数を設定することに加えて、テキスト ボックスの幅と高さを設定することもできます。 CSS スタイルを通じて。以下は、カスタムの幅と高さを使用したテキスト ボックスのコード例です:
<textarea rows="5" cols="30" style="width:300px; height:100px; overflow:auto"></textarea>
上記のコードでは、style 属性の幅と高さのスタイルを使用して、テキスト ボックスの幅と高さを 300 ピクセルと 100 ピクセルに設定します。 。
3. テキスト ボックスにデフォルトのテキスト コンテンツを設定する
場合によっては、テキスト ボックスにデフォルトのテキスト コンテンツを表示して、ユーザーに入力を求めることがあります。この機能は、プレースホルダー属性を使用して実現できます。以下は、デフォルトのテキスト コンテンツを含むテキスト ボックスのコード例です。
<textarea rows="5" cols="30" style="overflow:auto" placeholder="请输入文本内容"></textarea>
上記のコードでは、プレースホルダー属性を通じてデフォルトのテキスト コンテンツを「テキスト コンテンツを入力してください」に設定しています。
要約すると、textarea 要素と CSS スタイルを使用して、スクロール バー付きの HTML テキスト ボックスを作成できます。行、列、幅、高さなどの属性を調整することで、さまざまなサイズやスタイルのテキスト ボックスを実現することもできます。上記の内容が、HTML スクロール バー テキスト ボックス コードの理解と使用に役立つことを願っています。
以上がHTML スクロール バー テキスト ボックスをコーディングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。