本記事の日付は作成当時のものですが、2021年3月旧 Google Site に残っていた記事を引っ越して来た際に、全面的リニュアルをしています。

    タグの使い方において、属性で説明する事が必須ですが、予備知識的に、属性とはタグそれぞれに備わっている性質の事であり、値を指定する事で、様々なスタイルに変える事が可能です。文字を並べるだけでは解り難いので、下に例を挙げながら説明して行きます。

    注意としては、<textarea>にベースラインが定義されていない為、ブラウザーによって、位置が異なる場合があります。動作を予測できないので、<textare>で CSS を書く時は、vertical-align:baseline; は使用しないようにしましょう。

textarea タグの使い方

    <textarea>～</textarea>タグに囲まれると、HTMLの編集画面でも、中味がテキストとして扱われます。タグ等サンプルコードを入力しても、誤作動を招く事はありません。

    <textare>～</textarea>で囲まれた部分は初期値であり、デフォルト状態ではカーソルがイン（フォーカス）すると、編集できるエリアになりますが、アクセスするたびに初期値が表示されます。

    似ているタグに<input type="text">があり、こちらは1行のみのテキスト入力なので、そこが複数行テキストを扱える<textarea>タグとの違いです。

・ 規約等折り返しがある長いテキスト
・ SNS等のコメント欄
・ お問い合わせフォーム
・ サンプル文やコードの記述＊注

*注：
    サンプルコードだけ記入する場合、同じ役割を果たす<code>と言うタグがあり、コードの扱いに慣れているプロの方は、<code>タグでサンプルコードを書きます。詳しくは下記記事をご参照下さい。


textarea の属性

● cols ～ 行当たりの文字数（半角英数字）指定
：1以上の正の整数（デフォルト値は20）

    漢字の場合は1文字分＝半角英数字の2文字数と数えます 。作成されたウェブページで、cols の指定文字数は幅に反映されますが、文字数を制限するものではありません。

● rows ～ 表示行数を指定
：1以上の正の整数（デフォルト値は2）

    全角半角は関係なく、作成されたウェブページで指定行数を高さとして表示させますが、文字数を制限するものではありません。

● name ～ 入力フィールドの名前を指定

● readonly ～ ユーザー編集を不可にした読み取り専用

● disabled ～ 操作を無効にする

    この属性が指定されていない場合は、親要素（例えば fieldset 要素）から継承します。

HTML5 で新たに追加された属性

● autofocus ～ 自動フォーカスを指定する

    値は無く、autofocus のみを指定すると、ページアクセスと同時に、入力欄にカーソルが自動的に入る状態になります。

● form ～ 関連付けるフォームのID名を指定

    <textare>要素が関連付けられたform要素で、属性値は同じドキュメント内のform要素のidとしなければなりません。この属性を指定しない場合は、form 要素の子要素として、<textarea>を配置します。

● maxlength ～ 入力可能な最大文字数を指定
：1以上の正の整数

    指定した文字数以上は入力できなくなります、html5 をサポートしていないブラウザでは、無効になります。また、ユーザーが困惑するので、テキストエリアの付近に文字制限条件を書いておきましょう。

● minlength ～ 入力可能な最小文字数を指定
：１以上の正の整数

    指定数より少ない文字の送信はエラーになりますが、ブランク状態（0文字）で送信が可能になってしまうので、必ず required と合わせて指定します。また、ユーザーが困惑するので、テキストエリアの付近に文字制限条件を書いておきましょう。

●placeholder ～ 入力ヒントを短めのテキストで指定
：短めのテキスト

    <textare>～</textarea>内の初期入力値と同時に指定する場合は、表示されなくなります。

● required ～ 入力必須指定

    値が無く、required のみを指定します。入力欄がブランク状態で送信しょうとしても、値の入力を求められます。form などで、送信ボタンを設置してある状態で有効です。アクションのない設定では無効になります。

● wrap ～ 入力テキストの改行ルールを指定
：soft（デフォルト）～ 値に含まれる改行を全て維持しますが、改行の付加は行わない
：hard ～ cols 属性を指定した場合に限り、各行の長さが幅を超えない様、ブラウザが自動的に改行を挿入する。
：off ～ cols 属性の値を超えた部分は折り返されず、水平方向にスクロール可能になる

        cols 属性と同時に指定する必要性があります。

標準外属性とグローバル属性



● autocomplete ～ ユーザーが入力する値を明示的に入力し、ドキュメントが独自の自動補完を提供
：off ～ ブラウザは入力内容の自動補完を行わない
：on ～ ブラウザはユーザーが以前入力した値を元に、自動補完を行う

    textarea タグでこの属性を指定していない場合、ブラウザはフォームオーナーの autocomplete 属性の値を使う。

● accesskey

● class

CSS による textarea のスタイル変更

● width ～ 横幅のサイズ指定
：1以上の正の整数を値と ％ 若しくは px 若しくはem（1文字分）で指定

● height ～ 高さのサイズ指定
：1以上の正の整数を値と ％ 若しくは px 若しくはem（1文字分）で指定

● margin ～ テキストエリアの外側の余白指定
：1以上の正の整数を値と em（1文字分） 若しくは px で指定

● padding ～ テキストエリアの内側の余白指定 
：1以上の正の整数を値と em（1文字分） 若しくは px で指定

● font-size ～ 文字の大きさを指定
：1以上の正の整数を値と em（1文字分） 若しくは px で指定

● border ～ 枠線をスタイル、太さ、色を順に指定
：solid 2px #00000 （一例、それぞれの値は CSS 属性による）

● border-radius ～ 枠の四つ角を丸くする指定
：1以上の正の整数を値と px で指定

● resize ～ サイズ変更についての指定
：none ～ 縦も横もサイズを固定して、自由に変更させません
：vertical ～ 横方向のみサイズを固定
：horizontal ～ 縦方向のみサイズを固定
：auto ～ max-width、max-height、min-width、min-height と同時に指定

    textarea タグで作られたテキストエリアは、一般的にデフォルト値の横20文字縦2行で表示されますが、右下の角にはドラッグの摘みがあり、ユーザーがウェブページ上でサイズを自由に変更できます。それでは、予期しないレイアウトの乱れが生じてしまいますので、運営者側は、このような CSS 属性で対策をします。

    resize: auto; で同時に最大最小サイズを指定する事で、ウェブページのスタイルが破綻しない範囲内において、ユーザーフレンドリーを図り、ユーザー離脱を抑制する効果があります。但し、overflow: visible; は resize の auto 設定を無効にしてしまいますので、充分気を付けて下さい。

● focus {～} ～ フォーカスした textarea のスタイルを変更

    例えば、textarea: focus {border: solid 2px blue; outline:0;} の指定で、テキストエリアをフォーカスした時だけ、影の無い太さ2pxの青い枠線になります。outline は立体にみせる影部分です。スタイルの変化は一瞬でも目線を引き付けるには、有効です。






＊例：

    一般的に、何のテキストかを示す項目名を<label>タグで指定しますが、<label>タグの中で<textarea>タグを使うと、label の文字列をクリックしても、テキストエリアは自動的にフォーカスされます。それ以外の場合は、テキストエリアの中をクリックするのみで、フォーカスされます。

    フォーカスされるとは、テキストエリア内にカーソルが入って、直ちに入力できる状態です。上記のように、label タグの中で textarea タグを使わずに、同じ紐づけ効果を作り出せる<label for＝”ID名”>と<textarea id="ID名">もあります。

    label タグと合わせて使う事は必須ではありませんが、アクセシビリティやユーザービリティの向上に繋げられるので、積極的に使うと良いでしょう。