HTML 【フォーム】10 ~ テキストエリア(textarea)

colmun_main2663

<input type=”text”>で作るテキストボックスは1行のテキスト入力欄でしたが、テキストエリア(textarea)は複数行の入力欄を作る要素です。テキストエリアは、改行を加えた入力も可能となります。
今回は、フォームで使われる部品の中で、複数行の入力欄を作るtextarea要素についてまとめたいと思います。

フォームについては、以下のページもご参照下さい。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)

目次

1.textarea要素
2.テキストエリア
3.textarea要素の属性一覧

1.textarea要素

テキストボックスが1行のみの入力欄なのに対して、テキストエリアは、複数行の入力が可能な入力欄です。
テキストエリアは、textarea要素を使って作ります。

●テキストボックス(input要素のtype=”text”で作成)

●テキストエリア(textarea要素で作成)

使用する要素 <textarea>~</textarea>
textarea要素の属性 name textarea要素に固有の名前を付ける
cols 1行の文字数(入力欄の幅)を指定する
rows 行数(入力欄の高さ)を指定する
wrap wrap=hardと指定すると、改行コードを入れて送信できる
maxlength 最大文字数を指定する
readonly 読み取り専用にする
disabled 使用不可の状態にする
dirname 文字の書式方向の送信データに対して名前を付ける
required 入力必須項目にする
placeholder 入力見本を表示する
autofocus ロード後、自動的にフォーカス(選択された状態に)する
form 親のform要素のID名を呼び出して関連付けを行う

▲目次へ戻る

2.テキストエリア

●<textarea>~</textarea>間に、初期値としてテキストを入れることができます。

上の表示に対するhtmlコードは、以下の通りです。

<textarea name=”tarea1″>入力して下さい。</textarea>

name属性は、入力データとセットで送信されて、プログラム側で、どの項目の入力データなのかを判別する手段となるので、必ず指定します。
上の例の、初期値として書いたテキスト(入力して下さい。)は、ユーザが消さない場合は、そのまま入力データとして送信されます。

●初期表示するテキストをplaceholder属性で指定すると、次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<textarea name=”tarea2″ placeholder=”入力してください。”></textarea>

placeholder属性で指定したテキストは、ユーザが入力を始めると消去されます。また、入力データの初期値とは違うので、ユーザが未入力等でテキスト自体が表示されたままでも、入力データとして送信されることはありません。

●テキストエリア内の文字数と行数を指定します。

上の表示に対するhtmlコードは、以下の通りです。

<textarea name=”tarea3″ cols=”30″ rows=”3″ maxlength=”80″ placeholder=”80字以内で入力してください。”></textarea>

cols属性で1行の文字数が、rows属性でテキストエリアの行数が指定できます。
また、maxlength属性で、入力できる最大文字数を指定することができます。

●textarea要素は、送信時に改行コードを入れる指定ができます。

ユーザが入力時に改行した場合は、改行コードが加えられてデータ送信されますが、入力時に改行されない場合は、そのまま1行で送信されます。
そのような場合を想定して、wrap属性を使って、送信時に改行コードを入れる指定ができます。

wrap属性のデフォルト値は wrap=”soft”(改行無し)です。
wrap=”hard”と指定すると、cols属性で指定した文字数で改行コードが加えられて送信されます。
ですので、wrap=”hard”を使う場合は、cols属性の指定が必須です。
この場合は、ユーザが行った改行で改行コードが加えられ、さらにwrap=”hard”の改行コードが追加されます。

<textarea name=”tarea4″ cols=”30″ rows=”3″ maxlength=”80″ wrap=”hard” placeholder=”80字以内で入力してください。”></textarea>

●readonly属性を指定すると、次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<textarea name=”tarea5″ readonly>現在入力できません。</textarea>

readonly属性を指定すると、読み取り専用となります。
ユーザは入力できませんが、初期値として設定したテキスト(現在入力できません。)は、入力データとしてname属性と一緒に送信されます。

●disabled属性を指定すると、次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<textarea name=”tarea6″ disabled>現在入力できません。</textarea>

disabled属性を指定すると、使用不可能の状態になります。
readonly属性を指定した場合と違って、送信ボタンを押しても何も送信されません。

▲目次へ戻る

3.textarea要素の属性一覧

name=”テキストエリアの名前(任意のテキスト)”
送信先プログラムが部品を見分けるための名前なので、必ず指定します。
「テキストエリア名=ユーザが入力したデータ」として、セットで送信されます。

 <textarea name=”sample”></textarea>

cols=”1行の文字数” rows=”行数”
cols属性のデフォルト値は、半角で20文字、rows属性のデフォルト値は、2行です。
この2つの属性を指定しない場合は、テキストエリアはデフォルト値で表示されます。
ですので、デフォルト値以外でサイズを指定したい時に使います。

 <textarea name=”sample” cols=”30″ rows=”3″></textarea>

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

 <textarea name=”sample” cols=”30″ rows=”3″ wrap=”hard”></textarea>

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

 <textarea name=”sample” cols=”30″ rows=”3″ maxlength=”80″></textarea>

readonly または readonly=”” または readonly=”readonly”
readonly属性を指定すると、読み取り専用となり、ユーザはテキストエリアの入力等操作ができませんが、初期値のテキストを設定している場合は、そのテキストが入力データとして送信されます。

 <textarea name=”sample” readonly>入力して下さい。</textarea>

disabled または disabled=”” または disabled=”disabled”
disabled属性を指定すると、使用不可の状態になります。
入力等の操作ができない状態で、何のデータも送信されません。

 <textarea name=”sample” disabled>入力して下さい。</textarea>

dirname=”文字の書式方向の送信に使う名前(任意のテキスト)”
dirname属性で名前を付けると、その名前と入力内容の書字方向(ltr または rtl)がセットで送信されます。
(入力内容の書字方向は、自動判別されます。)
下記の場合は、「sample=文字の書式方向&dname=ltr」として送信されます。
右から左の書式の場合は、末尾が「=rtl」となります。

 <textarea name=”sample” dirname=”dname”>文字の書式方向</textarea>

required または required=”” または required=”required”
required属性を指定すると、テキストエリアが入力必須になります。
入力せずに送信ボタンを押すと、アラートが出ます。

 <textarea name=”sample” required></textarea>

placeholder=”入力見本のテキスト”
placeholder属性でテキストを指定すると、そのテキストが入力見本として表示されます。
ユーザが入力を始めると、自動的に消去されます。

 <textarea name=”sample” placeholder=”入力して下さい。”></textarea>

autofocus または autofocus=”” または autofocus=”autofocus”
autofocus属性を指定すると、HTML文書のロード直後、その要素が自動的にフォーカスされます。
性質上、autofocus属性は、1つのHTML文書に1つだけ指定します。

 <textarea name=”sample” autofocus></textarea>

form=”form要素のID”
form属性で、form要素に付けたID指定すると、form要素とtextarea要素の関連付けができます。
そのような関連付けを行うと、textarea要素がform要素の外に出ていても、入力されたデータを問題なく送信することができます。

 <textarea name=”sample” form=”form1″></textarea>
 <form method=”post” action=”sample.cgi” id=”form1″>
 <input type=”submit” value=”送信する”>
 </form>

この他に、id属性、class属性、title属性、style属性などのグローバル属性も使えます。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です