FIELDSET 要素

　　フォーム関連要素のグループ化

［カテゴリー］

フローコンテンツ
セクショニングコンテンツのルート
フォーム関連要素
パルパブルコンテンツ

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

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

［コンテンツモデル］

必要なら LEGEND 要素，続いてフローコンテンツが入る．

［コンテンツ属性］

グローバル属性
disabled ：グループ内の要素を無効化する
form ：この FIELDSET 要素が入る FORM 要素の ID を指定．この機能により，FORM 要素の外側にフォーム関連要素を記述することも可能になる（使用例１参照）
name ： FIELDSET 要素の名前

［DOM インタフェース］

interface HTMLFieldSetElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString name;

  readonly attribute DOMString type;

  readonly attribute HTMLFormControlsCollection elements;

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

［使用例］

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

使用例３とそのソースコード：　INPUT 要素の属性を変化させ，その結果を比較している．なお，チェックボックス，及び，ラジオボタンの各々をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>INPUT 要素の属性</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">INPUT 要素の属性</H1>
	<FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<LABEL>name, value, size, autocomplete, list： <INPUT TYPE="text" NAME="ex1" VALUE="" SIZE="20" AUTOCOMPLETE="on" LIST="fruit" STYLE="font-size: 90%"></LABEL>
		<DATALIST ID="fruit">
			<OPTION VALUE="蜜柑">
			<OPTION VALUE="林檎">
			<OPTION VALUE="葡萄">
		</DATALIST><BR>
		<LABEL>name, value, size, autofocus, dirname, required： <INPUT TYPE="text" NAME="ex2" SIZE="10" AUTOFOCUS DIRNAME="rtl" REQUIRED STYLE="font-size: 90%"></LABEL><BR><BR>
		<FIELDSET>
			<LEGEND>好きな野菜（ checked ）</LEGEND>
		　	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu" checked> キャベツ<BR>
		　	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon" checked> 大根<BR>
		　	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
		　	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
		</FIELDSET><BR>
		<LABEL>disabled： <INPUT TYPE="text" NAME="ex3" VALUE="無効" SIZE="20" DISABLED STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>readonly： <INPUT TYPE="text" NAME="ex4" VALUE="読み取り専用" SIZE="20" READONLY STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>max, min, step： <INPUT TYPE="range" VALUE="20" NAME="ex5" MIN="0" MAX="100" STEP="20"></LABEL><BR>
		<LABEL>pattern（半角英数字）, placeholder, maxlength： <INPUT TYPE="text" NAME="ex6" SIZE="20" PATTERN="^[0-9A-Za-z]+$" PLACEHOLDER="Ex.: Suganuma Yoshinori" MAXLENGTH="25" STYLE="font-size: 90%"></LABEL><BR>
		（ PLACEHOLDER 属性の代わりに VALUE 属性を使用した場合<INPUT TYPE="text" NAME="ex7" SIZE="20" PATTERN="^[0-9A-Za-z]+$" VALUE="Ex.: Suganuma Yoshinori" STYLE="font-size: 90%">）<BR>
		<LABEL>accept, multiple： <INPUT TYPE="file" NAME="ex8" ACCEPT="image/jpeg,image/gif" MULTIPLE STYLE="font-size: 90%"></LABEL><BR><BR>
		<P CLASS="center"><LABEL>右図は送信ボタン（ alt, height, width, src ）： <INPUT TYPE="image" SRC="../ayame.gif" ALT="送信" WIDTH="40" HEIGHT="60" onClick="JavaScript:submit();"></LABEL><BR></P>
	</FORM>
</BODY>
</HTML>

使用例４とそのソースコード：　INPUT 要素の TYPE 属性の値を変化させ，その結果を比較している．なお，チェックボックス，及び，ラジオボタンの各々をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>TYPE 属性の値</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">INPUT 要素における TYPE 属性の比較</H1>
	<FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<LABEL>hidden： 表示しない： <INPUT TYPE="hidden" NAME="hidden" VALUE="abc" STYLE="font-size: 90%"></LABEL>，　<LABEL>表示する： <INPUT TYPE="text" NAME="not_hidden" VALUE="abc" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>text： <INPUT TYPE="text" NAME="text" VALUE="テキスト" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>tel： <INPUT TYPE="tel" NAME="tel" SIZE="15" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>url： <INPUT TYPE="url" NAME="url" SIZE="30" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>email： <INPUT TYPE="email" NAME="mail" SIZE="30" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>password： <INPUT TYPE="password" NAME="password" SIZE="10" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>datetime： <INPUT TYPE="datetime" NAME="datetime" VALUE="2012-11-03T11:10:00+09:00" SIZE="25" STEP="60" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>date： <INPUT TYPE="date" NAME="date" SIZE="10" STEP="1" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>month： <INPUT TYPE="month" NAME="month" VALUE="11" SIZE="10" STEP="1" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>week： <INPUT TYPE="week" NAME="week" VALUE="5" SIZE="10" STEP="1" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>time： <INPUT TYPE="time" NAME="time" VALUE="13:35:00" SIZE="10" STEP="60" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>datetime-local： <INPUT TYPE="datetime-local" NAME="datetime-local" VALUE="2012-11-03T11:10:00" SIZE="20" STEP="60" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>number： <INPUT TYPE="number" NAME="number" VALUE="20" SIZE="5" STEP="5" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>range： <INPUT TYPE="range" VALUE="20" NAME="range" MIN="0" MAX="100" STEP="5"></LABEL><BR>
		<LABEL>color： <INPUT TYPE="color" VALUE="#00ff00" NAME="color"></LABEL><BR>
		<LABEL>file： <INPUT TYPE="file" NAME="file" STYLE="font-size: 90%"></LABEL><BR><BR>
		<FIELDSET>
			<LEGEND>好きな野菜（ checkbox ）</LEGEND>
		　	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu" checked> キャベツ<BR>
		　	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon" checked> 大根<BR>
		　	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
		　	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
		</FIELDSET>
		<P>
		<FIELDSET>
			<LEGEND>性別（ radio ）</LEGEND>
		　　<INPUT TYPE="radio" NAME="sex" VALUE="Male" checked> 男性<BR>
		　　<INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
		</FIELDSET>
		<P CLASS="center">
			<LABEL>submit： <INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></LABEL>　　
			<LABEL>button： <INPUT TYPE="button" VALUE="送信" onClick="JavaScript:submit();" STYLE="font-size: 90%"></LABEL>　　
			<LABEL>reset： <INPUT TYPE="reset" VALUE="リセット" STYLE="font-size: 90%"></LABEL><BR>
			<LABEL>image： <INPUT TYPE="image" SRC="../ayame.gif" ALT="送信" onClick="JavaScript:submit();"></LABEL><BR>
		</P>
	</FORM>
</BODY>
</HTML>