WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <textarea>「複数行のテキスト入力」

<textarea> 「複数行のテキスト入力」[読み方:テキストエリア]

<textarea>は、複数行のテキスト入力を行う場合に使用します。

HTML規格HTML4.01HTML5
使用可否
広告

<textarea> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
フレージングコンテンツを子要素にもてる場所テキスト不可

<textarea> の属性

【構文】
<textarea name="in01" col="50" rows="10" maxlength="100" ・・・>
</textarea>
属性意味値のサンプルなど
autocomplete="on" or "off" オートコンプリート機能の利用有無
※HTML5で追加
意味
on使用する
off使用しない
autofocusフォーカス(カーソル)を設定
※HTML5で追加
"autofocus"
cols="値"1行あたりの文字数を指定1以上の整数
初期値=20
dirname="固有名"文字方向のサーバ送信固有名
※HTML5で追加
"name01"
disabled入力の無効化"disabled"
form="フォーム名"送信するフォームの関連付け
※HTML5で追加
"form01"
inputmode入力モダリティを選択するためのヒント
※HTML5で追加
未確定(html5.1で確定?)
maxlength="文字数"入力可能最大文字数
※HTML5で追加
"50"(文字数)
minlength="文字数"入力可能最小文字数
※HTML5で追加
"50"(文字数)
name="固有名"入力に付ける固有名"text1"
placeholder="テキスト"入力ヒントの表示
※HTML5で追加
"氏名を入力ください"
readonly読み取り専用"readonly"
required入力を必須とする
※HTML5で追加
"required"
rows="値"表示行数を指定1以上の整数
初期値=2
wrap="値"送信時の改行要否を指定
※HTML5で追加
意味
soft
(初期値)
改行しない
hard改行する
廃止された属性
  • accept
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<textarea>タグのサンプル

初期表示あり
< textarea name="in01" cols="30" rows="3" maxlength="90">
内容を入力してください。</textarea>

フォーカスの初期設定【autofocus
< textarea name="in01" cols="30" rows="3" maxlength="90" autofocus>
内容を入力してください。</textarea>
ブラウザによって表示が異なります
IE11
Chrome37
Firefox31
Safari5.1

入力の無効化【disabled
< textarea name="in01" cols="30" rows="3" maxlength="90" disabled>
内容を入力してください。</textarea>

入力欄に入力ヒントの表示【placeholder
< textarea name="in01" cols="30" rows="3" maxlength="90"
placeholder="内容を入力してください。"></textarea>

読み取り専用【readonly
< textarea name="in01" cols="30" rows="3" maxlength="90" readonly>
内容を入力してください。</textarea>

入力必須【required
< textarea name="in01" cols="30" rows="3" maxlength="90" required>
</textarea>

送信(SUBMIT)時に入力必須チェックが行われます。
※非対応のブラウザもあるので注意が必要

ブラウザによって表示が異なります。表示イメージは、<input type="text">を参照ください。


ページTOP

<textarea>タグのスタイルシートサンプル

初期表示あり
<style type="text/css">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<textarea name="in01" cols="30" rows="3" maxlength="90"
placeholder="内容を入力してください。"class="inputSample"></textarea>

スタイルシートを使用することで、色々な入力が可能となります。

ページTOP

留意事項

  • wrap="hard"を指定する場合は、同時にcolsの指定が必要です。
  • placeholderに項目名を指定すべきではありません。項目名の指定は<label>を使用します。
    また、ヒントが長い場合は、<title> を使用します。
  • 1行のみの入力を行う場合は<input type="text">を使用します。
ページTOP

関連するHTMLタグ

<form>入力フォーム域の定義
<select>セレクトボックス
<input type="text">テキスト入力
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン