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

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

推薦する

MySQL の同時実行性の問題と解決策の分析

目次1. 背景2. テーブルロックによるクエリの遅延3. オンラインでテーブル構造を変更するとどのよ...

CentOS での MySQL ワークベンチのインストールと設定のチュートリアル

この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

MySQL接続クエリの原理と応用

概要MySQL の最も強力な機能の 1 つは、データ取得を実行しながらテーブルを結合できることです。...

MySQL でテーブルを削除する 3 つの方法 (要約)

ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...

ドラッグ効果を実現するための js オブジェクト指向メソッド

この記事では、ドラッグアンドドロップをJSオブジェクト指向で実装するための具体的なコードを参考までに...

JavaScript を使用してタイムラインとアニメーション効果を実装するためのサンプル コード (フロントエンドのコンポーネント化)

目次コードのクリーニングJavaScript の「フレーム」 「フレーム」の実装方法1. 間隔を設定...

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

Linux システム MySQL8.0.19 クイックインストールと構成チュートリアル図

目次1. 環境の紹介2. MySQL-8.0.19をインストールする3. MySQLを設定する1. ...

Dockerは同じIPネットワークセグメントとの接続を実現する

最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...

JavaScriptエンジンV8の実行プロセスの詳細な説明

目次1. V8ソース2. V8サービスターゲット3. V8の初期アーキテクチャIV. V8の初期アー...

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...

Linux システムで MySQL の文字セットを UTF8 に変更する手順

目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...