サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> HTMLタグリファレンス/Tips >> セレクトメニュー <SELECT> <OPTION> <OPTGROUP>

セレクトメニュー <SELECT> <OPTION> <OPTGROUP>



<SELECT>タグについて

フォームでセレクトメニュー(オプションメニュー、プルダウンメニュー)を作成します。
size属性を指定して、2以上になった場合はリストボックス形式のメニューになり、multiple属性で複数選択させることが可能になります。
<SELECT>タグでメニューを定義して、<OPTION>タグで項目を定義します。

属性 機能 記述例
size 数値 リストボックスの行数 <SELECT size="4">
name 名前 フィールド名を指定 <SELECT name="myBtn">
multiple 複数の項目を選択可能にする <SELECT multiple>
disabled 入力・選択不可能にする <SELECT disabled>
tabindex 数値 タブで移動する順 <SELECT tabindex="2">


<OPTION>タグについて

<SELECT>タグで定義されたメニューに対して項目を作成します。selected属性で、読み込まれた時に選択状態になっている項目を設定します。
また、disabled属性で特定の項目を選択不可能にすることができます。
終了タグは省略することができます。

属性 機能 記述例
value 文字列 送信する値 <OPTION value="セレクト">
label 文字 優先して表示 <OPTION lavel="myLabel">
selected 初期設定で選択状態にする <OPTION selected>
disabled 入力・選択不可能にする <OPTION disabled>


<OPTGROUP>タグについて

メニューの項目が多くて、複雑な場合は、<OPTGROUP>タグを使ってメニューをグループ化し、整理することができます。
グループ名はlabel属性に記述します。
終了タグは省略することができます。

属性 機能 記述例
label 文字 グループ名 <OPGROUP lavel="メニュー1">
disabled 入力・選択不可能にする <OPGROUP disabled>


サンプル

セレクトメニュー、リストボックス

メニューの作成を行います。

リストボックスの作成を行います。複数選択可能です。

セレクトメニューのグループ化を行います。



サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>セレクトメニュー、リストボックス</H2>
<P>メニューの作成を行います。</P>
<FORM>
<SELECT>
<OPTION value="
1">項目1</OPTION>
<OPTION value="2" selected>項目2</OPTION>
<OPTION value="3">項目3</OPTION>
<OPTION value="4">項目4</OPTION>
<OPTION value="5">項目5</OPTION>
</SELECT>
<P>リストボックスの作成を行います。複数選択可能です。</P>
<SELECT size="6" multiple>
<OPTION value="1">項目1</OPTION>
<OPTION value="2" selected>項目2</OPTION>
<OPTION value="3">項目3</OPTION>
<OPTION value="4">項目4</OPTION>
<OPTION value="5">項目5</OPTION>
</SELECT>
<P>セレクトメニューのグループ化を行います。</P>
<SELECT>
<OPTGROUP label="
グループ1">
<OPTION value="1">項目1</OPTION>
<OPTION value="2">項目2</OPTION>
<OPTION value="3">項目3</OPTION>
</OPTGROUP>
<OPTGROUP label="
グループ2">
<OPTION value="4">項目4</OPTION>
<OPTION value="5">項目5</OPTION>
</OPTGROUP>
</SELECT>

</FORM>


解説・注意点など

リストボックスで複数選択する場合は、Windowの場合Ctrlキーを押しながら選択します。


 
 

HTMLタグリファレンス/Tipsに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, HTML Tag Reference Samples Tips. All rights reserved. - Home