HTML<textarea>タグの使い方を解説!フォーム内にテキストエリアを設置する

Webページを作成するうえで便利なのがお問い合わせフォーム。その中でも、読者が自由にテキストを入力できるテキストエリアはとても便利ですよね!意見や、質問、要望などを自由に記載できるテキストエリア。

テキストエリアの設置方法とは?

今回は、textareaタグの

・基本的な使い方
・textareaタグの装飾方法

について説明します。さらにテキストエリアの範囲を広げたり、使いやすくしたり、CSSでの装飾方法をサンプルコード付きで解説します。

textareaタグとは

textareaタグの読み方

textareaタグは「テキストエリアタグ」と読みます。

textareaタグの説明

texareaタグは複数行の入力欄を生成するタグで、Webサイトのフォームの部品の一種として利用されます。

textareaタグで利用できる属性

textareaタグではグローバル属性に加えて、以下の属性を使うことができます。

属性 説明
autocomplete  要素に入力される内容をブラウザ側で自動補完するのを許可するかどうかを指定する属性です。
autofocus  ブラウザが読み込みをしたときに、要素に自動でフォーカスをあてるかどうかを決める事ができる属性です。
cols  テキストエリアの桁数 (水平方向の文字数) を指定する属性です。
 disabled  ユーザーによる操作を無効にするかどうかを指定する属性です。
 form  input要素が所属するform要素を指定する属性です。
 maxlength  要素の最大文字数を指定する属性です。
 minlength  要素の最小文字数を指定する属性です。
 name  要素の名前を定義する属性です。
 placeholder  フォームの入力例や入力内容の説明を指定する属性です。
 readonly  入力できる要素を読み取り専用にしてユーザーが入力できないようにする属性です。
 required  入力が必須の要素かどうかを定義する属性です。
 rows  テキストエリアの行数 (垂直方向の文字数) を指定する属性です。
 spellcheck  要素のスペルチェックを有効にするかどうかを指定する属性です。
 wrap  テキストの折り返しを指定する属性です。
MEMO
グローバル属性は、HTMLの全要素で使用可能な属性です。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

textareaタグの基本的な使い方

textareaタグの使い方

textareaタグはフォーム内、つまりformタグの間で使用される要素です。そのため<form></form>の間に<textarea>を入れています。

textarea内に何を記入させるかの指示は、<textarea></textarea>の間に記載することができます。デフォルトでは記入欄が狭いので、rowsで高さを、colsで幅を広く設定しています。

高さと幅の設定は要素でサポートされていますので、別途CSSで装飾する必要はありません。

See the Pen
textarea基本
by rabbittyu (@rabbittyu)
on CodePen.

textareaタグの装飾方法

textareaタグ内でplaceholder属性を使用する

ここではtextareaタグ内で使用できる、placeholder属性を使用しました。見た目は基本編で紹介したテキストエリアと似ていますが、入力内容の指示はplaceholderで行う方が適しています。

実際に何か文字を入力してみてください。入力すると背景の文字が消えていく、最もよく見かけるテキストエリアが作成できましたね。

See the Pen
textarea装飾①
by rabbittyu (@rabbittyu)
on CodePen.

デフォルトの見た目を変更する

テキストエリアのデフォルト時の設定を変更しました。枠線を太くし、角丸になるよう設定しています。さらに、テキストの大きさも見やすくなるように、少し大きくしました。

See the Pen
textarea装飾③
by rabbittyu (@rabbittyu)
on CodePen.

フォーカス時の見た目を変更する

textearea:focusでfocus時の見た目を変更しています。border: solidで枠線の設定を、outline: noneでデフォルトの設定を消去しています。さらにborder-radiusで枠線を角丸に表示するように設定しました。

こうすればフォーカスされていることが、ユーザーに伝わりやすくなりますね!

See the Pen
textarea装飾②
by rabbittyu (@rabbittyu)
on CodePen.

まとめ

今回はtextareaタグの使い方を解説しました。textareaタグはユーザーの意見や要望を直に取り入れられる、便利なフォームの部品です。

  • textareaタグはフォームでの文字入力を情報するときの部品
  • textareaタグの幅の設定はcols属性を、高さはrows属性で変更できる
  • textarea内への指示はplaceholder属性で行う

以上3点さえ抑えておけば、textareaタグの使い方はマスターしたも同然!さらに使い心地をよくするのであれば、文字サイズやフォーカス時の見た目を変更するのが良いでしょう。

参考文献:
MDN web docs <textarea>
HTMLクイックリファレンス
CODE KITCHEN

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?