気の向くままに辿るIT/ICT/IoT
HTML/XHTMLタグ・要素・属性・属性値

TEXTAREA テキストエリア

ホーム前へ次へ
複数行入力できるボックスを作りたい!『textareaタグ編』

TEXTAREAテキストエリアタグ・要素

TEXTAREA要素・タグとは

 textareaタグ・要素は、HTML/XHTMLファイルの<body></body>タグの内側に記述でき、更に<form>~</form>タグ内にセットしてフォームの一部としても利用できます。

◆サンプル1

◆サンプル2

◆サンプル3

◆サンプル4

 複数行入力・表示ができるテキストボックスはTEXTAREA要素といい、<textarea></textarea>をTEXTAREA開始タグ・終了タグ(この内側に書かれる内容を要素内容)と呼び、FORMタグの内側に以下のように記述します。


     <form>
         <textarea>


         </textarea>
     </form>

TEXTAREA要素・タグの属性

 textareaタグ・要素とその属性については、InternetExplorerとNetscape Navigator(から続く各ブラウザ)独自仕様もあり、またHTML4/XHTML1/HTML5で一部異なる仕様があります。

textareaタグ・要素と属性と旧IE/Netscapeにおける独自仕様

旧IE/Netscape何れかの独自拡張を含む仕様

 TEXTAREA要素には、NAME、COLS、ROWS、WRAP属性(IE/Netscape独自拡張)があります。

 NAME属性を設定しておくと、ホームページに送信フォームを設置して送信された時にフォーム内のどこのテキストエリアに記述されたものかがわかります。

 COLS属性は、TEXTAREAの幅を半角文字数で指定しますので1行に全角20文字記述できるようにしたい場合には、[cols="40"]のようにCOLS属性には倍の数値を入れます。

 ROWS属性は、TEXTAREAの行数を設定するものでページを開いた時に記入スペースを3行にしたい場合には、[rows="3"]のように設定します。

 WRAP属性は、IEとNetscapeの独自拡張機能から生まれ「画面上と送信されるデータ」に改行を入れるか入れないかの設定でオプション値には、[soft][hard][off]があり、[wrap="soft"]などと設定します。

 IEでは[soft]が、Netscapeでは、[off]が既定(デフォルト)になっています。

 [off]は、「画面上も送信されるデータも改行されない」設定、[soft]は、「画面上では改行され、送信データは改行されない」設定、[hard]は、「画面上も送信データも改行される」設定です。

 尚、scroll属性にautoを設定すると必要に応じてブラウザが縦横のスクロールバーを表示するようになっており、scroll属性を設定すればスクロールバー表示を操作することができます。

HTML4/XHTML1/HTML5におけるtextareaタグ・要素と属性

 textarea要素で利用できる属性は下記の通りです。

HTML4/HTML5/XHTML1共通】

cols/rows


disabled/readonly


accesskey/class/dir/id/lang/name/style/title/tabindex


onblur/onchange/onclick/ondblclick/onfocus/onkeydown/

onkeypress/onkeyup/onmousedown/onmousemove/onmouseout/

onmouseover/onmouseup/onselect


【XHTML1固有】

xml:lang/xml:space


【HTML5固有】

form/maxlength/autofocus/required/placeholder/wrap


contenteditable/contextmenu/draggable/dropzone/hidden/spellcheck


onabort/oncanplay/oncanplaythrough/oncontextmenu/

ondrag/ondragend/ondragenter/ondragleave/ondragover/

ondragstart/ondrop/ondurationchange/onemptied/onended/

onerror/oninput/oninvalid/onload/onloadeddata/

onloadedmetadata/onloadstart/onmousewheel/onpause/

onplay/onplaying/onprogress/onratechange/onreadystatechange/

onreset/onscroll/onseeked/onseeking/onshow/onstalled/

onsubmit/onsuspend/ontimeupdate/onvolumechange/onwaiting

textareaタグ・要素の属性設定方法

 属性は、例えば下記のように設定します。


     <form>
         <textarea name="namaedayon" cols="40" rows="3" wrap="soft">


         </textarea>
     </form>

 更に以下のようなこともできます。


