フォームの部品、PART-2

◆　プルダウン（ポップアップ）メニューやリストメニュー

<SELECT>要素と<OPTION>要素を使用し、プルダウン（ポップアップ）メニューやリストメニューを作成します。他にも、JavaScriptでリンクに使われています。

プルダウン	リストメニュー	階層型リストメニュー IE 5,NN 6,以上
北海道 東北 北信越 北関東 関東 信州 中部 北陸 関西 中国 四国 九州 沖縄	北海道 東日本 西日本 四国 九州 沖縄	提供： 道北 道東 道南 青森 岩手 宮城 秋田 山形 福島 新潟 長野 富山 石川 福井 東京 神奈川 埼玉 千葉 茨城 栃木 群馬 山梨 静岡 愛知 岐阜 三重 滋賀 京都 大阪 兵庫 奈良 和歌山 鳥取 島根 岡山 広島 山口 徳島 香川 愛媛 高知 福岡 佐賀 長崎 熊本 大分 宮崎 鹿児島 沖縄

◆　<SELECT>要素の属性

・NAME属性（コントロール名）

フォームは複数の入力項目を同時に送信するので、データを受信したCGIプログラムがそれぞれの項目を区別できるようにする必要があります。そのためにデータに名前を付けるのがNAME属性です。
NAME属性で指定した名前は処理するアプリケーションに渡するだけで、ブラウザには表示されません。

・SIZE属性

表示する項目数を指定します。おもにリスト型に指定する場合に使用しますが、通常、記述しません。

・その他の属性

READONLY属性は、このサイトでコピー&貼り付け用に使用している「テキストボックス」や「使用上の注意書き」「使用承諾書」等の表示専用に使われます。READONLYを記述すると、テキストをスクロールしながら読むことができ、書き込みや消去もできません。
また、この属性を使用するときは「NAME属性」を外します。

TABINDEX="n"属性は、入力順序を決める属性で「TABキー」を押すことでテキストポイントが若い数字順に移動します。値は“1〜32767”まで可能です。

DISABLED属性は、入力ができなくするものです。
この属性を記述すると送信もされません。

ACCESSKEY属性は、指定したショートカットキー操作で移動できるように指定します。
Windowsでは「Alt+任意指定の文字キー」、Macintoshでは「control+任意指定の文字キー」で移動します。

◆　<OPTION>要素の属性

<OPTION>は、項目を作る要素で「<OPTION>ABC</OPTION>」の数だけ項目を増やせます。
OPTIONは、省略要素ですが将来のために閉じタグは記述しましょう。
また、「VALUE="送信データ"」の属性を使い送信する値を指定します。

・プルダウン（ポップアップ）メニュー

<FORM NAME="mail">
  <SELECT SIZE="1" NAME="cooking">
      <OPTION SELECTED>　どの料理も好き　</OPTION>
      <OPTION VALUE="japan">　日本料理　</OPTION>
      <OPTION VALUE="sushi">　寿司　</OPTION>
      <OPTION VALUE="korea">　韓国　</OPTION>
      <OPTION VALUE="china">　中国　</OPTION>
      <OPTION VALUE="france">　フランス　</OPTION>
      <OPTION VALUE="italy">　イタリア　</OPTION>
      <OPTION VALUE="others">　その他　</OPTION>
  </SELECT>
</FORM>

上のソースには<OPTION>に「SELECTED」の属性が記述しています。最初に表示されている項目です。

・リストメニュー

<SELECT>要素にSIZE属性を指定すると下記のようにセレクトボックスの高さが指定できます。

<FORM NAME="mail">
  <SELECT SIZE="8" NAME="cook" SIZE="8" MULTIPLE>
    <OPTION VALUE="all">　料理　</OPTION>
    <OPTION VALUE="japan">　日本料理　</OPTION>
    <OPTION VALUE="sushi">　寿司　</OPTION>
    <OPTION VALUE="korea">　韓国料理　</OPTION>
    <OPTION VALUE="china">　中国料理　</OPTION>
    <OPTION VALUE="france">　フランス料理　</OPTION>
    <OPTION VALUE="italy">　イタリア料理　</OPTION>
    <OPTION VALUE="others">　その他の料理　</OPTION>
  </SELECT>

</FORM>

