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

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

推薦する

Mac で docker と kubectl の自動補完コマンドを追加する方法

kubectl の紹介kubectl は、k8s クラスターを操作するためのコマンドライン ツールで...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

MYSQL から MARIADB へのプロジェクト移行に関するチュートリアル

データベース (MySQL) を準備します。すでに MySQL をお持ちの場合は、これを無視できます...

10分でCSS3グリッドレイアウトを理解する

基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

適応幅(パーセンテージ)に応じて Div の高さを調整する純粋な CSS

今日のレスポンシブ レイアウトの要件では、サイズを自動的に調整できる多くの要素で高さと幅の適応を実現...

vue.js 動的コンポーネントの詳細な説明

:動的コンポーネントv-bind:is="component name" を使用...

dockerでpdflatex環境を設定する方法

技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...

docker-compose を使用して MySQL を実行する方法

ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...

セマンティック HTML タグの紹介

ここ数年、ウェブサイト開発では DIV+CSS が非常に人気があり、当時は大きな騒動を引き起こしまし...

Dockerでudpポート番号を指定する問題を解決する

Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

Dockerコンテナが停止できない問題の解決方法

解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...

vue.js でよく使われる v 命令の解析

目次Vue でのモデルバインド表示の if の v-text の説明v-html: v-オンv-if...