HTMLのtextareaタグの属性は何ですか?-htmlチュートリアル-php.cn

HTMLのtextareaタグの属性は何ですか?

coldplay.xixi

リリース： 2022-12-30 11:13:01

オリジナル

25039 人が閲覧しました

HTML の textarea タグの属性は次のとおりです: 1.cols は垂直列、2.name、テキストボックスの名前、3.warp ([warp="off"] の場合)テキストエリアは自動ではない行折り返し; 4. 行水平列; 5. 外部CSSの設定を呼び出すにはclassを使用するのが一般的です。

この記事の動作環境: Acer S40-51、HBuilderX.3.0.5&&HTML5 バージョン、Windows10 Home 中国語版

関連学習の推奨事項: html ビデオチュートリアル

HTML の textarea タグの属性は、

1、cols、垂直列です。スタイルシートを設定しない場合は、1行に収まるバイト数を表します。たとえば、cols=60 は、1 行に最大 60 バイト (漢字 30 文字) を保持できることを意味します。もう 1 つの注意点は、テキストボックスの幅がこれによって調整されることです。cols の値を入力し、入力テキストのフォントのサイズを定義し (定義されていない場合はデフォルト値が使用されます)、次に、テキストボックスが決まります。

2、行、水平列。表示できる行数を示します。たとえば、rows=10 は 10 行表示できることを意味します。 10 行を超える場合は、スクロールバーをドラッグして参照する必要があります。 (上記と同様、テキストボックスの高さはこれによって制御されます。)

3, name、テキストボックスの名前。保存するときに使用する必要があるため、これは必須です。文章。

4, warp, warp="off" の場合、テキストエリアは自動的に折り返されません。もちろん、書かれていない場合は、デフォルトで自動的に折り返されます。このパラメータは通常、あまり使用されません。

5、style、これは非常に実用的なパラメータで、テキストボックスの背景色、スクロールバーの色と形式、境界線の色、入力フォントのサイズや色など。

6、class は通常、外部 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の設定コードです、分かりやすいと思いますテキストボックスに設定するのはテキストボックスの背景色、上下左右の色と太さです右枠、入力フォントのサイズなど。

<style>
.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;}
</style>

ログイン後にコピー

ページのとの間に上記のコードを挿入します。呼び出しメソッド：

<textarea cols=40 rows=10 name=text class="textbox"></textarea>

ログイン後にコピー

class=""内の名前はcssで使用する設定名に相当します。これらのパラメータに慣れると、テキスト入力ボックスを変更したり美しくしたりするのが非常に便利になります。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script>
function displayResult()
{
    alert(document.getElementById("myTextarea").value);
}
</script>
</head>
<body>
<textarea id="myTextarea" cols="20">
在php中文网，你可以学多很多编程的基础知识，包括 HTML, XML, SQL, 和 PHP 等各种前端内容。
</textarea>
<br>
<button type="button" onclick="displayResult()">弹出 textarea 元素的文本</button>
</body>
</html>

ログイン後にコピー