textareaの使い方についてまとめ

textareaの概要

textarea要素は複数行のテキスト入力欄を表示するための要素です。レビューのコメントやお問い合わせフォームなど、大量のテキストを入力する際に使用します。

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 あり

WORK REQUEST

CONTACT