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

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明
<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 はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)

推薦する

IDEA を使用して Web プロジェクトを作成し、Tomcat に公開する方法

目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...

js 配列から重複を削除する 11 の方法

実際の業務や面接では、「配列の重複排除」の問題によく遭遇します。以下は、js を使用して実装された配...

Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...

Douyin ロゴを作成する手順の CSS3 分析

「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...

Net Core実装プロセス分析のDoc​​kerインストールと展開

1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...

Linuxはデュアルネットワークカードボンドとドライバーインターフェースを使用する

債券とは何かNIC ボンドは、実稼働シナリオでよく使用されるテクノロジーです。複数の NIC を 1...

JavaScript オブジェクト (詳細)

目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...

MLSQL スタックでストリームのデバッグを簡単にする方法

序文クラスメートが MLSQL Stack のストリーミング サポートを調査しています。そこで、フロ...

IIS7~IIS8.5 サーバープロトコルヘッダーの削除または変更

要件: IIS 7、7.5、8.0、8.5、および ASP.NET で HTTP 応答ヘッダーを削除...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...

Linux リダイレクトの使用方法の詳細な説明

誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...

MySQLソースコマンドの使い方の紹介

目次ネット上の質問から生まれた思考MySQL ソースコマンドネット上の質問から生まれた思考今日仕事中...

MySQL 時間差関数 (TIMESTAMPDIFF、DATEDIFF)、日付変換計算関数 (date_add、day、date_format、str_to_date)

1. 時間差関数(TIMESTAMPDIFF、DATEDIFF) MySQLを使用して時間差を計算...

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...