input type="button"

元素<input type="button"> 是  <input>元素的特殊版本，被用来创建一个没有默认值的可点击按钮。 它已经在HTML5被 <button>元素取代

<input type="button" value="Click Me">

注意：虽然<input>类型的元素"button"仍然是完全有效的HTML，但新<button>元素现在是创建按钮的有利方式，具有一些优势。它支持使用"menu"按钮作为弹出式菜单触发器的类型，并且<button>在开始和结束标签之间插入标签文本，可以在标签中包括HTML，甚至图像。

值

一个<input type="button">元素的value属性包含DOMString一个用作按钮的标签。

<input type="button" value="Click Me">

如果你没有指定一个value，你得到一个空的按钮：

<input type="button">

Using buttons

<input type="button">元素没有默认行为（与他们相似的：<input type="submit">和<input type="reset">分别用于提交和重置表单）。要使按钮做任何事情，你必须编写JavaScript代码来完成这项工作。

一个简单的按钮

我们首先创建一个带有click事件处理程序的简单按钮来启动我们的机器（当然，它会切换value按钮和下面段落的文本内容）：

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

var btn = document.querySelector('input');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.value === 'Start machine') {
    btn.value = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.value = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

该脚本获取HTMLInputElement表示<input>DOM中的对象的引用，并将该引用保存在变量中btn。addEventListener()然后用于建立一个函数，当click按钮上发生事件时将运行该函数。

将键盘快捷键添加到按钮

键盘快捷键（也称为访问键和键盘等价物）可让用户使用键盘上的键或键组合来触发按钮。要添加一个键盘快捷键到一个按钮——你可以使用accesskey全局属性。

在这个例子中，s被指定为访问键（您需要按s加上您的浏览器/操作系统组合的特定修饰键;请参阅accesskey这些键的有用列表）。

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

注意：以上例子的问题当然是用户不知道访问密钥是什么！在真实网站中，您必须以不干扰网站设计的方式提供此信息（例如，通过提供易于访问的链接指向有关网站访问键的信息）。

禁用和启用按钮

要禁用按钮，只需disabled在其上指定全局属性，如下所示：

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

您可以在运行时通过设置disabled为true或来启用和禁用按钮false。在这个例子中，我们的按钮开始启用，但是如果按下它，它将被禁用btn.disabled = true。setTimeout()然后用一个函数在两秒钟后将按钮恢复到启用状态。

如果该disabled属性没有被指定，该按钮disabled从其父元素继承它的状态。这样就可以通过将元素组合在一个容器（如<fieldset>元素）中，然后disabled在容器上进行设置，从而一次启用和禁用所有元素组。

下面的例子显示了这一点。这与前面的例子非常相似，除了在按下第一个按钮时disabled设置了属性之外<fieldset>- 这会导致所有三个按钮都被禁用，直到两秒钟超时。

注：Firefox将不像其他的浏览器，默认情况下，坚持动态禁用状态一的<button>整个页面加载。使用该autocomplete属性来控制此功能。

验证

按钮不参与约束验证; 他们没有真正的价值可以被约束。

示例

下面的例子展示了一个使用<canvas>元素和一些简单的CSS和JavaScript 创建的非常简单的绘图应用程序（为了简洁，我们将隐藏CSS）。顶部的两个控件允许您选择绘图笔的颜色和大小。单击按钮时，会调用清除画布的函数。

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

<canvas class="myCanvas">
  <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"]');

// covert degrees to radians
function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

// update sizepicker output value

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

// store mouse pointer coordinates, and whether the button is pressed
var curX;
var curY;
var pressed = false;

// update mouse pointer coordinates
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();

规范

浏览器兼容性