フォームの中にテキスト入力フィールドを配置します。<input> のテキスト入力フィールドとは異なり、複数行のテキストを入力することができます。

目次

テキスト入力フィールドに入力フォーカスが来たときにIME(日本語変換)を自動的にオンにしたい場合は、CSSスタイルシート属性 ime-mode を使用します。

構文

textareaはformの子要素である。

<form>
  <textarea>
    <!-- テキストエリアに表示する初期値 -->
  </textarea>
</form>

開始タグと終了タグの間には、テキストエリアに表示する初期値を指定する。初期値がない(空欄)場合には、省略できる。

属性

textarea要素には、次の属性を指定できる。

class
スタイルシートのクラス
cols
列数。必須属性で省略不可。
disabled
disabled属性を指定したtextarea要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したtextarea要素の値は、サブミット時にフォームデータを送信しない。
id
要素の識別子
name
名前を指定します。フォームデータを受け取ったモジュール(サーブレットや JSP など)でこのデータを識別するための名前です。
placeholder
何も入力していないときに表示される文字列。HTML5で新たに追加された属性。
readonly
この属性を指定すると、テキストを入力できないようになります。
rows
行数。必須属性で省略不可。
style
スタイルシート
title
タイトル
wrap
自動改行するか否かを指定します。
wrap 属性
意味
off自動改行しません
hard表示上も送信するデータも自動改行します
soft表示上は自動改行しますが、送信するデータは自動改行しません(規定値)

DTD

HTMLの各要素はDTD(文書型定義)によって定義されています。textarea要素がDTDでどのように定義されているかを見るには、次のリンクをクリックしてください。

HTMLタグ <textarea> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <textarea rows="3" cols="25">このように文字列が表示されます。文字列を入力することもできます。</textarea>
</form>

Google Chromeでは、テキストエリアの右下をマウスでドラッグすることで、大きさを変えることができる。

placeholder

textarea要素のplaceholder属性にプレースホルダを指定できる。プレースホルダとは、その入力テキストエリアに表示される説明の文字列である。

<form>
  <textarea cols="25" placeholder="ここに説明を入力します。"></textarea>
</form>

readonly

textarea要素にreadonly属性を指定すると、テキストエリアに入力できなくなる。

readonly属性に指定する属性値はなんでもよいが、慣習的に属性名と同じreadonlyが使われることが多い。

<form>
  <textarea readonly="readonly">入力できません。</textarea>
</form>

イベント

イベント属性の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form name="form2">
  <textarea cols="10" rows="2"
    onfocus="onEvent('onfocus')"
    onblur="onEvent('onblur')"
    onselect="onEvent('onselect')"
    onchange="onEvent('onchange')">
  </textarea>
  イベント: <input type="text" name="text2" readonly></input>
</form>

<script>
  function onEvent(type) {
    document.form2.text2.value = type;
  }
</script>

イベント:

文字数

textareaに入力された文字数は、入力された文字列(value値)のlengthプロパティを参照する。なお、改行も1文字としてカウントされる。

<textarea onkeyup="countLength(value, 'len')"></textarea>

<p>文字数:<span id="len">0</span></p>

<script>
  function countLength(val, id) {
    document.getElementById(id).innerHTML = val.length;
  }
</script>

文字数:0

関連記事

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送