textarea要素
textarea要素は複数行入力ボックスをマークアップするための要素です。
textarea要素内にテキストを記述することで複数行入力ボックスを指定することができます。
<textarea></textarea><textarea>初期値が入力されている</textarea>textarea要素には以下の属性を指定することができます。
autocomplete属性
autocomplete属性はオートコンプリート機能の有効無効を指定するための属性です。デフォルトの値は”on”ですが”off”を指定することでオートコンプリート機能を無効化できます。
<textarea autocomplete="off"></textarea>autofocus属性
autofocus属性を指定することでページロード時に自動でフォーカスが当たるようになりユーザーが手動でフォーカスを当てる必要がなくなります。
<textarea autofocus></textarea>cols属性
cols属性は複数行入力ボックスの入力行数を制御するための属性です。値には行数を数値で指定できUAはこの行数の複数行入力ボックスを表示します。
<textarea cols="10"></textarea>dirname属性
dirname属性を指定することで文字の入力方向をフォームで送信でき、値には送信時に利用されるキーを指定できます。
<textarea name="foo" dirname="KeyName">bar</textarea>上記のように指定しておくと以下の様なパラメーターがフォームで送信されます。
?foo=bar&KeyName=ltrdisabled属性
disabled属性で非活性な状態の複数行入力ボックスを作成することができます。
<textarea disabled></textarea>form属性
次のようにform要素のid属性をform属性に指定することでtextarea要素とform要素は関連付けられ、フォームの送信時にtextarea要素のデータも送信されます
<form id="form01" action="target.php">
<input type="submit" value="送信">
</form>
<textarea form="form01"></textarea>inputmode属性
inputmode属性を指定することで複数行入力ボックスにフォーカスが合った際に入力デバイスに最適なキーボード状態を伝えるための属性です。属性には以下の値を指定することができます。
| キーワード | 状態 |
|---|---|
| verbatim | ユーザー名やパスワード、製品コードのように文章ではない英数字 |
| latin | 入力支援ができるラテン文字 |
| latin-name | 入力支援ができるラテン文字（人名） |
| latin-prose | かなりの入力支援ができるラテン文字 |
| full-width-latin | 全角ラテン文字 |
| kana | 日本語におけるひらがな入力 |
| kana-name | 日本語におけるひらがな入力(人名) |
| katakana | 日本語におけるカタカナ入力 |
| numeric | 数値。可能であれば<input type=number>の利用が推奨される |
| tel | 数値や*、#などの電話番号。可能であれば<input type=tel>の利用が推奨される |
| 英数字や@、.などのメールアドレス。可能であれば<input type=email>の利用が推奨される | |
| url | 英数字や/、.といったURL。可能であれば<input type=url>の利用が推奨される |
maxlength属性
maxlength属性でユーザーが入力できる最大文字数を指定できます。
<textarea maxlength="100"></textarea>minlength属性
minlength属性でユーザーが入力できる最小文字数を指定できます。
<textarea minlength="100"></textarea>最小文字数を下回る文字数しか入力されていない場合はフォーム送信時にエラーが表示されます。
name属性
name属性でボタンの名前をつけることができ、指定した名前はデータ送信時のキーとして利用されます。
<textarea name="bar"></textarea>placeholder属性
placeholder属性で入力欄の初期に表示されるテキストを指定することができます。
<textarea placeholder="コメントを入力してください"></textarea>readonly属性
readonly属性でユーザーがフォーム内容を変更できるかどうかをコントロールすることができ、readonly属性を指定された場合は読み取り専用として扱われユーザーが入力内容を変更することができません。
<textarea readonly></textarea>required属性
required属性で必須かどうかを指定することができます。required属性を指定した要素が未入力の場合、form要素が送信される際に送信を中断してブラウザがエラーを表示します。
<textarea required></textarea>rows属性
rows属性で入力列数を制御することができます。値には列数を数値で指定できUAはこの列数の複数行入力ボックスを表示します。
<textarea rows="10"></textarea>wrap属性
wrap属性を指定することで自動改行された情報を送信するかどうかを指定することができ、以下の２つの値を指定することができます。
| 値 | 挙動 |
|---|---|
| soft | 自動で改行されたものを送信しない |
| hard | 自動で改行されたものを送信する |
デフォルトではsoftの値が指定されています。
参考URL
4.10.11 The textarea element - HTML5 - W3C
4.10.11 The textarea element - HTML5.1 - W3C
登録日 : 2015年01月18日 最終更新日 : 2015年2月1日