SELECT 要素

　　セレクトボックスの作成

［カテゴリー］

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

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

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

［コンテンツモデル］

0 個以上の OPTGROUP 要素，OPTION 要素が入る

［コンテンツ属性］

グローバル属性
autofocus ：オートフォーカス
disabled ：要素を無効にする
form ：フォーム要素との関連付け（使用例１）
multiple ：複数の値やファイルの選択を可能にする
name ：要素の名前
required ：入力必須
size ：項目（オプションの数）

［DOM インタフェース］

interface HTMLSelectElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute boolean multiple;
           attribute DOMString name;
           attribute boolean required;
           attribute unsigned long size;

  readonly attribute DOMString type;

  readonly attribute HTMLOptionsCollection options;
           attribute unsigned long length;
  getter Element item(unsigned long index);
  object namedItem(DOMString name);
  void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  void remove(long index);
  setter creator void (unsigned long index, HTMLOptionElement? option);

  readonly attribute HTMLCollection selectedOptions;
           attribute long selectedIndex;
           attribute DOMString value;

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

  readonly attribute NodeList labels;
};

［使用例］

使用例１とそのソースコード：　上下 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>