Содержание

— HTML | MDN

Элемент <input> с типом button отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события click).

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Заметка: Хотя элементы <input> с типом button по-прежнему являются абсолютно корректными в HTML, новый элемент <button> теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента <button> вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.

Значение		 DOMString используется в качестве метки кнопки
Событие click
Поддерживаемые общие атрибуты type и value
Атрибуты IDL value
Методы None

Атрибут значения элементов <input type="button"> elements’ value содержит строку DOMString , которая используется в качестве метки кнопки. 

<input type="button" value="Нажми на меня">

Если вы не укажете value, вы получите пустую кнопку:

Элементы <input type="button"> не имеют поведения по умолчанию (их двоюродные братья, <input type="submit"> и <input type="reset"> используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.

Простая кнопка

Мы начнем с создания простой кнопки с обработчиком события click , который запускает наш компьютер (ну, он переключает value кнопки и текстовое содержимое следующего абзаца):



<form>
  <input type="button" value="Запустить ПК">
</form>
<p>ПК выключен.</p>
const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button. value === 'Запустить ПК') {
    button.value = 'Выключить ПК';
    paragraph.textContent = 'ПК запущен!';
  } else {
    button.value = 'Запустить ПК';
    paragraph.textContent = 'ПК выключен.';
  }
}

Сценарий получает ссылку на объект HTMLInputElement, представляющий

<input> в DOM, сохраняя этот параметр в переменной button. Затем addEventListener() используется для установки функции, которая будет запускаться, когда на кнопке происходят события click.

Добавление сочетаний клавиш на кнопки

Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, s is specified as the access key (you’ll need to press

s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those). 

<form>
  <input type="button" value="Start machine" accesskey="s">
</form>
<p>The machine is stopped.</p>

Note: The problem with the above example of course is that the user will not know what the access key is! In a real site, you’d have to provide this information in a way that doesn’t intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).

Disabling and enabling a button

To disable a button, simply specify the disabled global attribute on it, like so:

<input type="button" value="Disable me" disabled>

You can enable and disable buttons at run time by simply setting disabled to true or false. In this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true. A setTimeout() function is then used to reset the button back to its enabled state after two seconds.

If the disabled attribute isn’t specified, the button inherits its

disabled state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <fieldset> element, and then setting disabled on the container.

The example below shows this in action. This is very similar to the previous example, except that the disabled attribute is set on the <fieldset> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.

Buttons don’t participate in constraint validation; they have no real value to be constrained.

The below example shows a very simple drawing app created using a

