目录 搜索
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
文字

元素<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中的对象的引用,并将该引用保存在变量中btnaddEventListener()然后用于建立一个函数,当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>

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

如果该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 radiansfunction degToRad(degrees) {  return degrees * Math.PI / 180;};// update sizepicker output valuesizePicker.oninput = function() {
  output.textContent = sizePicker.value;}// store mouse pointer coordinates, and whether the button is pressedvar curX;var curY;var pressed = false;// update mouse pointer coordinatesdocument.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)

上一篇: 下一篇: