フォームの中にテキスト入力フィールドを配置します。<input> のテキスト入力フィールドとは異なり、複数行のテキストを入力することができます。
テキスト入力フィールドに入力フォーカスが来たときにIME(日本語変換)を自動的にオンにしたい場合は、CSSスタイルシート属性 ime-mode を使用します。
textareaはformの子要素である。
<form>
<textarea>
<!-- テキストエリアに表示する初期値 -->
</textarea>
</form>
開始タグと終了タグの間には、テキストエリアに表示する初期値を指定する。初期値がない(空欄)場合には、省略できる。
textarea要素には、次の属性を指定できる。
値 | 意味 |
---|---|
off | 自動改行しません |
hard | 表示上も送信するデータも自動改行します |
soft | 表示上は自動改行しますが、送信するデータは自動改行しません(規定値) |
HTMLタグ <textarea>
の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<form>
<textarea rows="3" cols="25">このように文字列が表示されます。文字列を入力することもできます。</textarea>
</form>
Google Chromeでは、テキストエリアの右下をマウスでドラッグすることで、大きさを変えることができる。
textarea要素のplaceholder属性にプレースホルダを指定できる。プレースホルダとは、その入力テキストエリアに表示される説明の文字列である。
<form>
<textarea cols="25" placeholder="ここに説明を入力します。"></textarea>
</form>
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>
HTMLタグには次のものがある。