ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明
<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言語では textarea と呼ばれます。textarea には多数のパラメータが含まれています。これらのパラメータの使い方を習得すると、テキスト入力ボックスのサイズや外観を自由に変更して、必要な効果を実現できます。以下では、これらのパラメータとその使い方を紹介します。
1. cols、垂直の列。スタイルシート設定がない場合、1 行に収まるバイト数を表します。たとえば、cols=60 は、1 行に最大 60 バイト、つまり 30 個の中国語文字を格納できることを意味します。また、テキスト ボックスの幅はこれによって調整されることに注意してください。cols の値を入力し、入力テキストのフォント サイズを定義すると (定義されていない場合は既定値が使用されます)、テキスト ボックスの幅が決定されます。
2. 行、水平の列。表示できる行数を示します。たとえば、rows=10 は 10 行を表示できることを意味します。 10 行を超える場合は、スクロール バーをドラッグして参照する必要があります。 (上記のように、テキスト ボックスの高さはこれによって制御されます。)
3. 名前、テキスト ボックスの名前。この項目は、テキストを保存するときに使用する必要があるため必須です。
4. warp。 warp="off" の場合、テキスト領域は自動的に折り返されません。 もちろん、指定されていない場合は、デフォルトでテキスト領域は自動的に折り返されます。このパラメータは通常、あまり頻繁に使用されません。
5. スタイル: これは、テキスト ボックスの背景色、スクロール バーの色とスタイル、境界線の色、入力フォントのサイズと色などを設定するために使用できる非常に実用的なパラメーターです。
6. クラスは通常、外部 CSS の設定を呼び出すために使用されます。
例 1: テキスト ボックスの行数と列数をそれぞれ 40 と 10 に設定します。名前はテキストです。表現形式 <textarea cols=40 rows=10 name=text></textarea>
例 2: テキスト ボックスの右側にあるスクロール バーをキャンセルします。式の形式は <textarea cols=40 rows=10 name=text style="overflow:auto"></textarea> です。 style="overflow:auto" は、入力テキストが設定された行数を超えると、スクロールバーが自動的に表示されることを意味します。
例 3: テキスト ボックスの背景色を設定します。 <textarea cols=40 rows=10 name=text style="background-color:BFCEDC"></textarea>.
例 4: さらに、テキスト ボックスのスクロール バーの色、境界線の色、フォント サイズ、色、行間隔などをスタイルで直接設定できます。ただし、これらは通常 CSS で設定され、直接呼び出すことができます。以下は CSS 設定コードの一部です。わかりやすいと思います。テキストボックス内の設定は、テキストボックスの背景色、上下左右の境界線の色と太さ、入力フォントのサイズなどです。
<スタイル>
.textbox { BACKGROUND: #BFCEDC; BORDER-TOP: #7F9DB9 1px solid; BORDER-LEFT: #7F9DB9 1px solid; BORDER-RIGHT: #7F9DB9 1px solid; BORDER-BOTTOM: #7F9DB9 1px solid; FONT-FAMILY: "宋体", "Verdana", "Arial", "Helvetica"; FONT-SIZE: 12px; TEXT-ALIGN: LIFT;}
</スタイル>
上記のコードをページの <head> と </head> の間に挿入します。呼び出しメソッド: <textarea cols=40 rows=10 name=text class="textbox"></textarea>。 class="" 内の名前は、CSS で使用される設定の名前に対応します。これらのパラメータに慣れると、テキスト入力ボックスを変更したり美しくしたりすることが非常に便利になります。

<<:  docker のインストールが完了し、bridge-nf-call-iptables が無効であると報告される問題を解決します

>>:  Mysql はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)

推薦する

30 種類の無料の高品質英語リボンフォント

30 種類の高品質な英語リボン フォントを無料でダウンロードできます。デザイナーは常に、25 種類の...

MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

5つのクールで実用的なHTMLタグと属性の紹介

実はこれもクリックベイトのタイトルであり、「派手」とは言えません。ただ私が無知で、こうしたラベルを見...

sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する

需要シナリオ:上司は、クロ​​ーラーを使用してMySQLデータベースにデータを書き込んだり更新したり...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

Linux プログラムの実行中に動的ライブラリをロードできない場合の解決策

Linux でダイナミック ライブラリをロードできません次のような異常事態が発生した場合./test...

Nginx 仮想ホストを構成する 3 つの方法 (ポートベース) の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

1つのSQL文でMySQLの重複排除が完了し、1つが保持されます。

数日前、ある要件に取り組んでいたとき、MySQL で重複レコードをクリーンアップする必要がありました...

Javascriptの基本ループの詳しい説明

目次サイクルのために入室のためのその間しながら行うループから抜け出す要約するサイクルのためにループは...

Vueは透かし効果を簡単に実現します

序文: Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます効果画像: 1. コンテ...

CentOS システムの rpm インストールと Nginx の設定

目次CentOS rpm のインストールと Nginx の設定導入rpm パッケージのインストールサ...

ウェブページ上でデスクトップ exe プログラムを呼び出す簡単な方法

この記事では主に、Web ページ上でデスクトップ exe プログラムを呼び出す方法を紹介します。 W...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...