<canvas> element and some simple CSS and JavaScript (we’ll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.

<div>
  <input type="color" aria-label="select pen color">
  <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span>30</span>
  <input type="button" value="Clear canvas">
</div>

<canvas>
  <p>Add suitable fallback here.</p>
</canvas>


var canvas = document.querySelector('.myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector('.output');
var clearBtn = document.querySelector('input[type="button"]');


function degToRad(degrees) {
  return degrees * Math.


 PI / 180;
};



sizePicker.oninput = function() {
  output.textContent = sizePicker.value;
}


var curX;
var curY;
var pressed = false;


document.onmousemove = function(e) {
  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

canvas.onmousedown = function() {
  pressed = true;
};

canvas.onmouseup = function() {
  pressed = false;
}

clearBtn.onclick = function() {
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0,0,width,height);
}

function draw() {
  if(pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

BCD tables only load in the browser

— HTML | MDN

HTML-элемент <button> создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки.  По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

Категории контента Общий поток, текстовый контент, интерактивный контент, listed, labelable, и submittable form-associated элемент, очевидный контент.
Разрешённый контент Текстовый контент.
Tag omission Нет, открывающий и закрывающий теги обязательны. 
Разрешённый родительский контент Любой элемент с поддержкой текстового контета.
Разрешённые роли ARIA

checkbox, link,

menuitem, 
menuitemcheckbox, menuitemradio, radio, switch, tab
DOM interface HTMLButtonElement
Тип Строчный

Элемент поддерживает глобальные атрибуты.

autofocus HTML5
Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.
autocomplete Это API не было стандартизировано.
Использование данного атрибута на элементе <button> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключенное состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072.
disabled

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от <fieldset>; если отсутсвует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключенное состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete.

form HTML5
Атрибут form позволяет указать элемент <form>, с которым связана кнопка. Данный атрибут должен хранить значение id элемента <form>. Если данный атрибут не установлен, то элемент <button> будет связан с родительским элементом <form>, если последний существует.
Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <button> с формой, даже в случае, если <button> не является наследником элемента <form>.
formaction HTML5
Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут action у формы-родителя.
formenctype HTML5
Если button имеет тип submit, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:
  • application/x-www-form-urlencoded: значение по умолчанию, если атрибут не указан.
  • multipart/form-data: следует использовать это значение, если форма содержит элемент <input> со значением атрибута type file.
  • text/plain

Если этот атрибут определен, он переопределяет атрибут enctype у формы-родителя.

formmethod HTML5
Если button имеет тип submit, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:
  • post: данные формы включаются в тело сообщения и отправляются на сервер.
  • get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделенных знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.

Если этот атрибут определен, он переопределяет атрибут method у формы-родителя.

formnovalidate HTML5
Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.
Если этот атрибут определен, он переопределяет атрибут novalidate у формы-родителя.
formtarget HTML5
Если button имеет тип submit, этот атрибут является именем или ключевым словом,

указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:

  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • _blank: Load the response into a new unnamed browsing context.
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
name
The name of the button, which is submitted with the form data.
type
The type of the button. Possible values are:
  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset: The button resets all the controls to their initial values.
  • button: The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
  • menu: The button opens a popup menu defined via its designated <menu> element.
value
The initial value of the button.
<button name="button">Тык!</button>
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1. 0 1.0 (1.7 или ранее) (Да) (Да) (Да)
formaction attribute 9.0 4.0 (2.0) 10 ? ?
formenctype attribute 9.0 4.0 (2.0) 10 10.6 ?
formmethod attribute 9.0 4.0 (2.0) 10 ? ?
autofocus attribute 5.0 4.0 (2.0) 10 9.6 5.0
menu value for type attribute Нет Нет[1] Нет Нет ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Да) 1. 0 (1.0) (Да) (Да) (Да)
formaction attribute ? 4.0 (2.0) ? ? ?
formenctype attribute ? 4.0 (2.0) ? ? ?
formmethod attribute ? 4.0 (2.0) ? ? ?
menu value for type attribute ? ? ? ? ?

[1] Gecko does not implement this feature yet. See баг 1241353.

Clicking and focus

Whether clicking on a <button> causes it to (by default) become focused varies by browser and OS. The results for <input> of type="button" and type="submit" were the same.

Does clicking on a <button> give it the focus?
Desktop Browsers Windows 8. 1 OS X 10.9
Firefox 30.0 Yes No (even with a tabindex)
Chrome 35 Yes Yes
Safari 7.0.5 N/A No (even with a tabindex)
Internet Explorer 11 Yes N/A
Presto (Opera 12) Yes Yes
Does tapping on a <button> give it the focus?
Mobile Browsers iOS 7.1.2 Android 4.4.4
Safari Mobile No (even with a tabindex) N/A
Chrome 35 No (even with a tabindex) Yes

<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.

IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.

Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using button::-moz-focus-inner { }

Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button> across page loads. Setting the value of the autocomplete attribute to off disables this feature. See баг 654072.

Firefox <35 for Android sets a default background-image gradient on all buttons (see баг 763671). This can be disabled using background-image: none.

Other elements that are used for creating forms: <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

Использование JS для создания «умных» форм | Java Script | Статьи | Программирование Realcoding.Net

1.    Введение

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году.>lang=en-us>

Вы, наверное, видели на моем сайте в гостевой книге или на форуме, формы добавления сообщений со специальными кнопками. И, если Вам хотелось обзавестись такой же, то эта статья для Вас. style=’font-family:verdana’>

 

       2.  Основы JS

 style=’font-family:verdana’>

Код JavaScript вставляется между тегами <script> и </script>style=’font-family:verdana’>style=’font-family:verdana’>

 style=’font-family:verdana’>

Если в коде содержаться функции, то эти функции должны быть размещены в тегах <script></script> между тегов <head> и </head>.style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>

 style=’font-family:verdana’>

Если JavaScript код вынесен в отдельный файл с расширением .js, то подключить такой файл к HTML-коду можно, указав имя файла в качестве параметра src тега <script>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>style=’font-family:verdana’>

 lang=en-us>

Пример:style=’font-family:verdana’>

  <html>lang=en-us>

   <head>lang=en-us>

     <script src=”func. js”></script>lang=en-us>

   </head>lang=en-us>

   <body>lang=en-us>

     …lang=en-us>

   </body>lang=en-us>

  </html>lang=en-us>

 lang=en-us>

Таким образом, мы подключили к HTML файлу файл с JavaScript.style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>

 style=’font-family:verdana’>

Использовать JavaScript можно, например, в качестве обработчика определенных событий. Например, при нажатии мышкой на какой-нибудь элемент управления, возникает событие OnClick. lang=en-us>style=’font-family:verdana’>

 style=’font-family:verdana’>

Пример:style=’font-family:verdana’>

 style=’font-family:verdana’>

<input type=”button” value=”Показать” OnClick=’javascript:alert(“Вы нажали на кнопку”)’>style=’font-size:10.0pt;font-family:verdana’>style=’font-size:10. 0pt;font-family:verdana’>style=’font-size:10.0pt;font-family:verdana’>lang=en-us>style=’font-size:10.0pt;font-family:verdana’>style=’font-size:10.0pt;font-family:verdana’>style=’font-size:10.0pt;font-family:verdana’>lang=en-us>style=’font-size:10.0pt;font-family:verdana’>

 lang=en-us>

Для того, чтобы браузер «понял», что нужно выполнить скрипт, написанный на JS, мы указываем псевдопротокол javascript:style=’font-family:verdana’>style=’font-family:verdana’>

 style=’font-family:verdana’>

Функция alert(string s) выводит на экран окно с текстом s и одной кнопкой “OK”.>lang=en-us>style=’font-family:verdana’>

 lang=en-us>

В данном примере при нажатии на кнопку «Показать» выведется окно с текстом «Вы нажали на кнопку» и одной кнопкой «ОК».style=’font-family:verdana’>

 style=’font-family:verdana’>

3. Формыstyle=’font-family:verdana’>

 style=’font-size:16. 0pt;font-family:verdana’>

Доступ к элементам формы можно получить, через следующую конструкцию:style=’font-family:verdana’>

document.|имя_формы|.|имя_компонента|style=’font-family:verdana’>lang=en-us>

 style=’font-family:verdana’>

Для элементов ввода информации (<input type=”text”…> и <textarea></textarea>) для доступа к самой введенной или не введенной информации доступно свойство value.style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>

 lang=en-us>

 style=’font-family:verdana’>

 style=’font-family:verdana’>

Пример:style=’font-family:verdana’>

 lang=en-us>

<html>lang=en-us>

 <head>lang=en-us>

  <script> lang=en-us>

   function AddText (text)lang=en-us>

{lang=en-us>

  document. form1.edit1.value=text;lang=en-us>

}lang=en-us>

  </script>lang=en-us>

 </head>lang=en-us>

 <body>lang=en-us>

<form name=”form1”>lang=en-us>

<input type=”text” name=”edit1”>lang=en-us>

<input type=”button” value=”Press me” OnClick=’javascript:AddText (“This is Edit”)’>lang=en-us>

</form>lang=en-us>

 </body>lang=en-us>

</html>lang=en-us>

 lang=en-us>

В данном примере после нажатия на кнопку “Press me” в текстовом поле ввода появиться текст “This is Edit”. Так же в функции такого рода можно добавлять еще один параметр – объект в который нужно записать текст. Например, у нас есть два поле ввода текстовой информации и две кнопки. При нажатии на первую кнопку мы запишем некоторый текст в первое поле ввода, а при нажатии на вторую кнопку – текст во второе поле. Для этого нам не обязательно писать две функции, достаточно написать одну функцию, указав в ее параметрах дополнительно к тексту, который мы хотим добавить, объект, в который этот текст нужно добавить.lang=en-us>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>

 style=’font-family:verdana’>

function AddText2 (object, text)lang=en-us>

{lang=en-us>

  object.value=text;lang=en-us>

}lang=en-us>

 style=’font-size:10.0pt;font-family:verdana’>

Вот и вся функция, необходимая для изменения любого текста в любом элементе ввода текстовой информации. Давайте сохраним эту функцию в отдельном файле с именем addtext.jslang=en-us>style=’font-family:verdana’>

      А вот и html страничка:style=’font-family:verdana’>

 style=’font-family:verdana’>

<html>

<head>

<script src=”addtext. js”></script>

</head>

<body>

<form name=”form1”>

<input type=”text” name=”edit1”>

<input type=”text” name=”edit2”>

<input type=”button” value=”edit1” OnClick=’javascript:AddText2(document.form1.edit1, “Text in edit1”)’>

<input type=”button” value=”edit2” OnClick=’javascript:AddText2(document.form1.edit2, “Text in edit2”)’>

</form>

</body>

</html>

Ну вот, пожалуй, и все что я хотел написать. Если у Вас будут вопросы, то пишите их на мой электронный адрес: [email protected]=ru>lang=en-us>style=’font-family:verdana’>

 style=’font-family:verdana’>

© CPAS, 2004.lang=en-us>

| HTML (Примеры)

Тег <button> (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью <input> (с атрибутом type="button | reset | submit").

В отличие от этого элемента, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.

Формы

Синтаксис

Закрывающий тег обязателен.

Атрибуты

autofocus
Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает между собой форму и кнопку.
formaction
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
Способ кодирования данных формы.
formmethod
Указывает метод пересылки данных формы.
formnovalidate
Отменяет проверку формы на корректность.
formtarget
Открывает результат отправки формы в новом окне или фрейме.
name
Определяет уникальное имя кнопки.
type
Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты.

autofocus

Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.

Синтаксис

<button autofocus>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

disabled

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.

Синтаксис

<button disabled>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию это значение выключено.

form

Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента <form>, например, при создании её программно.

Синтаксис

<button form="<идентификатор>">...</button>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>. Если одновременно указать action и formaction, то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction.

Синтаксис

<button formaction="<адрес>">...</button>

Значения

Нет.

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>.

Синтаксис

<button
  formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
>
  ...
</button>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

  • application/x-www-form-urlencoded

formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

<button formmethod="get | post">. ..</button>

Значения

Различают два метода — GET и POST.

GET
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
POST
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.

Синтаксис

<button formnovalidate>...</button>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget

Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

Синтаксис

<button
  formtarget="<имя фрейма> | _blank | _self | _parent | _top"
>
  ...
</button>

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.

_blank
Загружает страницу в новую вкладку браузера.
_self
Загружает страницу в текущую вкладку.
_parent
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.

name

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

<button name="<имя>">...</button>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

type

Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис

<button type="button | reset | submit">. ..</button>

Значения

button
Обычная кнопка.
reset
Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
submit
Кнопка для отправки данных формы на сервер.
menu
Открывает меню, созданное с помощью элемента <menu>.

Значение по умолчанию

value

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <button>, а значение — атрибутом value. Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Синтаксис

<button value="<текст>">...</button>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>BUTTON</title>
  </head>
  <body>
    <p>
      <button>Кнопка с текстом</button>
      <button>
        <img
          src="image/umbrella.gif"
          alt="Зонтик"
         
        />
        Кнопка с рисунком
      </button>
    </p>
  </body>
</html>

Ссылки

Установка онлайн-записи на сайт (произвольная кнопка) – База знаний YCLIENTS

После того как все настройки онлайн-записи выполнены, установите виджет на сайт.

Если вы самостоятельно разработали дизайн кнопки онлайн-записи и хотите, чтобы форма онлайн-записи открывалась при клике по ней, то этот способ для вас.

Пример:

Виджет онлайн-записи может быть привязан к любой кнопке на сайте компании. Поэтому, прежде всего, необходимо поставить на сайт код самой кнопки:

<a href="#">Записаться онлайн</a>

В основном меню перейдите в раздел Онлайн-запись – Вебсайт. Выберите нужную форму или добавьте новую (как это сделать, читайте в статье Создание виджетов онлайн-записи).

В открывшемся новом окне перейдите во вкладку Настройки кнопки и отключите создание круглой кнопки по умолчанию, для этого снимите галочку Включить кнопку.

Перейдите во вкладку Код кнопки. Скопируйте код кнопки и установите перед закрывающимся тегом </body> на каждой странице сайта. 

Код имеет следующий вид:

<script type="text/javascript" src="https://w11782.yclients.com/widgetJS" charset="UTF-8"></script>

где 11782 — уникальный идентификатор конкретной формы.

Однако, в данный код необходимо внести некоторые изменения. Уберите из него https: и поставьте на сайт получившийся вариант кода.

В данном случае:

<script type="text/javascript" src="//w11782.yclients.com/widgetJS" charset="UTF-8"></script>

 

Идентификатор для конкретной формы также можно получить на странице Онлайн-запись  – Вебсайт (подробнее в статье Как узнать номер (ID) формы онлайн-записи (виджета)). В шаблоне сайта код формы записи должен располагаться под кодом кнопки.

button

button
Оглавление | Назад | Вперёд | Индекс

Кнопка, размещённая на форме HTML.

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлено свойство type; добавлены обработчики событий onBlur и onFocus; добавлены методы blur и focus.

JavaScript 1.2: добавлен метод handleEvent.

Создание

HTML-тэг INPUT с "button" в качестве значения атрибута TYPE. Для данной формы машина выполнения JavaScript создаёт соответствующие объекты Button и помещает их в массив elements соответствующего объекта Form. Вы получаете доступ к объекту Button по индексу в данном массиве. Можно индексировать массив по числами или использовать значение атрибута NAME.

Обработчики событий
Описание

Объект Button на форме выглядит так:

Объект Button это элемент формы и обязан быть определён внутри тэга FORM (теперь вроде уже нет — прим перев.).

Объект Button это специальная кнопка, которую можно использовать для выполнения определённой Вами акции. Кнопка выполняет скрипт, специфицированный её обработчиком onClick.

Свойства. Резюме.
Свойство Описание
form

Специфицирует форму, содержащую объект Button.

name

Отражает атрибут NAME.

type

Отражает атрибут TYPE.

value

Отражает атрибут VALUE.

Методы. Резюме.
Метод Описание
blur

Убирает фокус с кнопки.

click

Симулирует щелчок мышью по кнопке.

focus

Передаёт фокус кнопке.

handleEvent

Вызывает обработчик специфицированного события.

Кроме того, этот объект наследует методы watch и unwatch из Object.

Примеры

В следующем примере создаётся кнопка с названием calcButton. Текст «Calculate» выводится на поверхности кнопки. При щелчке по кнопке вызывается функция calcFunction.

<INPUT TYPE="button" VALUE="Calculate" NAME="calcButton"
   onClick="calcFunction(this.form)">
См. также
Form, Reset, Submit

blur

Убирает фокус с кнопки.

Метод из

Button

Реализован в

JavaScript 1.0

Синтаксис
blur()
Параметры

Отсутствуют.

Примеры

В этом примере фокус убирается с кнопки userButton:

userButton. blur()

Здесь предполагается, что кнопка определена так:

<INPUT TYPE="button" NAME="userButton">
См. также
Button.focus

click

Симулирует щелчок мыши по кнопке, но не запускает обработчик onClick.

Метод из

Button

Реализован в

JavaScript 1.0

Синтаксис
click()
Параметры

Отсутствуют.

Безопасность

Отправка формы по URL mailto: или news: требует привилегии UniversalSendMail. О безопасности см. Клиентский JavaScript. Руководство.

focus

Передаёт фокус кнопке.

Метод из

Button

Реализован в

JavaScript 1. 0

Синтаксис
focus()
Параметры

Отсутствуют.

См. также
Button.blur

form

Ссылка на объект, специфицирующая форму, которая содержит кнопку.

Свойство из

Button

Только для чтения

Реализовано в

JavaScript 1.0

Описание

Каждый элемент формы имеет свойство form, то есть ссылку на родительскую форму элемента. Это свойство используется в обработчиках событий, где бывает необходимо обратиться к другому элементу текущей формы.

Примеры
Пример 1.

В следующем примере форма myForm содержит объект Text и кнопку. Когда пользователь щёлкает по кнопке, в значение объекта Text устанавливается имя формы. Обработчик onClick кнопки использует this. form для обращения к родительской форме myForm.

<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1"
VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this.form.text1.value=this.form.name">
</FORM>
Пример 2.

Здесь показана форма с несколькими элементами. Когда пользователь щёлкает button2, функция showElements отображает диалог alert, содержащий имена всех элементов формы myForm.

<script>
function showElements(theForm) {
   str = "Form Elements of
form " + theForm.name + ": \n "
   for (i = 0; i < theForm.length; i++) 
      str += theForm.elements[i].name + "\n"
   alert(str)
}
</script>
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1"
VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
   onClick="this. form.text1.value=this.form.name">
<INPUT NAME="button2" TYPE="button" VALUE="Show Form Elements"
   onClick="showElements(this.form)">
</FORM>

Диалог alert выведет следующий текст:

JavaScript Alert:
Form Elements of form myForm:
text1
button1
button2
Пример 3.

В этом примере используется ссылка на объект вместо ключевого слова this для обращения к форме. Код возвращает ссылку на myForm, которая является формой, содержащей кнопку myButton.

document.myForm.myButton.form
См. также
Form

handleEvent

Вызывает обработчик для специфицированного события.

Метод из

Button

Реализован в

JavaScript 1.2

Синтаксис
handleEvent(event)
Параметры
event

Имя события, для которого объект имеет обработчик события.

Описание

Об обработке событий см. Клиентский JavaScript. Руководство.

name

Строка, специфицирующая имя кнопки.

Свойство из

Button

Реализовано в

JavaScript 1.0

Безопасность

JavaScript 1.1. По умолчанию значение этого свойства разрушено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Свойство name первоначально отражает значение атрибута NAME. Изменение свойства name переопределяет эту установку.

Не путайте свойство name с текстом, отображаемым на поверхности кнопки. Свойство value специфицирует лэйбл кнопки. Свойство name не выводится на экран; оно используется для программного обращения к объекту.

Если несколько объектов формы имеют одно значение атрибута NAME, автоматически создаётся массив с данным именем. Каждый элемент этого массива представляет отдельный Form -объект. Элементы индексируются в порядке их появления в коде, начиная с 0. Например, если два элемента Text и элемент Button в одной форме имеют атрибут NAME со значением "myField", создаётся массив из элементов myField[0], myField[1] и myField[2]. Вы должны учитывать такую ситуацию при создании кода и знать, ссылается myField на единственный элемент или на массив элементов.

Примеры

В следующем примере функция valueGetter использует цикл for для итерации по массиву элементов формы valueTest. Окно msgWindow выводит имена всех элементов формы:

newWindow=window.open("http://home.netscape.com")
function valueGetter() {
   var msgWindow=window. open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name
+ "<BR>")
   }
}

В следующем примере первый оператор создаёт окно netscapeWin. Второй оператор выводит значение "netscapeHomePage" в диалоговом окне Alert, поскольку "netscapeHomePage" является значением аргумента windowName окна netscapeWin.

netscapeWin=window.open("http://home.netscape.com","netscapeHomePage")
alert(netscapeWin.name)
См. также
Button.value

type

Для всех объектов Button значением свойства type будет "button". Это свойство специфицирует тип элемента формы.

Свойство из

Button

Только для чтения

Реализовано в

JavaScript 1. 1

Примеры

В следующем примере записывается значение свойства type каждого элемента формы.

for (var i = 0; i < document.form1.elements.length; i++) {
   document.writeln("<BR>type is " + document.form1.elements[i].type)
}

value

Строка — значение атрибута VALUE кнопки.

Свойство из

Button

Только для чтения в Mac и UNIX; модифицируется в Windows

Реализовано в

JavaScript 1.0

Безопасность

JavaScript 1.1. По умолчанию значение этого свойства разрушено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Эта строка отображается на поверхности кнопки.

Значение свойства value является read-only в ОС Macintosh и UNIX. В Windows Вы можете изменять это свойство.

Если атрибут VALUE не специфицирован в HTML, свойство value является пустой строкой.

Не путайте свойство value со свойством name. Свойство name не выводится на экран; оно используется для программного обращения к объекту.

Примеры

Эта функция вычисляет значение свойства value группы кнопок и выводит его в окне msgWindow:

function valueGetter() {
   var msgWindow=window.open("")
   msgWindow.document.write("submitButton.value is " +
      document.valueTest.submitButton.value + "<BR>")
   msgWindow.document.write("resetButton.value is " +
      document.valueTest.resetButton.value + "<BR>")
   msgWindow.document.write("helpButton.value is " +
      document.valueTest.helpButton.value + "<BR>")
   msgWindow.document.close()
}

Будут выведены следующие значения:

Query Submit
Reset
Help

В предыдущем примере предполагается, что кнопки были определены так:

<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<INPUT TYPE="button" NAME="helpButton" VALUE="Help">
См.
также Button.name
Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation


Как включить JavaScript в браузере — Справочный центр

Большая часть страниц сайта «Плантариум» работает с использованием программ, написанных на языке JavaScript. Поэтому, если в вашем браузере запрещено выполнение активных скриптов, Вы не сможете воспользоваться ни определителем растений, ни поиском растений по названию, ни большинством других функций, доступных зарегистрированным участникам проекта.

Ниже приведены инструкции, позволяющие разрешить выполнение JavaScript в следующих наиболее распространённых браузерах:

Internet Explorer

  1. Выберите пункт меню «Сервис/Свойства обозревателя».
  2. В открывшемся диалоговом окне выберите вкладку «Безопасность».
  3. В группе «Уровень безопасности для этой зоны» нажмите кнопку «Другой…»
  4. В открывшемся диалоговом окне в списке «Параметры» найлите пункт «Сценарии/Активные сценарии».
  5. Выберите опцию «Включить»
  6. Нажмите кнопку «ОК».
  7. Ответьте «Да» на вопрос «Вы действительно хотите изменить настройку для этой зоны?».
  8. Нажмите кнопку «ОК» в диалоговом окне «Свойства обозревателя».
  9. Нажмите клавишу F5, чтобы перезагрузить текущую страницу.

FireFox

  1. Выберите пункт меню «Инструменты/Настройки…».
  2. В открывшемся диалоговом окне выберите вкладку «Содержимое».
  3. Включите флаг «Использовать JavaScript».
  4. Нажмите кнопку «ОК».
  5. Нажмите клавишу F5, чтобы перезагрузить текущую страницу.

Opera

  1. Включите флаг в пункте меню «Инструменты/Быстрые настройки/Включить JavaScript».
  2. Нажмите клавишу F5, чтобы перезагрузить текущую страницу.
или
  1. Выберите пункт меню «Инструменты/Настройки…».
  2. В открывшемся диалоговом окне выберите вкладку «Дополнительно».
  3. В списке слева выберите пункт «Содержимое».
  4. Включите флаг «Включить JavaScript».
  5. Нажмите кнопку «ОК».
  6. Нажмите клавишу F5, чтобы перезагрузить текущую страницу.

Google Chrome

  1. Нажмите на панели инструментов кнопку с картинкой «Гаечный ключ».
  2. Выберите в меню пункт «Параметры».
  3. В открывшемся диалоговом окне выберите вкладку «Расширенные».
  4. Нажмите на кнопку «Настройки содержания…», находящуюся в разделе «Конфиденциальность».
  5. В открывшемся диалоговом окне выберите вкладку «JavaScript».
  6. Выберите опцию «Разрешить всем сайтам использовать JavaScript (рекомендуется)» или добавьте ‘www.plantarium.ru’ в список сайтов, где разрешено выполнение JavaScript, нажав на кнопку «Исключения».
  7. Нажмите кнопку «Закрыть».
  8. Нажмите кнопку «Закрыть».
  9. Нажмите клавишу F5, чтобы перезагрузить текущую страницу.

— HTML: язык разметки гипертекста

элементов типа button отображаются как простые кнопки, которые можно запрограммировать для управления настраиваемыми функциями в любом месте веб-страницы по мере необходимости при назначении функции обработчика событий (обычно для события click ) .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

Примечание : хотя элементы типа button по-прежнему являются вполне допустимым HTML, новый элемент

Модальный заголовок

Одно прекрасное тело & hellip;