textareaの概要
textarea要素は複数行のテキスト入力欄を表示するための要素です。レビューのコメントやお問い合わせフォームなど、大量のテキストを入力する際に使用します。
textareaに使える属性
属性とは<textarea>タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
textareaに使える属性
| autocomplete | 概要 | 入力履歴を活用した自動補完機能を有効・無効・種類の指定をします。 |
|---|---|---|
| 属性の値 | on：有効にする off：無効にする | |
| autofocus | 概要 | ページが読み込まれた際に、自動的にフォーカスを合わせます。ページ内で1つだけ指定可能です。自動的にフォーカスを合わせるため、音声読み上げ機能を利用しているユーザーを混乱させる可能性もあります。 |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| cols | 概要 | テキスト入力欄の外見上の横幅を整数で指定します。デフォルト値は20です。 |
| 属性の値 | 整数の値 | |
| disabled | 概要 | フォームの部品を無効化します。 |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| form | 概要 | 関連付けたいform要素のid属性を指定します。これを指定することで、textarea要素は、form要素の中になくても、その一部とすることができます。 |
| 属性の値 | id属性の値 | |
| maxlength | 概要 | ユーザーが入力可能な文字の最大数を指定します。 |
| 属性の値 | id属性の値 | |
| minlength | 概要 | ユーザーが入力しなければならない最小文字数を指定します。 |
| 属性の値 | id属性の値 | |
| name | 概要 | 部品に名前をつけます。フォームのデータを送信後に入力欄を特定するのに利用します。 |
| 属性の値 | テキスト | |
| placeholder | 概要 | 入力欄に入力するテキストのヒントを表示します。入力したテキストは、入力欄に薄く表示されます。 |
| 属性の値 | テキスト | |
| readonly | 概要 | ユーザーが入力欄の値を編集できない（読み取り専用である）ことを示します。 |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| required | 概要 | 部品に名前をつけます。フォームのデータを送信後に入力欄を特定するのに利用します。 |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| rows | 概要 | 入力欄で見ることのできるテキストの行数を指定します。 |
| 属性の値 | 整数の値 | |
| spellcheck | 概要 | 入力欄のスペルや文法のチェックの有無を指定します。ただし、日本語非対応のようです。 |
| 属性の値 | true：チェックする false：チェックしない | |
| wrap | 概要 | テキストの折り返し方法を指定します。 |
| 属性の値 |
hard：表示・送信共に自動改行されます。 soft：表示は自動改行されますが、送信は改行しません。デフォルト値です。 off：表示・送信共に自動改行されません。 |
スポンサードサーチ
<textarea>の使い方
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |