textareaタグ・要素は、HTML/XHTMLファイルの<body></body>タグの内側に記述でき、更に<form>~</form>タグ内にセットしてフォームの一部としても利用できます。
◆サンプル1 |
◆サンプル2 |
◆サンプル3 |
◆サンプル4 |
複数行入力・表示ができるテキストボックスはTEXTAREA要素といい、<textarea></textarea>をTEXTAREA開始タグ・終了タグ(この内側に書かれる内容を要素内容)と呼び、FORMタグの内側に以下のように記述します。
<form> <textarea> </textarea> </form> |
textareaタグ・要素とその属性については、InternetExplorerとNetscape Navigator(から続く各ブラウザ)独自仕様もあり、またHTML4/XHTML1/HTML5で一部異なる仕様があります。
旧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属性を設定すればスクロールバー表示を操作することができます。
textarea要素で利用できる属性は下記の通りです。
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
属性は、例えば下記のように設定します。
<form> <textarea name="namaedayon" cols="40" rows="3" wrap="soft"> </textarea> </form> |
更に以下のようなこともできます。
<textarea>~</textarea>に予め文字を入力しておくとサンプル2~4のようになります。 <textarea>タグに[readonly]を設定する事でサンプル3のように入力を受け付けません。 <textarea>タグに[disabled]を設定する事でサンプル4のように使用不可状態となり入力を受け付けません。 |
また、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 ;" ]→常時スクロールバーを表示
また、縦スクロールバー/横スクロールバーの一方を非表示にすることもできますが、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のサイズ差を十二分に確保する必要がある場合があります。)
【IEの場合】
縦スクロールバーを消す時には[overflow]に[-y](ハイフン付き)を設定します。
[style="overflow-y:hidden ;"]
横スクロールバーを消す時には[overflow]に[-x](ハイフン付き)を設定します。
[style="overflow-x:hidden ;"]
【IE以外の対応ブラウザの場合】
縦スクロールバーを消す時には[overflow]に[y]を設定します。
[style="overflowy:hidden ;"]
横スクロールバーを消す時には[overflow]に[x]を設定します。
[style="overflowx:hidden ;"]
このようにHTML/XTHMLタグにstyle属性を使用してスタイルシートを設定する手法をインラインスタイル設定といいますが、この他、そのファイル内全体に有効なヘッダスタイル情報設定やcssを別ファイルに設定してサイト全体に適用する外部スタイルシート設定といった方法もあります。