cman.jpWEBページ作成
広告
<textarea> 「複数行のテキスト入力」[読み方：テキストエリア]
<textarea>は、複数行のテキスト入力を行う場合に使用します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<textarea> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ リストされた要素、ラベル付け可能な要素、送信可能な要素、リセット可能な要素、自動大文字継承要素、フォーム関連要素 パブバブルコンテンツ | フレージングコンテンツを子要素にもてる場所 | テキスト | 不可 |
<textarea> の属性
【構文】
<textarea name="in01" col="50" rows="10" maxlength="100" ・・・>
</textarea>
</textarea>
| 属性 | 意味 | 値のサンプルなど | ||||||
|---|---|---|---|---|---|---|---|---|
| autocomplete="on" or "off" | オートコンプリート機能の利用有無 ※HTML5で追加 |
| ||||||
| autofocus | フォーカス（カーソル）を設定 ※HTML5以降にグローバル属性に変更 | "autofocus" | ||||||
| cols="値" | 1行あたりの文字数を指定 | 1以上の整数 初期値＝20 | ||||||
| dirname="固有名" | 文字方向のサーバ送信固有名 ※HTML5で追加 | "name01" | ||||||
| disabled | 入力の無効化 | "disabled" | ||||||
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" | ||||||
| inputmode="値" | 入力モードを指定 ※HTML5以降にグローバル属性に変更 | "text"など | ||||||
| maxlength="文字数" | 入力可能最大文字数 ※HTML5で追加 | "50"(文字数) | ||||||
| minlength="文字数" | 入力可能最小文字数 ※HTML5で追加 | "50"(文字数) | ||||||
| name="固有名" | 入力に付ける固有名 | "text1" | ||||||
| placeholder="テキスト" | 入力ヒントの表示 ※HTML5で追加 | "氏名を入力ください" | ||||||
| readonly | 読み取り専用 | "readonly" | ||||||
| required | 入力を必須とする ※HTML5で追加 | "required" | ||||||
| rows="値" | 表示行数を指定 | 1以上の整数 初期値＝2 | ||||||
| wrap="値" | 送信時の改行要否を指定 ※HTML5で追加 |
| ||||||
| 廃止された属性 |
| |||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<textarea>タグのサンプル
初期表示あり
フォーカスの初期設定【autofocus】
入力の無効化【disabled】
入力欄に入力ヒントの表示【placeholder】
読み取り専用【readonly】
入力必須【required】
<
textarea name="in01" cols="30" rows="3" maxlength="90">
内容を入力してください。</textarea>
内容を入力してください。</textarea>
フォーカスの初期設定【autofocus】
<
textarea name="in01" cols="30" rows="3" maxlength="90" autofocus>
内容を入力してください。</textarea>
内容を入力してください。</textarea>
ブラウザによって表示が異なります
| IE11 |
|---|
 |
| Chrome37 |
 |
| Firefox31 |
 |
| Safari5.1 |
 |
入力の無効化【disabled】
<
textarea name="in01" cols="30" rows="3" maxlength="90" disabled>
内容を入力してください。</textarea>
内容を入力してください。</textarea>
入力欄に入力ヒントの表示【placeholder】
<
textarea name="in01" cols="30" rows="3" maxlength="90"
placeholder="内容を入力してください。"></textarea>
placeholder="内容を入力してください。"></textarea>
読み取り専用【readonly】
<
textarea name="in01" cols="30" rows="3" maxlength="90" readonly>
内容を入力してください。</textarea>
内容を入力してください。</textarea>
入力必須【required】
<
textarea name="in01" cols="30" rows="3" maxlength="90" required>
</textarea>
</textarea>
送信(SUBMIT)時に入力必須チェックが行われます。
※非対応のブラウザもあるので注意が必要
ブラウザによって表示が異なります。表示イメージは、<input type="text">を参照ください。
<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>
<!--
.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>
スタイルシートを使用することで、色々な入力が可能となります。
留意事項
- wrap="hard"を指定する場合は、同時にcolsの指定が必要です。
- placeholderに項目名を指定すべきではありません。項目名の指定は<label>を使用します。
また、ヒントが長い場合は、<title> を使用します。 - １行のみの入力を行う場合は<input type="text">を使用します。
広告