上のソースには<SELECT>に「MULTIPLE」の属性が記述しています。この属性を記述することで、フォームの利用者が複数の選択が可能になります。
Windowsの場合、「Ctrl+左クリック」「Shift+Ctrl+左クリック」「Shift+左クリック」
Macintoshの場合、「Command + A　」「Command +クリック」

・階層型のプルダウン（ポップアップ）メニュー

<OPTGROUP>要素を使用することで階層型にできます。
メニュー項目は<OPTGROUP LABEL="始めの選択項目">〜〜〜</OPTGROUP>を一つの項目にし囲まれた中に<OPTION VALUE="送信データ">を必要分だけ作ります。「LABEL=""」は必ず記述し「"値名"」が太字で表示されます。
<OPTION VALUE="">は、<OPTGROUP>要素内にインデント（字下げ）されます。
非対応Webブラウザは、<OPTGROUP>要素を無視し通常のプルダウン（ポップアップ）メニューになります。

<FORM NAME="mail">
   <SELECT SIZE="1" NAME="cook" SIZE="8">
     <OPTION VALUE="a">　好きな料理</OPTION>
       <OPTGROUP LABEL="アジアの料理">
            <OPTION VALUE="A">　日本</OPTION>
            <OPTION VALUE="B">　寿司</OPTION>
            <OPTION VALUE="C">　韓国</OPTION>
            <OPTION VALUE="D">　中国</OPTION>
            <OPTION VALUE="E">　インド</OPTION>
            <OPTION VALUE="F">　マレーシア</OPTION>
            <OPTION VALUE="G">　ベトナム</OPTION>
      </OPTGROUP>
      <OPTGROUP LABEL="ヨーロッパの料理">
            <OPTION VALUE="H">　フランス</OPTION>
            <OPTION VALUE="I">　イタリア</OPTION>
            <OPTION VALUE="J">　ドイツ</OPTION>
            <OPTION VALUE="K">　スペイン</OPTION>
            <OPTION VALUE="L">　ポルトガル</OPTION>
            <OPTION VALUE="M">　オーストリア</OPTION>
            <OPTION VALUE="N">　スイス</OPTION>
      </OPTGROUP>
      </OPTGROUP>
      <OPTGROUP LABEL="その他の料理">
            <OPTION VALUE="O">　アメリカ</OPTION>
            <OPTION VALUE="P">　オーストラリア</OPTION>
            <OPTION VALUE="Q">　メキシコ</OPTION>
            <OPTION VALUE="R">　チリ</OPTION>
            <OPTION VALUE="S">　ブラジル</OPTION>
            <OPTION VALUE="T">　ロシア</OPTION>
      </OPTGROUP>
  </SELECT>
</FORM>

コピー&貼り付け用のソースは、基本のプルダウン（ポップアップ）メニューです。
</OPTGROUP>の終了タグを省略できますが、将来のために閉じるほうが良いでしょう。

◆　コントロール（部品）をグループ化とラベル

テーブル要素を使わずに、フォームのコントロールをまとめて関連付けをします。非視覚障害者のためにも、テーブルよりも読み取りの早いグループ化がお勧めです。

・<FIELDSET>〜〜〜</FIELDSET>

<FIELDSET>要素は、フォームに使うコントロールをグループ化するコンテナです。
<FIELDSET>要素の囲まれた部分のコントロールが一つのグループになり、枠線で囲みます。
スタイルシートで枠の「太さ・形・色」が指定可能です。
例：<FIELDSET style="border:thick double #ff99ff">

・<LEGEND>グループ名</LEGEND>

<LEGEND>要素は、<FIELDSET>要素のグループに名前をつけて、枠線と同じライン上に名前を表示します。
下記のサンプルで「投稿者」「投稿内容」がグループ名です。
スタイルシートで文字の周囲に「太さ・形・色」が指定可能です。
例：<FIELDSET style="border:thick double #ff99ff">

