クイックスタート: ボタンの追加 (HTML)

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

さまざまな種類の button コントロールを作成する方法について説明します。

必要条件

クイックスタート: HTML コントロールの追加とイベントの処理

ボタンとボタンイベントについて

HTML でボタンを作成するには、HTML に button 要素を追加します。HTML にボタンのコンテンツを設定するには、button タグの開始タグと終了タグの間にテキストを追加します。button には、テキストや画像など、さまざまな種類のコンテンツを含めることができます。ほとんどのボタンにはテキストのみが含まれます。

<button>A button</button>

JavaScript で button を作成するには、新しい button オブジェクトを作成し、ドキュメントオブジェクトモデル (DOM) にアタッチします。ボタンテキストの設定には、innerHTML プロパティを使います。

var newButton = document.createElement("button");
newButton.innerHTML = "A button";
var buttonParent = document.getElementById("buttonParent");
buttonParent.appendChild(newButton);

ボタンには標準的なボタン、送信ボタン、リセットボタンの 3 種類があります。ボタンの種類を指定するには、ボタンの type 属性を "button"、"submit"、または "reset" に設定します。

ユーザー側のボタン操作の主なものは、クリックです。このため、アプリに標準的なボタンを追加するときには、click イベントを処理します (提出ボタンとリセットボタンは、所属する form 要素に対して自動でアクションを実行するため、click イベントを処理する必要はありません)。

click イベントを処理するときには、クリック位置、イベントを発生させたボタンなどの座標を検索するために使う MouseEvent オブジェクトをハンドラーが受け取ります。

click イベントは、マウス、タッチ、マウス、ペン/スタイラスによる入力で動作します。ボタンイベントの完全な一覧については、「button reference page」をご覧ください。

標準的なボタンを追加する

動作を即座に開始するには、標準的な button を使います。

他のページに移動する操作では、ボタンは使わず、リンクを使います。例外: ウィザードでのページの移動には、[戻る] と [次へ] というラベルのボタンを使います。他の種類の前に戻る移動や上位レベルへの移動では、win-backbutton スタイルのボタンを使います。

標準の button を作成するには、button 要素をマークアップに追加します。次に、button コントロールの開始タグと終了タグの間に、ボタンの表面に表示するテキストを追加します。

この例では、標準的な button と出力段落を作成します。

<button 
    id="standardButton" 
    onclick="ButtonExamples.standardButtonClicked(event)">Click me!</button>
<p id="outputParagraph"></p>

次の例では、ButtonExamples.standardButtonClicked イベントハンドラーを定義し、パブリックにアクセスできるようにしています。このボタンをクリックすると、前の例で定義された出力の段落のテキストの一部が表示されます。

function standardButtonClicked(eventInfo) {
    document.getElementById("outputParagraph").innerText = "Click!"; 
}

WinJS.Namespace.define("ButtonExamples", 
{ standardButtonClicked : standardButtonClicked });

(このほか、input 要素を作成してその type 属性を "button" に設定することによって、標準的なボタンを作成できます)。

フォームに標準的なボタンを追加する

form 内では、属性を持たない button 要素は、フォーム内の最初のボタンであれば、送信ボタンとして動作します。標準的なボタンにするには、button 要素の type 属性を "button" に設定します。

<form>
    <button 
        type="button"
        onclick="ButtonExamples.standardFormButtonClicked(event)">I'm a standard button!</button>
    <p id="outputParagraph2"></p>
</form>

function standardFormButtonClicked(eventInfo) {
    document.getElementById("outputParagraph2").innerText = "Click!";
}

WinJS.Namespace.define("ButtonExamples",
{ standardFormButtonClicked: standardFormButtonClicked });

送信ボタンを追加する

フォームのコントロールに入力されるデータを送るには、form 内の送信ボタンを使います。送信ボタンを作成するには、button 要素を追加し、その type 属性を "submit" に設定します。

<form action="https://www.bing.com" method="get"
    onsubmit="ButtonExamples.formSubmitted(event)">
    <input type="text" id="searchQuery" name="q" placeholder="Enter a search query." />
    <button type="submit">Search</button>
    <button type="reset">Clear</button>
</form> 
<p id="formOutput"></p>

function formSubmitted(eventInfo) {
    document.getElementById("formOutput").innerText =
        "You searched for " + document.getElementById("searchQuery").value;
}

WinJS.Namespace.define("ButtonExamples",
{ formSubmitted: formSubmitted });

ボタンにイベントハンドラーを作成する必要はありません。ユーザーがクリックすると、フォームのアクションが自動的にトリガーされます。

(このほか、input 要素を作成してその type 属性を "submit" に設定することによって、送信ボタンを作成できます)。

リセットボタンを追加する

リセットボタンは、フォーム内の入力要素を初期値にリセットします。リセットボタンを作成するには、button 要素を追加し、その type 属性を "reset" に設定します。

<form action="https://www.bing.com" method="get">
    <input type="text" id="searchQuery2" name="q" placeholder="Enter a search query." />
    <button type="submit">Search</button>
    <button type="reset">Clear</button>
</form>

ボタンにイベントハンドラーを作成する必要はありません。ユーザーがクリックすると、フォームが自動的にリセットされます。

(このほか、input 要素を作成してその type 属性を "reset" に設定することによって、リセットボタンを作成できます)。

ボタンにスタイルを指定する

ボタンにスタイルを指定する方法について詳しくは、「ボタンのスタイルを指定する方法」をご覧ください。

要約

このクイックスタートでは、さまざまな種類の button コントロールを作成する方法について説明しました。

クイック スタート: ボタンの追加 (HTML)