< 按钮类型 = “按钮”> 的意义何在？

小开

There's also <button type="submit"> where it submits a form when clicked.

So if you want to perform a POST using ajax, that's the best to make use of <button type="button"> so it would not submit the form when the button is clicked.

小开

最佳答案

Yep, there's a reason - but (usually) only if you're in a <form> element.

If you include a button in a form element without specifying it's just a regular button, it defaults to a submit button.

<form>
<button>I will submit the form when clicked!</button>
</form>

vs

<form>
<button type='button'>I won't!</button>
</form>

The first one is assumed to be type=submit since a type attribute hasn't been specified.

If you are not in a <form> element, the button won't have anything to submit, so it doesn't matter as much. :)

Semantics usually become important at some point in your application's lifetime, though, so it's a good idea to make a habit of specifying the type.

The only other reason that could be relevant is if there's a styling rule that specifies [type=button] or something. That's not recommended, though.

小开

The default button type is actually submit. This clarifies that there should be no post option, but just be a clickable object.

小开

<button> has default type = "submit" it means if it is within a form element it it will try to submit the form. You can bind your click event to it and perform some action.

<button type="button"> means it is a normal button and you have to bind click event to it to do some action.

小开

The default type for a button is "submit". MDN doesn't talk about it as far as I can see but it is available in the html5 specification.

The missing value default is the Submit Button state.

So setting the type to "button" disables the default behaviour of submitting a form so you won't need to use preventDefault to handle it in javascript.

小开

My personal experience with <button>s that don't have a type specified, is that whenever they were clicked on, the save button for saving changes on the form would get disabled automatically, although no actual submission/ post request was being made.

This was strange because whenever you would try to upload a file, after the file selection window was gone, you could not actually save the changes you made, so no file could be uploaded.

The save button would get disabled correctly as the definition was ng-disabled="form.$submitted" so that after saving you could not click it again.

I got a lead on what was going on from seeing in the debugger the form's AngularJS $submitted flag being true and also recently changed.

I fixed the issue by setting the button's type to "button" so that it won't trigger the form's submitted state getting changed, which it was doing because of its default type having been "submit" as stated in the other answers.

As far as my research goes, the <button> element was introduced in HTML4 and submit was it's default type since.