Sep. 24th,2020
＃
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、フォーム関連要素(リスト化要素、ラベル付け可能要素、送信可能要素、リセット可能要素、自動大文字化継承要素)、パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | テキスト |
| タグの省略 | 不可 |
“textarea”要素は複数行のテキスト入力欄を表す要素です。多くの場合フォームの入力欄として使用されます。
“textarea”要素は多くの場合“form”要素の中に配置されますが、“form”属性を指定することで“form”要素の外に配置することもできます。
“textarea”要素の中にテキストを記述した場合、そのテキストは入力欄の初期入力値となります。
多くのブラウザでは“textarea”要素で表されるテキスト入力欄はユーザーによるサイズの変更ができます。
1行のテキスト入力欄は“input”要素で表すことができます。
サンプルコード
<form method="post" action="sample-textareatag1.php" target="_blank">
<fieldset>
<p>
<label>
猫が好きですか？：
<textarea name="comment">
猫がとても好きです。
</textarea>
</label>
</p>
</fieldset>
<p><input type="submit" value="送信する"></p>
</form>
一般的なブラウザでは“textarea”要素の中に記述されたテキストは通常は1個にまとめられるか無視されるコード中のホワイトスペース(半角スペース、タブ、改行など)がコードで記述された通りに表示されます。
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| なし | |||
| 任意属性 | |||
| グローバル属性 | |||
autocomplete="" |
ブラウザーによるオートコンプリートの可否 | トークン |
オートコンプリートで表示されるべき入力候補の種類 |
| on | オートコンプリートを行う | ||
| off | オートコンプリートを行わない | ||
| cols="" | 入力欄の横幅 | 正の整数 | 入力欄が表示できる文字数 |
| dirname="" |
送信するデータの書字方向に関する値のクエリ名 | 文字列 | 送信するデータの書字方向に関する値のクエリ名 |
| disabled="" | 入力欄を無効化 | disabled | 入力欄を無効化 |
| form="" |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
| maxlength="" |
入力可能な最大の文字数 | 正の整数 | 入力可能な最大の文字数 |
| minlength="" |
入力可能な最小の文字数 | 正の整数 | 入力可能な最小の文字数 |
| name="" | 入力欄の名前 | 文字列 | 入力欄の名前 |
| placeholder="" |
入力欄のプレースホルダー | テキスト | 入力欄のプレースホルダー |
| readonly="" | 入力値を編集できなくする | readonly | 入力値を編集できなくする |
| required="" |
入力を必須にする | required | 入力を必須にする |
| rows="" | 入力欄の高さ | 正の整数 | 入力欄が表示できる行数 |
| wrap="" |
テキストの改行の指定 | soft | 自動的な改行の挿入はしない |
| hard | 1行が入力欄の横幅を超えないよう改行を挿入する | ||
過去に定義されていた属性
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| tabindex="" | フォーカスの可否とフォーカスの移動順序を指定する | 正の整数 | 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする) |
| 0 | 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする) | ||
| 負の整数 | フォーカス可能だが順次ナビゲーションには加わらない | ||
| accesskey="" | 要素にアクセスキーを割り当てる | 文字 | ユニコード1文字によるアクセスキー |
| onblur="" | フォーカスを失った時に実行されるスクリプト | スクリプト | フォーカスを失った時に実行されるスクリプト |
| onfocus="" | フォーカスされた時に実行されるスクリプト | スクリプト | フォーカスされた時に実行されるスクリプト |
| onselect="" | 要素の入力内容が選択された時に実行されるスクリプト | スクリプト | 要素の入力内容が選択された時に実行されるスクリプト |
| onchange="" | 要素の入力内容に変化があった時に実行されるスクリプト | スクリプト | 要素の入力内容に変化があった時に実行されるスクリプト |
| inputmode="" |
要素に入力する時のソフトウェアキーボードの種類を指定する | none | ソフトウェアキーボードを表示しない |
| text | ユーザーの地域に適切なテキストの入力 | ||
| tel | 電話番号の入力 | ||
| url | URLの入力 | ||
| メールアドレスの入力 | |||
| numeric | 数値の入力 | ||
| decimal | 実数の入力 | ||
| search | 検索用の入力 | ||
| autofocus="" |
要素に自動的にフォーカスする | autofocus | 要素に自動的にフォーカスする |
＃
入力欄のサイズのユーザーによる変更
多くのブラウザでは“textarea”要素で表される入力欄は“cols”属性や“rows”属性、スタイルシートで指定した大きさからユーザーの操作によるサイズの変更が可能です。入力欄の右下に表示されるつまみをドラッグすることでサイズを変更することができます。
ユーザーによるサイズの変更を制限したい場合はスタイルシートの“resize”プロパティで制限することができます。
.resize-none {
resize: none;
}
.resize-horizontal {
resize: horizontal;
}
.resize-vertical {
resize: vertical;
}
<p>
<textarea rows="5" cols="30" class="resize-none">
この入力欄の大きさは変更できません。
</textarea>
</p>
<p>
<textarea rows="5" cols="30" class="resize-horizontal">
この入力欄は横幅だけ変更できます。
</textarea>
</p>
<p>
<textarea rows="5" cols="30" class="resize-vertical">
この入力欄は高さだけ変更できます。
</textarea>
</p>
また、“max-width”プロパティや“min-width”プロパティ、“max-height”プロパティや“min-height”プロパティでも可変可能なサイズの範囲を指定することができます。
＃
仕様書
“textarea”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
  |
|
|---|---|---|---|---|---|
| <textarea> |   |
|
|
|
|
DOMインターフェース
[Exposed=Window]
interface HTMLTextAreaElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString autocomplete;
[CEReactions] attribute unsigned long cols;
[CEReactions] attribute DOMString dirName;
[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute long maxLength;
[CEReactions] attribute long minLength;
[CEReactions] attribute DOMString name;
[CEReactions] attribute DOMString placeholder;
[CEReactions] attribute boolean readOnly;
[CEReactions] attribute boolean required;
[CEReactions] attribute unsigned long rows;
[CEReactions] attribute DOMString wrap;
readonly attribute DOMString type;
[CEReactions] attribute DOMString defaultValue;
attribute [LegacyNullToEmptyString] DOMString value;
readonly attribute unsigned long textLength;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);
readonly attribute NodeList labels;
undefined select();
attribute unsigned long selectionStart;
attribute unsigned long selectionEnd;
attribute DOMString selectionDirection;
undefined setRangeText(DOMString replacement);
undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
textarea[dir=auto i] {
unicode-bidi: plaintext;
}
textarea {
letter-spacing: initial;
word-spacing: initial;
line-height: initial;
text-transform: initial;
text-indent: initial;
text-shadow: initial;
text-align: initial;
white-space: pre-wrap;
display: inline-block;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
textarea {
unicode-bidi: normal;
}
