[53] 文章 (複数行のテキスト) を入力してもらおう textarea要素

<input type="text">は「1行のテキストフィールド」を作る要素でしたが、
今回の<textarea>要素は、複数行のテキストフィールドを作る要素です。

フォームでよく見るコレね↓

使用する要素	<textarea> 〜 </textarea>

textareaの属性 （一覧はこちら）	name	：<textarea>に固有の名前をつける
	cols	：1行の文字数（ボックスの幅）を指定
	rows	：行数（ボックスの高さ）を指定
	wrap	：wrap=hard で改行コードを入れて送信
	maxlength	：最大文字数を指定する
	readonly	：読み取り専用にする
	disabled	：使用不可の状態にする
	dirname	：文字の書式方向の送信に使う名前
	required	：必須項目にする
	placeholder	：入力見本を表示
	autofocus	：ロード後、自動的にフォーカスする
	form	：親の<form>のID名を呼び出して関連づける

<textarea>でテキストフィールドを作ろう

ではさっそく使ってみましょう。まずは基本のカタチです。

●サンプル1
name属性は、ユーザの入力文とセットで送信されるので、必ず指定しましょう。
また、<textarea> 〜 </textarea>の間に「初期値」としてテキストを入れることができます。

入力してください。

HTMLはこちら ↓

<form>
<textarea name="comment1">入力してください。</textarea>
<input type="submit" value="送信する">
</form>

上の例の、初期値として書いたテキストは、ユーザが消さなければ残って送信されます。
placeholder属性を使えば、ユーザが入力し始めると消去されるので、残って送信されることはありません。

HTMLはこちら ↓

<form>
<textarea name="comment1-2" placeholder="入力してください。"></textarea>
<input type="submit" value="送信する">
</form>

テキストフィールド内の文字数、改行などの指定

●サンプル2
cols属性で1行の文字数を、rows属性でテキストフィールドの行数を指定します。
また、maxlength属性で入力できる最大文字数を指定することができます。

HTMLはこちら ↓

<form>
<textarea name="comment2" cols="30" rows="3" maxlength="80"
 placeholder="80字以内で入力してください。"></textarea>
<input type="submit" value="送信する">
</form>

●サンプル3
<textarea>要素は、ユーザが改行した位置で「改行コード」（%0D%0Aとか）が加えられて送信されます。
ということは、ユーザが改行しなければ、そのままダラ〜っと長い1行で送信されます。

そんな時のために、wrap属性で、送信時に改行コードを入れる指定ができます。
デフォルトは wrap="soft"（改行無し）です。
wrap="hard" と指定すれば、cols属性で指定した文字数 で改行コードが加えられて送信されます。ですので、wrap="hard" を使う時は cols属性は必須です。
ユーザが行った改行もイキで、さらに wrap="hard" の改行コードが追加されます。

HTMLはこちら ↓

<form>
<textarea name="comment2" cols="30" rows="3" maxlength="80" wrap="hard"
 placeholder="80字以内で入力してください。"></textarea>
<input type="submit" value="送信する">
</form>

readonly属性と disabled属性

<textarea>要素は、readonly属性と disabled属性のどっちも使えます。違いはこちら ↓ です。

●サンプル3
readonly属性を使うと、読み取り専用になります。ユーザは入力できないのですが、初期値で設置したテキストはname属性と一緒に送信されちゃいます。
disabled属性は、使用不可能になり、送信ボタンを押しても何も送信されません。

（readonly使用）カスタマーセンターはただいま準備中です。もうしばらくお待ちください。 （disabled使用）カスタマーセンターは現在ご使用になれません。

HTMLはこちら ↓

<form>
<p>
<textarea name="comment3-1" readonly cols="30">
カスタマーセンターはただいま準備中です。もうしばらくお待ちください。
</textarea>
<textarea name="comment3-2" disabled cols="30">
カスタマーセンターは現在ご使用になれません。
</textarea>
</p>
<input type="submit" value="送信する">
</form>

<textarea>の属性一覧

<textarea>で使える属性をまとめました。

name="部品の名前（任意のテキスト）"

送信先プログラムが部品を見分けるための名前なので、必ずつけておきましょう。
「テキストエリア名=ユーザが入力した文」というカタチで、セットで送信されます。

<textarea name="comment"></textarea>

cols="1行の文字数（ボックス幅）"　rows="行数（ボックス高さ）"

cols属性、rows属性のデフォルト値は、半角で20文字と2行です。この2つの属性を指定しなければ、入力フィールドボックスはデフォルトで表示されます。
ですので、サイズをこっちで指定したいときに使います。

<textarea name="comment" cols="30" rows="5"></textarea>

wrap="hard"（または "soft" ）　 new

wrap属性は「送信時に改行するかどうか」を指定します。
wrap="soft"がデフォルトで改行コード無しで送信されます。wrap属性を指定しなければこの状態で送られます。
wrap="hard"では、cols属性で指定された1行の文字数ごとに改行コードを加えて送信。
ですので、wrap="hard"にするときは、cols属性は必須です。

<textarea name="comment" cols="30" rows="5" wrap="hard"></textarea>

maxlength="最大文字数"

maxlength属性で、最大文字数を指定すると、それ以上は入力できなくなります。

400字までで入力してください：
<textarea name="comment" maxlength="400"></textarea>

readonly（または「readonly=""」「readonly="readonly"」 ）　

「読み取り専用（リードオンリー）」になり、ユーザはテキストフィールドの操作ができませんが、初期値のテキストは送信されます。

<textarea name="comment" readonly>初期値のテキスト</textarea>

disabled（または「disabled=""」「disabled="disabled"」 ）　

「使用不可」になります。入力も選択もできない状態で、何も送信されません。

<textarea name="comment" disabled>初期値のテキスト</textarea>

dirname="文字の書式方向の送信に使う名前（任意のテキスト）"

この名前と「入力内容の書字方向（ltr または rtl）」がセットで送信される。
（自動判別されて送信される）
下記の場合は「memo=Hello&exampleDir=ltr」と送信される。
アラビア語のような「右から左」の書式の場合は、末尾が「=rtl」となる。

<textarea name="memo" dirname="exampleDir">Hello</textarea>

required（または「required=""」「required="required"」 ）　 new

「入力必須」になります。入力せずに送信ボタンを押すとアラートが出ます。

<textarea name="comment" required></textarea>

placeholder="入力見本のテキスト"　 new

入力見本を入れられます。ユーザが記入を始めると自動的に消去されます。

<textarea name="request" placeholder=”宅配ボックス使用などご要望をどうぞ”></textarea>

autofocus（または「autofocus=""」「autofocus="autofocus"」 ）　 new

HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
● autofocus属性は、1つのHTML文書に1つだけ。（そりゃそうだ！）

<textarea name="comment" autofocus></textarea>

form="<form>要素のID"　 new

form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<textarea>要素が<form>要素の外に出ていても機能します。

<textarea name="comment" form="ex1"></textarea>
<!-- 出てる↑ -->
<form method="post" action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

このほかグローバル属性も使います

当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は<label>要素です。
これ、単独でフォームの部品になるわけではありませんが、けっこうよく使う大事な要素です。
ユーザの使い勝手を良くするために、項目名（ラベル）とフォーム部品を関連づける役目です。