SYNCER

SYNCER

＜textarea要素＞ - 複数行のテキスト入力フォーム

公開日:

textarea要素は、複数行に対応したテキスト入力フォームを設置するための要素です。

概要

名前
textarea
カテゴリー
Flow content
Phrasing content
Interactive content
Palpable content
Form-associated element
Labelable element
Listed element
Submittable element
Resettable element
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
空の内容、またはテキストノード。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLTextAreaElement
デフォルトのスタイル
textarea {
	-webkit-appearance: textarea;
	background-color: white;
	-webkit-rtl-ordering: logical;
	user-select: text;
	flex-direction: column;
	resize: auto;
	cursor: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	border-width: 1px;
	border-style: solid;
	border-color: initial;
	border-image: initial;
	padding: 2px;

	text-rendering: auto;
	color: initial;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	margin: 0em 0em 0em 0em;
	font: 11px system-ui;

	-webkit-writing-mode: horizontal-tb;
}
仕様書
https://html.spec.whatwg.org/multipage/forms.html#the-textarea-element

属性

autocomplete

オートフィル機能を有効にするか否か。

autofocus

この属性を付けると、ページをロードした時に、自動でフォーカス状態になる。論理属性。

デモを見る

dirname

ユーザーが入力した文字の方向をサーバーサイド側で知りたい場合、この属性にキー名を指定する。すると、下記の2種類のうち、どちらかがキー名の値となって送信される。

ltr
左から右。
rtl
右から左。

デモを見る

disabled

この属性を付けると、操作が無効になる。値も送信されない。論理属性。

デモを見る

form

関連付けたいform要素のidを指定する。

デモを見る

inputmode

入力モードのヒントをキーワードで指定する。

verbatim
逐語的ラテン。
latin
ラテン。
latin-name
ラテン名。
latin-prose
ラテン散文。
full-width-latin
全角ラテン。
kana-name
かな。
katakana
カタカナ。
numeric
数値。
tel
電話番号。
email
メールアドレス。
url
URLアドレス。

maxlength

最大の入力文字数。最大の入力文字数を指定した場合、初期値のままか、または、属性値以下の文字数を入力しないと検証エラーにかかります。

デモを見る

minlength

最小の入力文字数。最小の入力文字数を指定した場合、初期値のままか、または、属性値以上の文字数を入力しないと検証エラーにかかります。

デモを見る

name

値のキー。JavaScriptでDOMを操作する時にも利用する。

placeholder

プレースホルダー。

デモを見る

readonly

この属性を付けると、入力操作が無効になる。ただし、値は送信される。論理属性。

デモを見る

required

この属性を付けると、入力必須になる。論理属性。

デモを見る

cols

行あたりの文字数。スタイルシートの指定がなければ、要素の横幅がその文字数分になる。wrap属性の値をhardにした場合は必須の属性。

デモを見る

rows

行数。

デモを見る

wrap

改行の取り扱いをキーワードで指定する。列挙属性で、欠損値はsoft。

soft
初期値。自動折り返しが発生しても、その部分に改行は挿入されない。
hard
cols属性を指定しなければいけない。自動折り返しが発生した場合、その部分に改行が挿入される。

デモを見る

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

基本的な使い方

textarea属性は、複数行に対応したテキスト入力フォームを設置するための要素です。rows属性で行数(高さ)を調整できます。ここで設定した行より多く入力できなくなる、ということはありません。

HTML

<!-- 12行分の高さ -->
<textarea rows="12"></textarea>

cols属性を指定すると、それが1行あたりの文字数になり、横幅として設定されます。ここで設定した文字数より多く入力できなくなる、ということはありません。横幅を調整したいのならスタイルシートで指定した方がいいでしょう。

HTML

<!-- 50文字分の横幅 -->
<textarea rows="12" cols="50"></textarea>

textarea要素の初期値は、value属性ではなく、要素の中身に設定します。

HTML

<!-- 最初からSYNCERと入力してある -->
<textarea rows="12" cols="50">SYNCER</textarea>

最大の文字数

maxlength属性に数値を指定すると、その文字数よりも多く入力した場合に検証エラー扱いにできます。ただし、初期値のままの場合は検証エラーにかかりません。例えば、maxlength属性に2(2文字)を指定して、初期値がAAAA(4文字)の場合、初期値のままならmaxlength属性より文字数が多くても送信できるということです。

HTML

<!-- 4文字以上、入力できない -->
<textarea maxlength="4"></textarea>

デモを開く

最小の文字数

minlength属性に数値を指定すると、その文字数よりも少なく入力した場合に検証エラー扱いにできます。ただし、初期値のままの場合は検証エラーにかかりません。例えば、minlength属性に4(4文字)を指定して、初期値がAA(2文字)とか空(0文字)の場合、初期値のままならminlength属性より文字数が少なくても送信できるということです。

HTML

<!-- 4文字以上、入力しないといけない -->
<textarea minlength="4"></textarea>

デモを開く

操作を不可にする

disabled属性を付けると、textarea要素が入力を受け付けなくなります。さらに、サーバーサイドに値が送信されなくなります。つまり、存在しないものとして扱われます。

HTML

<!-- 存在しないものとして扱われる -->
<textarea disabled></textarea>

デモを開く

読み取り専用にする

readonly属性を付けると、textarea要素が入力を受け付けなくなります。ただし、disabled属性とは違って、サーバーサイドに値は送信されます。つまり、存在するけど操作できないもの、という扱いです。

HTML

<!-- 存在するけど入力できない -->
<textarea readonly></textarea>

デモを開く

自動折り返しの扱い

wrap属性をsoftにするか、省略した場合、自動改行は入力したテキストに影響ありません。hardを指定した場合、自動改行が発生した部分に改行が挿入されます。hardを指定した場合は、cols属性も指定しなければいけません。

HTML

<!-- 自動改行は入力内容に影響しない -->
<textarea wrap="soft"></textarea>
<textarea></textarea>

<!-- 自動改行部分に改行が挿入される -->
<textarea wrap="hard" cols="10"></textarea>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜textarea要素＞ - 複数行のテキスト入力フォーム</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/textarea/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>textarea要素は、複数行に対応したテキスト入力フォームを設置するための要素です。</p>

<form action="./form.php">
	<p><textarea name="opinion" rows="12" placeholder="入力して下さい。"></textarea></p>
	<p><button>内容を送信</button></p>
</form>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>