textareaを使うことで、問い合わせフォームのコメント欄やホームページ更新履歴などのデザイン部分にも利用することができます。このページでは基本的な用例を解説します。
textarea要素
| カテゴリ | フォーム・ホームページのデザイン |
|---|---|
| タグ | <textarea> |
| 機能 | テキストの入力エリアを作ります。 |
| 属性 | name cols rows maxlength placeholder autofocusなど |
| 使用例 |
|---|
| <textarea name="名前" cols="横幅" rows="縦幅"></textarea> |
textareaの説明
テキストの入力エリアを作ります。横幅と縦幅の指定をすることができます。横幅と縦幅はスタイルシート（CSS）で指定することも可能です。
nameはサーバにデータを送信した際、name属性に設定した名前が送信されます。
colsとrows
colsはテキストエリアの横幅のサイズを指定します。
rowsはテキストエリアの縦幅のサイズを指定します。
※cols , rows のサイズ指定をする時によく間違ってしまうケースがあるのですが、下の例で説明すると cols="40" が正しい書き方です。 cols="40px" と書いてしまうことがあります。間違えてpxをつけてしまうことがありますので、気をつけましょう。
autofocus
ブラウザ読み込み時に入力欄が選択された状態になります。ページが読み込まれた際にautofocusを指定した場所まで移動してしまうので注意が必要です。入力フォームがホームページのファーストビュー内に収まる場合に使います。下のように書きます。
<textarea name="question" autofocus></textarea>
maxlength
textareaに入力できる最大文字数を決めることができます。指定しなければ無限に入力できるようになってしまいます。
placeholder
入力欄にテキストを表示します。使い方は入力例をあらかじめ入力しておくことでユーザーの入力補助として利用します。
プレビュー
textareaはテキストエリアに入力された情報をサーバに送信する際に使用します。form とともに使います。（お問い合わせフォームなどに使用）送信ボタンも必要になります。
フォームの使い方については参考書籍で勉強されることをお勧めします。プログラミング言語PHPなどの知識が必要となります。サーバ側で送信されたデータを受け取るという仕組みです。
formについては「formの使い方」の記事をご覧ください。
