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=ltr

disabled属性

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>の利用が推奨される
email 英数字や@、.などのメールアドレス。可能であれば<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属性を指定することで自動改行された情報を送信するかどうかを指定することができ、以下の2つの値を指定することができます。

挙動
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日

同じカテゴリー(フォーム)のエントリー

検索

スポンサードリンク

バージョン

リファレンス