input type="button"

<input type="button">

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

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

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

值	用作按钮标签的DOMString
活动	点击
支持的通用属性	类型和价值
IDL属性	值
方法	没有

值

一个<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(

规范

Specification	Status
HTML Living StandardThe definition of '<input type="button">' in that specification.	Living Standard
HTML5The definition of '<input type="button">' in that specification.	Recommendation

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	(Yes)	(Yes)	1.0

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)