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 サイトの他の関連記事を参照してください。