Краткое руководство: добавление кнопки (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Научитесь создавать разные типы элементов управления button.

Необходимые условия

Сведения о кнопках и событиях кнопок

Чтобы создать кнопку в приложении на HTML, нужно добавить в HTML-код элемент button. Чтобы задать содержимое кнопки в HTML-коде, вы добавляете текст между открывающим и закрывающим тегами button. Элемент button может включать в себя различные типы содержимого, такие как текст и изображения. Большинство кнопок содержат только текст.

<button>A button</button>

Чтобы создать элемент управления button на JavaScript, создайте новый объект button и присоедините его к модели DOM. Чтобы задать текст кнопки, воспользуйтесь свойством innerHTML.

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

Существует три типа кнопок: стандартная кнопка, кнопка отправки и кнопка сброса. Чтобы указать тип кнопки, установите для ее атрибута type значение "button", "submit" или "reset".

Обычно пользователи взаимодействуют с кнопками, нажимая их, поэтому, добавив стандартную кнопку к своему приложению, обрабатывайте ее событие click. (Для кнопок отправки и сброса обрабатывать событие click не нужно, так как они автоматически выполняют действие для элемента form, которому они принадлежат.)

Обработчик события 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 без атрибутов действует как кнопка "Отправить", если это первая кнопка внутри формы. Если требуется стандартная кнопка, задайте для атрибута type элемента button значение "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.