このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

textarea要素:複数行のテキスト入力欄

記事Sep. 24th,2020
複数行のテキスト入力欄を表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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=""HTML5で追加 ブラウザーによるオートコンプリートの可否 トークンHTML5.1で追加 オートコンプリートで表示されるべき入力候補の種類
on オートコンプリートを行う
off オートコンプリートを行わない
cols="" 入力欄の横幅 正の整数 入力欄が表示できる文字数
dirname=""HTML5で追加 送信するデータの書字方向に関する値のクエリ名 文字列 送信するデータの書字方向に関する値のクエリ名
disabled="" 入力欄を無効化 disabled 入力欄を無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
maxlength=""HTML5で追加 入力可能な最大の文字数 正の整数 入力可能な最大の文字数
minlength=""HTML5で追加 入力可能な最小の文字数 正の整数 入力可能な最小の文字数
name="" 入力欄の名前 文字列 入力欄の名前
placeholder=""HTML5で追加 入力欄のプレースホルダー テキスト 入力欄のプレースホルダー
readonly="" 入力値を編集できなくする readonly 入力値を編集できなくする
required=""HTML5で追加 入力を必須にする required 入力を必須にする
rows="" 入力欄の高さ 正の整数 入力欄が表示できる行数
wrap=""HTML5で追加 テキストの改行の指定 soft 自動的な改行の挿入はしない
hard 1行が入力欄の横幅を超えないよう改行を挿入する

過去に定義された属性

属性
属性 説明 説明
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
accesskey="" 要素にアクセスキーを割り当てる 文字 ユニコード1文字によるアクセスキー
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
onselect="" 要素の入力内容が選択された時に実行されるスクリプト スクリプト 要素の入力内容が選択された時に実行されるスクリプト
onchange="" 要素の入力内容に変化があった時に実行されるスクリプト スクリプト 要素の入力内容に変化があった時に実行されるスクリプト
inputmode=""HTML5で追加 要素に入力する時のソフトウェアキーボードの種類を指定する none ソフトウェアキーボードを表示しない
text ユーザーの地域に適切なテキストの入力
tel 電話番号の入力
url URLの入力
email メールアドレスの入力
numeric 数値の入力
decimal 実数の入力
search 検索用の入力
autofocus=""HTML5で追加 要素に自動的にフォーカスする 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でも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<textarea>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク