トップページ  > HTML5  > <textarea>

★HTML5タグリファレンス

<textarea> …… 複数行のテキスト入力欄を作成する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10

<textarea>タグは、複数行のテキスト入力欄を作成する際に使用します。

cols属性は、一行当たりの最大文字数の目安を指定する際に使用します。 cols属性の値として指定できるのは、1以上の正の整数です。 何も指定しない場合の初期値は20です。

rows属性は、表示行数を指定する際に使用します。 rows属性の値として指定できるのは、1以上の正の整数です。 何も指定しない場合の初期値は2です。

例えば、cols="20" rows="2" を指定すると、一般的なブラウザでは、 1行当たり約20文字分が表示される程度の横幅、および、2行分が表示される程度の高さで テキスト入力欄が表示されます。

readonly属性は、ユーザーによるテキスト編集を不可にして読み取り専用にする際に使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

textarea要素は、HTML5ではautofocus属性・form属性・maxlength属性・placeholder属性・required属性・wrap属性が新たに追加されています。

required属性は、入力必須を指定する場合に使用します。 required属性を指定すると、入力欄が空の状態でフォーム送信しようとすると値の入力が求められます。 同時にreadonly属性を指定している場合には、このバリデーションは無効となります。

maxlength属性は、入力可能な最大文字数を指定する際に使用します。 例えば、maxlength="20"を指定すると、maxlength属性がサポートされているブラウザ(Google Chromeなど)では、 ユーザーは最大20文字までしか入力できなくなります。

wrap属性は、入力テキストの改行ルールを指定する際に使用します。 指定できる値は、soft、または、hardの二種類で、初期値はwrap="soft"です。 wrap="hard"を指定する場合には、同時にcols属性を指定する必要があります。

placeholder属性は、ユーザー入力に関するヒントを短めのテキストで指定する際に使用します。 例えば、入力欄に初期値として「ご意見・ご感想をご記入ください」などのヒントを示してユーザーの操作を補助することができます。 ヒントが長くなる場合には、title属性のほうがより適しているでしょう。 また、placeholder属性でその入力欄の項目名を表すべきではありません。 このような目的には<label>を使用してください。

尚、<textarea>~</textarea>の内容は、初期入力値となります。 placeholder属性の指定はヒントテキストであり、一般的なブラウザでは入力欄をフォーカスすると消えます。 それに対して<textarea>~</textarea>の内容は初期入力値であり、 この値をユーザーが編集して利用することもできます。 <textarea>~</textarea>の初期入力値と、placeholder属性の値を同時に指定すると、 一般的なブラウザでは、初期入力値が優先されてplaceholder属性の指定は表示されなくなるようです。

■属性

autofocus属性
自動フォーカスを指定する(autofocus)
cols属性(初期値は20)
一行当たりの最大文字数の目安を指定する
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定
maxlength属性
入力可能な最大文字数を指定
name属性
入力フィールドの名前を指定
placeholder属性
ユーザー入力に関するヒントを短めのテキストで指定
readonly属性
ユーザーによるテキスト編集を不可にして読み取り専用にする(readonly)
required属性
入力必須を指定
rows属性(初期値は2)
表示行数を指定する
wrap属性
入力テキストの改行ルールを指定

■使用例

HTMLソース

<p>
<label for="kanso">ご意見・ご感想:</label><br>
<textarea id="kanso" name="kanso" cols="40" rows="4" maxlength="20" placeholder="ご意見・ご感想をご記入ください"></textarea>
</p>>
↓↓↓

ブラウザ上の表示


▲ページ先頭へ
トップページ  > HTML5  > <textarea>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