<FORM action="/" method="POST">
 <FIEDSET style="border:thick double #ff99ff">
   <LEGEND>投稿者</LEGEND>
   <LABEL>　　名前：<input type="text" name="name" size="20"></LABEL><br>
   <LABEL>Ｅメール：<input type="text" name="mail" size="40"></LABEL>
 </FIEDSET><br>

 <FIEDSET>
   <LEGEND style="border:thick double #ff99ff">投稿内容</LEGEND>
   <LABEL> タイトル:<input type="text" name="title" size="40"></LABEL><br>
   <LABEL FOR="message-f">メッセージ</LABEL><br>
   <TEXTAREA ID="message-f" name="message" rows="5" cols="70">記入欄</TEXTAREA>
 </FIEDSET><br>
 <input type="submit" value=" 送信 ">　<input type="reset" value=" クリア ">
</form>

・コントロールにラベルをつける<LABEL>〜〜〜</LABEL>

一般的に、コントロール要素の意味が解るように「名前」「タイトル」「メッセージ」の名目等を部品の近くに記述します。
<LABEL>要素は、名目とコントロール要素を囲み一体化を図ります。同時に視覚障害のある方には論理的な裏づけをし手助けになります。ラベルのつけ方は、２種類あります。

・<LABEL>ラベル名と要素</LABEL>

直接的にラベル名とラベル名と要素を囲む方法
<LABEL>　名前　<input type="text" name="name" size="20" maxlength="20" tabindex="1"></label>

・<LABEL FOR="ID名">ラベル名</LABEL>

任意のID名をつけて<INPUT><TEXTAREA>のコントロール要素に「ID="コントロールID"」の属性を関連付けする方法
<LABEL FOR="message-f">　メッセージ　</LABEL>　<TEXTAREA ID="message-f">記入欄</TEXTAREA>

◆　フォームをメール送信する

個人的には、お勧めできませんが、フォームの内容をメールで送信することができます。
しかしそれならば、「<A HREF="MAILTO：****@***.ne.jp">〜〜</A>」も、ほぼ同じであるのは確かです。ただ、フォームを使い記入してもらうことだけなのです。

・<FORM ACTION="MAILTO:メールアドレス" MATHOD="POST">の指定

フォームの内容に送信先と送信方法を指定します。
<FORM ACTION="MAILTO:メールアドレス" MATHOD="POST">
この、指定にすると利用者の電子メールソフトが起動し送信されます。

・<FORM>要素もう一つの指定「ENCTYPE="〜〜〜"」

前回のENCTYPEの指定をしないと「URLエンコード」で送信されます。
入力されたテキストをそのまま変換せずに送信するには、
<FORM ACTION="MAILTO:メールアドレス" MATHOD="POST"　ENCTYPE="TEXT/PLAIN">と記述します。

・メリットとデメリット

この方法を使用することで長所・短所があります。
メリットは、CGIプログラムの設置・設定がいらない。誰でもフォームメールを作れる。
デメリットは、記入利用者の電子メールソフトが起動しインターネット利用環境に任せるために、記入利用者に警告のメッセージが出され送信されない場合がある。

◆　ボタンを画像にする

フォームの送信ボタンなどのボタン類を画像にしたものをよく見かけます。ただしクリックアクション（イベント）はしません。そのためにinstrinsic eventsやJavaScript等でイベント設定をし、ボタンをクリックされたときのイベント・アクションを定義する必要があります。

・二種類の要素（<INPUT>要素と<BUTTON>要素）

<INPUT>要素でボタンを作る場合は、「type="image"」の属性を指定します。もちろんフォームの送信ボタンとして機能します。（リセットボタンには、使用できません）
<INPUT type="image" name="コントロール名" src="画像ファイル名" alt="代替テキスト">

スクリプト用：
<INPUT type="button" onClick="スクリプト名" velue="ボタン名" src="画像ファイル名" alt="代替テキスト">

<BUTTON>要素で押しボタンを作る場合は、送信・リセット共に使用できます。
ただし、ボタンの上に画像が重なるような形になります。
　 　
画像を仕様する場合、背景に<button style="background-color:色値">で背景色を付けても良いでしょう。

送信用：
<BUTTON type="submit" name="" >
　　<IMG src="画像ファイル名" alt="代替テキスト" >
</BUTTON>

リセット用：
<BUTTON type="reset" name="" >
　　<IMG src="画像ファイル名" alt="代替テキスト" >
</BUTTON>

スクリプト用：
<BUTTON type="button" onClick="スクリプト名" velue="ボタン名">
　　<IMG src="画像ファイル名" alt="代替テキスト" >
</BUTTON>