情報学部

菅沼ホーム

HTML 目次

索引

LABEL 要素

　　フォーム関連要素と名前を関係づける

［カテゴリー］

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

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

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

［コンテンツモデル］

フレージングコンテンツが入る．ただし，LABEL 要素が入ってはいけない．

［コンテンツ属性］

グローバル属性
form ：ラベルを関連づける FORM 要素の ID 属性値．この機能を利用することによって，フォームの指定された要素（ for 属性によって指定）の入力欄を，フォームの外側のラベルからフォーカスさせるようなことが可能になる．

for ：ラベルと関連づけるフォーム関連要素の ID 属性値．一般に，ラベル要素の中に関連づける要素を，
　　　　<LABEL>例: <INPUT ・・・・</LABEL>
のように記述すれば，ラベル「例」とそこに含まれる要素が対応づけられる（ラベルをクリックするとその要素がフォーカスされるなど）が，
　　　　<LABEL>例: </LABEL><INPUT ・・・・
のように記述した場合は，対応づけられない．ただし，for 属性を利用することよって可能になる．（「使用例１」の上のフォームのラベル「電話番号」）

［DOM インタフェース］

interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
           attribute DOMString htmlFor;
  readonly attribute HTMLElement? control;
};

［使用例］

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

情報学部

菅沼ホーム

HTML 目次

索引