textarea要素で複数行のテキスト入力欄を設置する【HTML】

フォームなどで複数行のテキストを入力する欄を設置するときにはtextarea要素を使います。

textarea要素の内容は、初期値として入力欄にあらかじめ表示されます。

textarea要素で使える属性

textarea要素で指定できる属性には以下のようなものがあります。

autofocus（オート・フォーカス）
cols（カラムス）
rows（ロウズ）
dirname（ディレクショナリティ・ネーム）
disabled（ディスエーブルド）
form（フォーム）
maxlength（マックス・レンス）
name（ネーム）
placeholder（プレースホルダー）
readonly（リード・オンリー）
required（レクワイアド）
wrap（ラップ）

autofocus（オート・フォーカス）

autofocus属性を指定することで、Webページが読み込まれたら、autofocus属性が指定されたテキストの入力欄にフォーカスが自動的に移動されます。

autofocus属性は値を必要としない論理属性です。

cols（カラムス）

cols属性でテキスト入力欄の幅を文字数で指定することができます。

初期値として「20」が指定されています。

rows（ロウズ）

rows属性でテキスト入力欄の高さを文字数で指定することができます。

初期値として「2」が指定されています。

※cols属性やrows属性は、ブラウザ環境によって違いが出るそうです。

dirname（ディレクショナリティ・ネーム）

dirname属性は、フォームで送信するデータの書字方向に関するクエリ値のクエリ名を指定することができます。

値に「ltr」を指定すれば左から右（left to right）に、「rtl」を指定すれば右から左（right to left）になります。

disabled（ディスエーブルド）

disabled属性を指定すると、テキスト入力が無効になります。

disabled属性は論理属性です。

form（フォーム）

form属性に任意のform要素につけたid属性値を指定することで、そのフォームとこのform属性を持つテキスト入力欄を関連づけることができます。

maxlength（マックス・レンス）

入力できる文字列の最大文字数を指定するときはmaxlength属性を使います。

このmaxlength属性を指定することで、入力制限を設けることができるんです。

name（ネーム）

name属性で、データが送信される際のクエリ名を指定することができます。

placeholder（プレースホルダー）

placeholeder属性で指定した値は、入力コントロールにダミーテキストとしてあらかじめ表示されます。

readonly（リード・オンリー）

readonly属性を指定することで、フォームの入力コントロールをユーザーが編集できないようになります。

このreadonly属性によって、ユーザーが値を変更することはできないですが、フォーム送信の際に値は送信されます。

readonly属性は値を必要としない論理属性です。

required（レクワイアド）

required属性が指定されたtextarea要素では、テキスト入力欄での入力が必須となります。

テキスト入力がない場合は、フォームの送信が行われませんが、以下の条件においては無視されます。

関連づけられたform要素にnovalidata属性が指定されている、もしくは送信ボタンにformnovalidata属性が指定されていて、入力内容の検証が無効になっている場合
同じ入力コントロールにdisabled属性、もしくはreadonly属性が付与されている場合

また、required属性は論理属性です。

wrap（ラップ）

wrap属性はテキスト入力欄における折り返しの指定ができる属性で、以下のどちらかの値を指定できます。

soft

初期値として指定されているのがsoft。

入力したテキストは入力欄の幅で自動的に折り返されるんですが、送信されるクエリに折り返しは反映されません。

hard

hardを指定すると、入力したテキストは入力欄の幅で自動的に折り返され、送信されるクエリにもその折り返しが反映されます。