TEXTAREA 要素

　　複数行のテキスト

［カテゴリー］

フローコンテンツ
フレージングコンテンツ
インタラクティブコンテンツ
Listed，labelable，submittable，resettable フォーム関連要素
パルパブルコンテンツ

［要素を使用できる文脈］

フレージングコンテンツを入れることができる場所

［コンテンツモデル］

テキスト

［コンテンツ属性］

グローバル属性
autocomplete ：データの自動補完（ on の場合．off にすると行わない）．例えば，入力フィールドをクリックすると候補が表示される．
autofocus ：オートフォーカス
cols ：一行当たりの最大文字数
dirname ：文字の表示方向（ "ltr" or "rtl" ）
disabled ：要素を無効にする
form ：フォーム要素との関連付け（使用例１）
maxlength ：最大許容データ長
name ：要素の名前
placeholder ：入力に対するヒント
readonly ：読み取り専用
required ：入力必須
rows ：表示行数
wrap ：改行規則（ "soft" or "hard"，hard の場合は cols も指定）

［DOM インタフェース］

interface HTMLTextAreaElement : HTMLElement {
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute unsigned long cols;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString inputMode;
           attribute long maxLength;
           attribute DOMString name;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long rows;
           attribute DOMString wrap;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
  [TreatNullAs=EmptyString] attribute DOMString value;
  readonly attribute unsigned long textLength;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;

  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode);

  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

［使用例］

使用例１とそのソースコード：　上下 2 つのフォーム例が示してあるが，両者共，内容的には同じフォームである．フォームでは，氏名，郵便番号，電話番号，及び，住所を入力するために LABEL 要素と INPUT 要素，また，性別を選択するラジオボタンを実現するために INPUT 要素，及び，「送信」ボタンを実現するために INPUT 要素を使用している．さらに，ラジオボタン，及び，住所（郵便番号，電話番号，住所）の各々をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．

　　ただし，上と下のフォームでは，その記述方法が多少異なっている．まず，上の例では，フォームで必要とされるすべての要素が FORM 要素内に記述されているが，下の例では，グループ「住所」と「送信」ボタンが FORM 要素の外に記述されている．しかし，INPUT 要素の FORM 属性によって，FORM 要素の外側に記述された内容も，「送信」ボタンのクリックによって正しく送信される．

　　さらに，下の例では LABEL 要素と INPUT 要素との関連付け（ラベルをクリックすると対応するテキストフィールドにフォーカスが移動する）がなされていないが，上の例では，「電話番号」及び「住所」に対して，異なる方法で関連付けがなされている．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>FIELDSET，LEGEND，LABEL</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<P CLASS="center">FORM 要素の内部にすべて記述</P>
	<DIV CLASS="no"><FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<P><LABEL>氏名： </LABEL><INPUT TYPE="text" NAME="shimei" SIZE="20" STYLE="font-size: 90%"></P>
		<FIELDSET>
			<LEGEND>性別</LEGEND>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="male">男</LABEL><BR>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="female">女</LABEL><BR>
		</FIELDSET>
		<BR>
		<FIELDSET>
			<LEGEND>住所</LEGEND>
			<LABEL>郵便番号： </LABEL><INPUT TYPE="text" NAME="te" SIZE="8" STYLE="font-size: 90%">
			<LABEL FOR="tel_ID">電話番号： </LABEL><INPUT TYPE="text" NAME="tel" ID="tel_ID" SIZE="15" STYLE="font-size: 90%"><BR>
			<LABEL>住所： <INPUT TYPE="text" NAME="adr" SIZE="50" STYLE="font-size: 90%"></LABEL>
		</FIELDSET>
		<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P>
	</FORM></DIV>

	<HR STYLE="height: 5px; background-color: #ff0000">
	<P CLASS="center">FORM 要素の外部に一部を記述</P>
	<DIV CLASS="no"><FORM NAME="form2" ID="form2_ID" ACTION="test2.php" METHOD="post">
		<P><LABEL>氏名： </LABEL><INPUT TYPE="text" NAME="shimei" SIZE="20" STYLE="font-size: 90%"></P>
		<FIELDSET>
			<LEGEND>性別</LEGEND>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="male">男</LABEL><BR>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="female">女</LABEL><BR>
		</FIELDSET>
		<BR>
	</FORM>
	<FIELDSET>
		<LEGEND>住所</LEGEND>
		<LABEL>郵便番号： </LABEL><INPUT TYPE="text" FORM="form2_ID" NAME="te" SIZE="8" STYLE="font-size: 90%">
		<LABEL>電話番号： </LABEL><INPUT TYPE="text" FORM="form2_ID" NAME="tel" SIZE="15" STYLE="font-size: 90%"><BR>
		<LABEL>住所： </LABEL><INPUT TYPE="text" FORM="form2_ID" NAME="adr" SIZE="50" STYLE="font-size: 90%">
	</FIELDSET>
	<P STYLE="text-align: center"><INPUT FORM="form2_ID" TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P></DIV>
</BODY>
</HTML>

使用例２とそのソースコード：　FORM 要素内では，好きな食べ物を選択するセレクトボックスを実現するために SELECT 要素と OPTION 要素，意見を記述するために TEXTAREA 要素，及び，「送信」ボタンを実現するために BUTTON 要素を使用している．また，セレクトボックス内をグループ化するために OPTGROUP 要素，さらに，セレクトボックス全体をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．なお，ラベル「ご意見」は，テキストエリアに関連付けられている（ラベル「ご意見」をクリックすると対応するテキストアリアにフォーカスが移動する）．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>BUTTON，SELECT，OPTGROUP，OPTION，TEXTAREA</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">SELECT，TEXTAREA，BUTTON 要素</H1>
	<FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<FIELDSET>
			<LEGEND>好きな食べ物</LEGEND>
		　　<SELECT SIZE="6" NAME="food" STYLE="font-size: 90%">
				<OPTGROUP LABEL="果物">
				　　<OPTION VALUE="orange"> 蜜柑 </OPTION><BR>
				　　<OPTION VALUE="apple"> 林檎 </OPTION><BR>
				　　<OPTION VALUE="grape"> 葡萄 </OPTION><BR>
				</OPTGROUP>
				<OPTGROUP LABEL="魚">
				　　<OPTION VALUE="aji"> 鰺 </OPTION><BR>
				　　<OPTION VALUE="iwashi"> 鰯 </OPTION><BR>
				　　<OPTION VALUE="tai"> 鯛 </OPTION><BR>
				</OPTGROUP>
		　　</SELECT>
		</FIELDSET>
		<BR>
		<LABEL>ご意見： <TEXTAREA TYPE="text" NAME="op" COLS="50" ROWS="5" PLACEHOLDER="ご意見をお願いします" MAXLENGTH="25" STYLE="font-size: 90%"></TEXTAREA></LABEL><BR><BR>
		<P STYLE="text-align: center"><BUTTON TYPE="submit" STYLE="font-size: 90%">送信</BUTTON></P>
	</FORM>
</BODY>
</HTML>