<textarea>~</textarea>に予め文字を入力しておくとサンプル2~4のようになります。
<textarea>タグに[readonly]を設定する事でサンプル3のように入力を受け付けません。
<textarea>タグに[disabled]を設定する事でサンプル4のように使用不可状態となり入力を受け付けません。

CSS/overflowプロパティによるtextareaボックスのスクロールバー表示操作

 また、CSSを使うとスクロールバーを非表示にする事ができるようになります。

◆サンプル5

◆サンプル6


<form>
   <textarea name="namaedayon" cols="40" rows="3" wrap="soft" readonly style="overflow:hidden ;">

textareaのスクロールバー消すのにはどうしたらいいんだろう。。。この状態でスクロールバー消したら読めなくなるけどさ。。。でも知りたいよね。。。うーん。。。どうしよう。。。

   </textarea>
</form>

サンプル6は<textarea>タグに[style="overflow:hidden ;"]を設定して(縦横両方の)スクロールバーを非表示にしています。

上記はHTMLですがXHTMLでは[readonly][disabled]は、それぞれ[readonly="readonly"][disabled="disabled"]と設定します(因みにHTMLでこの設定をしても有効だと思います)。

 同様に下記のような設定もできます。

[ style="overflow:auto ;" ]→スクロールバーを自動表示

[ style="overflow:scroll ;" ]→スクロールできる状態

[ style="overflow:visible ;" ]→常時スクロールバーを表示

*自動表示など実際の表示状態はブラウザに依存。
*但し、サンプル6のスクロールバーは消えますし、ホイール付きのマウスでもスクロールはできませんが、カーソルを受け付ける為、キーボードの矢印キーではスクロールできます(比較的古いIEでは動かない場合があります)。

 また、縦スクロールバー/横スクロールバーの一方を非表示にすることもできますが、IEとその他ブラウザでは設定方法が異なったり、旧バージョン含め、未対応のブラウザもあるかもしれません。

 overflowプロパティ自体はCSS1では定義されておらず、CSS2(CSS 2.0/CSS 2.1)では定義されたものの縦スクロールバー/横スクロールバーの何れか一方を制御するoverflow-x/overflow-yやoverflowx/overflowyはブラウザ独自拡張でCSS2でも定義されていませんが、未だ勧告には至っていないもののCSS3ではoverflowプロパティの再定義によってoverflow-x/overflow-yが定義される予定です。

 尚、CSSのoverflowプロパティなら、そもそもHTML/XHTMLのtextarea要素を使用しなくてもスクロールするボックスを作成可能です。
(overflowの値にautoを設定する場合、Firefox等ブラウザによっては外側と内側の要素のwidth/heightのサイズ差を十二分に確保する必要がある場合があります。)

CSS2 overflow / CSS3 overflow

W3C CSS Box Model

【IEの場合】

縦スクロールバーを消す時には[overflow]に[-y](ハイフン付き)を設定します。

[style="overflow-y:hidden ;"]

横スクロールバーを消す時には[overflow]に[-x](ハイフン付き)を設定します。

[style="overflow-x:hidden ;"]

※rows属性を設定する場合、設定値を2以上にしないと1では表示スペースがなくなります。
※尚、rows属性を設定しない場合は、期待通りの結果になります。

【IE以外の対応ブラウザの場合】

縦スクロールバーを消す時には[overflow]に[y]を設定します。

[style="overflowy:hidden ;"]

横スクロールバーを消す時には[overflow]に[x]を設定します。

[style="overflowx:hidden ;"]

※Firefoxでは、この設定またはIE同様の設定でも可のバージョンもあります。

 このようにHTML/XTHMLタグにstyle属性を使用してスタイルシートを設定する手法をインラインスタイル設定といいますが、この他、そのファイル内全体に有効なヘッダスタイル情報設定やcssを別ファイルに設定してサイト全体に適用する外部スタイルシート設定といった方法もあります。

各種HTMLとHTMLタグ/要素・属性・属性値

ホーム前へ次へ