2017-03-24 79 views
0

我遇到以下两个代码片段:<button>有什么区别Click Me!</button>和<button type =“button”>点击我!</button>?

function myFunction() { 
 
    var x = document.getElementById("demo"); 
 
    x.style.fontSize = "25px"; 
 
    x.style.color = "red"; 
 
}
<p id="demo">Click the button to change the layout of this paragraph</p> 
 
<button onclick="myFunction()">Click Me!</button>

<h1>My First JavaScript</h1> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> 
 
<p id="demo"></p>

我无法理解为什么不同类型= “按钮” 属性已添加在第二个代码片段?

两个按钮有什么区别?

回答

1

在你的例子中,type="button"的添加没有任何区别(删除它,你会看到)。

通常,您将指定按钮的type如果在一个窗体中使用,作为默认的<button>typesubmit,并点击它会导致<form>提交,并且通常是刷新当前页面或加载一个新页面。

通过指定类型为button而不是默认的submit,可以防止该行为。

+0

假设,我添加了一个按钮到一个表单而不添加'type'属性。如果我不想在点击时提交表单,您是否需要添加type =“button”?如果我想提交表单,那么不需要在按钮标签中指定'type'属性?并在上面两个代码片段中使用'type'属性是不重要的? – user2839497

+1

对评论中的所有内容都一视同仁 – j08691

1

<button>标签定义了一个可点击的按钮。

<button>元素内,您可以放置​​内容,如文本或图像。这是此元素与用<input>元素创建的按钮之间的区别。

它有这么多的属性和type是其中之一,这种类型的具有3个值:

  1. button(普通按钮)
  2. reset(处理复位动作,专门为形式)
  3. submit(提交表格提交)

要了解其他属性,您可以阅读: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

https://www.w3schools.com/tags/tag_button.asp

+1

'

+0

你是对的并更新了答案 –

-1

写入<button type="button">定义按钮作为可点击按钮。

没有与<button>没有大的区别,但它更安全地把一个类型的属性按钮元素,因为一些浏览器可以使用不同的默认类型为<button>元素,这可能导致错误。

0

属性type决定<Button>的样式。在Internet Explorer中默认值为button。但是,在其他浏览器中,即使在标准W3C中,其默认值为submit。 所以你需要永远定义typebutton

+0

它在很久以前(即IE7及以下版本)是IE中的默认值。现在可以省略该属性。 –

0

有三种类型的按钮:

  1. 提交 - 提交当前表单数据。 (这是默认值。)
  2. reset - 重置当前表单中的数据。
  3. button - 只是一个按钮。它的影响必须由其他东西(即JavaScript)来控制。

按钮属性是不是什么大不了的,因为它改变没有在你的代码。 您的两个代码版本的唯一区别是在“onclick”属性(code2)之后编写整个代码,并在“onlick”属性(code1)之后编写函数名称。 你可以阅读关于按钮属性和输入和按钮之间的区别与本网站上的相同属性http://html.com/attributes/button-type/ 我希望它会帮助你很多。