HTMLのtextarea要素の説明です。textarea要素は、編集可能な複数行のテキスト入力フィールドを定義する要素です。
目次
要素の記述例
textarea要素の記述例
<p>ご意見・ご要望はこちらへどうぞ<br>
<textarea cols="80" rows="8" name="comments"></textarea>
</p>
閲覧中ブラウザーでの表示結果
要素の説明
- textarea要素は、編集可能な複数行のテキスト入力フィールドを定義する要素です。
- textarea要素内容が、そのまま編集可能なテキストとして表示されます。
利用できる属性
| 属性名 | 属性の説明 |
|---|---|
| autocomplete | オートコンプリート機能を有効にしたい場合は「on」、無効にしたい場合は「off」、より具体的に何を入力させたいかを定義する場合は「自動入力詳細トークン」を定義する属性です。 |
| autofocus | ページ読み込みと同時にこの部品にフォーカスをあてることを定義する論理型属性です。 |
| cols | テキスト入力フィールドの幅を文字数で定義する属性です。 |
| dirname | フォーム送信時、この属性値とフォーム部品に入力されたテキストの文字表記方向（「ltr」または「rtl」）のセットが自動的に送信されるようになります。 |
| disabled | 部品を無効にする属性です。フォーカスもできなくなります。 |
| form | 関連付けたい任意のform要素のid属性を定義するための属性です。 |
| maxlength | 入力可能な最大の文字数を定義する属性です。 |
| minlength | 最低限入力しなければならない文字数を定義する属性です。 |
| name | フォーム送信のデータ値を識別するための名前を定義する属性です。 |
| placeholder | 入力のヒントとなるプレースホルダーを定義するための属性です。 |
| readonly | 部品を編集不可にするための属性です。 |
| required | 部品の入力を必須にするための属性です。 |
| rows | テキスト入力フィールドの高さを行数で定義する属性です。 |
| wrap | データ送信時に行が折り返しされている箇所に改行コードを含めるかを定義する列挙型属性です。 |
グローバル属性
HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。
イベントハンドラ属性
textarea要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。
ブラウザデフォルトCSS設定
Google Chromeの場合
textarea要素のブラウザデフォルトCSS
textarea {
background-color: white;
border-color: rgb(169, 169, 169);
border-style: solid;
border-image: initial;
border-width: 1px;
color: initial;
cursor: text;
display: inline-block;
flex-direction: column;
font: 400 13.3333px Arial;
font-family: monospace;
letter-spacing: normal;
margin: 0em;
padding: 2px;
resize: auto;
text-align: start;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-transform: none;
white-space: pre-wrap;
word-spacing: normal;
word-wrap: break-word;
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-writing-mode: horizontal-tb !important;
}
