textareaの使い方

textarea

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の使い方」の記事をご覧ください。