column

ITコラム

colmun_main2663

プログラミングノウハウ

2017.02.27

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

<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)
HTML 【フォーム】10 ~ テキストエリア(textarea)( 本ページ )
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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属性などのグローバル属性も使えます。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