ボタン・オブジェクト

　button オブジェクトは最も基本的なオブジェクトです。button オブジェクトが持つ以下のプロパティとメソッドは、他のボタンオブジェクトに共通して備わっている機能です。

members
プロパティ	name	... name 属性の取得・設定
	id	... id 属性の取得・設定
	value	... value 属性の取得・設定
	type	... type 属性の取得
メソッド	click()	... click イベントを発生させる
	focus()	... focus イベントを発生させる
	blur()	... blur イベントを発生させる

　以下のサンプルでは、“ボタン１”を押すと“ボタン２”のクリックイベントを発生させ、ダイアログを表示します。ます。さらに、“ボタン２”へフォーカスを移しています。最後に、“ボタン１”の value 属性の値を変更しています。

// JavaScriptソース
function Button1_Click() {
    document.Form1.Button2.click();    // button2 のクリックイベントが発生
    document.Form1.Button2.focus();
    document.Form1.Button1.value = "ボタン３";
}
function Button2_Click() {
    alert(document.Form1.Button2.value + "がクリックされました！");
}

<!-- HTMLソース -->
<form name="Form1" style="margin:1ex">
    <input type="button" name="Button1" value="ボタン１" onclick="Button1_Click()"/>　
    <input type="button" name="Button2" value="ボタン２" onclick="Button2_Click()"/>
</form>

　reset オブジェクトはフォームの各要素の内容を初期化（value 属性の値）する機能を、submit オブジェクトはフォームの内容を送信する機能を持ちます。これらのプロパティとメソッドは button オブジェクトのものと同じです。ただし、これらの機能を他のフォームで有効にするには、対象 form オブジェクトの reset 及び submit メソッドを使用する必要があります。
　以下のサンプルでは、リセットボタンを押すことで、別のフォームの resetメソッドも呼び出しています。

// JavaScriptソース
document.Form2a.Text2a.value = "abcdefg";
document.Form2b.Text2b.value = "stuvwxyz";

function Reset1_Click() {
    document.Form2a.reset();
}

<!-- HTMLソース -->
<form name="Form2a" style="margin:1ex">
    <input type="text" name="Text2a" value=""/>　
</form>
<form name="Form2b" style="margin:1ex">
    <input type="text" name="Text2b" value=""/>　
    <input type="reset" name="Reset2" value="リセット" onclick="Reset1_Click()"/>
</form>

　checkbox は、その項目のオンとオフを切り替えるためのオブジェクトです。checkbox オブジェクトは、button オブジェクトのプロパティとメソッドが利用できます。さらに、下記のプロパティが使用できます。これらの値は論理型となりますので、通常は true または false で指定します。また、このオブジェクトは、表示テキストとは別に、value プロパティを利用して内部に値を保持することができます。

checked	オンとオフの状態の取得・設定 (true / false)
defaultChecked	オンとオフの初期状態の取得・設定 (true / false)

　下記のサンプルでは、チェックされた項目の value プロパティの値を合計してテキストに表示しています。また、リセットボタンを押すと、defaultChecked プロパティで指定した状態に設定されます。

// JavaScriptソース
document.Form3.Check1.defaultChecked = false;
document.Form3.Check2.defaultChecked = false;
document.Form3.Check3.defaultChecked = false;
document.Form3.reset();        // 初期状態 (defaultChecked) に設定

function Check_Click() {
    var n = 0;
    if (document.Form3.Check1.checked) n += parseInt(document.Form3.Check1.value);
    if (document.Form3.Check2.checked) n += parseInt(document.Form3.Check2.value);
    if (document.Form3.Check3.checked) n += parseInt(document.Form3.Check3.value);
    document.Form3.Text3.value = n;
}

<!-- HTMLソース -->
<form name="Form3" style="margin:1ex">
    <input type="checkbox" name="Check1" value=500 onclick="Check_Click()">商品Ａ　
    <input type="checkbox" name="Check2" value=400 onclick="Check_Click()">商品Ｂ　
    <input type="checkbox" name="Check3" value=300 onclick="Check_Click()">商品Ｃ　
    合計 : <input type="text" name="Text3" value="" size="5"> 円　
    <input type="reset" name="Reset3" value="リセット"/>
</form>

radio オブジェクトは、特定のフィールドの中から項目を選択する時に使用します。radio オブジェクトは、button オブジェクトのプロパティとメソッドが利用できます。
　このオブジェクトは、同じ name 属性にすると、選択項目をひとつに限定することができます。この時、各オブジェクトは配列扱いになりますので、それぞれには添え字でアクセスすることになります。配列の要素数は、length プロパティで取得することができます。また、このオブジェクトは、表示テキストとは別に、value プロパティを利用して内部に値を保持することができます。

length	項目数の取得
checked	オンとオフの状態の取得・設定 (true / false)
defaultChecked	オンとオフの初期状態の取得・設定 (true / false)

　下記のサンプルでは、三つの項目のうち、ユーザーはひとつしか選択することができません。選択されると、テキストに value プロパティの値を表示します。

// JavaScriptソース
function Radio4_Click(value) {
    document.Form4.Text4.value = value;
}

document.Form4.Radio4[2].checked = true;
Radio4_Click(document.Form4.Radio4[2].value);

<!-- HTMLソース -->
<form name="Form4" style="margin:1ex">
    <input type="radio" name="Radio4" value=3000 onclick="Radio4_Click(this.value)">Ａセット　
    <input type="radio" name="Radio4" value=4000 onclick="Radio4_Click(this.value)">Ｂセット　
    <input type="radio" name="Radio4" value=5000 onclick="Radio4_Click(this.value)">Ｃセット　
    金額 : <input type="text" name="Text4" value="" size="5"/> 円
</form>

select オブジェクトは、リストの中から項目を選択すためのオブジェクトです。select オブジェクトは、button オブジェクトのプロパティとメソッドが利用できます。さらに、以下のプロパティが定義されています。

length	項目数の取得
options[n]	添え字 n の項目を参照
selectedIndex	選択項目の添え字の取得・設定

　select オブジェクトでは、項目に option オブジェクトを使用します。リストの各項目 (option) は配列として位置づけられるので、アクセスする際は、select オブジェクトの options プロパティから添え字を使うことになります。
　option オブジェクトでは、さらに以下のプロパティを使用することができます。

defaultSelected	項目の初期状態の取得・設定 (true / false)
selected	選択状態の取得 (true / false)
text	表示文字列の取得・設定
value	value 属性の取得・設定

　下記のサンプルは、二つの select オブジェクトで選択された項目 (option) の value 属性値を掛け合わせてテキストに表示しています。

// JavaScriptソース
function Select_Click() {
    with (document.Form5) {
        Text5.value 
            = Select1.options[Select1.selectedIndex].value
            * Select2.options[Select2.selectedIndex].value;
    }
}
with (document.Form5.Select1) {
    options[0].text = "○○ツアー";
    options[0].value = 8000;
    options[1].text = "◇◇ツアー";
    options[1].value = 7500;
    options[2].text = "△△ツアー";
    options[2].value = 9000;
    selectedIndex = 1;
}
Select_Click();

<!-- HTMLソース -->
<form name="Form5" style="margin:1ex">
    <select name="Select1" onchange="Select_Click()">
        <option></option><option></option><option></option>
    </select>　
    <select name="Select2" onchange="Select_Click()">
        <option value=1>1人</option>
        <option value=2>2人</option>
        <option value=3>3人</option>
        <option value=4>4人</option>
    </select>　
    合計 : <input type="text" name="Text5" value="" size="8"/>円　
</form>