html 按键 which,html - <button> vs. <input type="button" />. Which to use? - Stack Overflow

最新推荐文章于 2022-12-02 16:03:49 发布

weixin_39633113

最新推荐文章于 2022-12-02 16:03:49 发布

阅读量263

点赞数

文章标签： html 按键 which

689

Here's a page describing the differences (basically you can put html into a )

And another page describing why people avoid (Hint: IE6)

Another IE problem when using :

And while we're talking about IE, it's

got a couple of bugs related to the

width of buttons. It'll mysteriously

add extra padding when you're trying

to add styles, meaning you have to add

a tiny hack to get things under

control.

apU0J.jpg?s=32&g=1

DarkAjax

15.2k1111 gold badges5252 silver badges6565 bronze badges

answered Jan 22 '09 at 13:20

Tamas CzinegeTamas Czinege

111k3939 gold badges146146 silver badges173173 bronze badges

213

This answer was in 2009, since IE6 is dead now I assume there is no reason not to use now?

– Rosdi Kasim

Feb 26 '13 at 11:06

If they want to pirate , let them get a sucky version of your site. Drop IE6, drop IE7, unfortunately IE8 still needs support.

– Jared

Aug 15 '13 at 1:33

According to Microsoft's IE6 Countdown page, China's IE6 usage is still clocking in (as of Jan 2014) at about 22%. ie6death.com notes that IE6 support is ending April 8, 2014.

– BryanH

Jan 18 '14 at 23:33

359

Just as a side note, will implicitly submit, which can cause problems if you want to use a button in a form without it submitting. Thus, another reason to use (or )

Edit - more details

Without a type, button implicitly receives type of submit. It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form.

There are 3 supported types for a button

submit || "submits the form when clicked (default)"

reset || "resets the fields in the form when clicked"

button || "clickable, but without any event handler until one is assigned"

radiovisual

5,92311 gold badge2222 silver badges3838 bronze badges

answered Apr 9 '12 at 20:13

pv5mS.png?s=32&g=1

Travis JTravis J

77.1k3939 gold badges185185 silver badges250250 bronze badges

180

This article seems to offer a pretty good overview of the difference.

From the page:

Buttons created with the BUTTON element function just like buttons

created with the INPUT element, but

they offer richer rendering

possibilities: the BUTTON element may

have content. For example, a BUTTON

element that contains an image

functions like and may resemble an

INPUT element whose type is set to

“image”, but the BUTTON element type

allows content.

The Button Element - W3C

Andrei Botalov

19.4k99 gold badges8282 silver badges117117 bronze badges

answered Jan 22 '09 at 13:19

NoldorinNoldorin

134k5353 gold badges250250 silver badges293293 bronze badges

Inside a element you can put content, like text or images.

Click Me!

This is the difference between this element and buttons created with the element.

Danield

107k3434 gold badges201201 silver badges230230 bronze badges

answered Mar 28 '12 at 4:27

SanthoshSanthosh

55944 silver badges22 bronze badges

Quote

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

If I understand correctly, the answer is compatibility and input consistency from browser to browser

Joel Coehoorn

363k107107 gold badges529529 silver badges767767 bronze badges

answered Jan 22 '09 at 13:18

user54579user54579

4,24944 gold badges2121 silver badges1919 bronze badges

Anchors (the element) represent hyperlinks, resources a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.

An input () represents a data field: so some user data you mean to send to server. There are several input types related to buttons:

Each of them has a meaning, for example "file" is used to upload a file, "reset" clears a form, and "submit" sends the data to the server. Check W3 reference on MDN or on W3Schools.

The button () element is quite versatile:

you can nest elements within a button, such as images, paragraphs, or

headers;

buttons can also contain ::before and ::after pseudo-elements;

buttons support the disabled attribute. This makes it easy to turn

them on and off.

Again, check W3 reference for tag on MDN or on W3Schools.

ocSAe.jpg?s=32&g=1

GameO7er

1,58911 gold badge1111 silver badges2626 bronze badges

answered Nov 8 '14 at 14:31

AttilioAttilio

1,99111 gold badge2020 silver badges2020 bronze badges

Quoting the Forms Page in the HTML manual:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

answered Jan 22 '09 at 13:19

gimelgimel

74.1k1010 gold badges6969 silver badges104104 bronze badges

Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.

answered Mar 1 '11 at 8:17

nickomarsanickomarsa

22522 silver badges22 bronze badges

For client side scripting. has no function in HTML.

– iGEL

Mar 3 '12 at 13:40

by default behaves like if it had a "type="submit" attribute

can be used without a form as well as in forms.

text or html content allowed

css pseudo elements allowed (like :before)

tag name is usually unique to a single form

vs.

type should be set to 'submit' to behave as a submitting element

can only be used in forms.

only text content allowed

no css pseudo elements

same tag name as most of the forms elements (inputs)

in modern browsers, both elements are easily styleable with css but in most cases, button element is preferred as you can style more with inner html and pseudo elements

answered Oct 31 '17 at 8:46

ZMXUh.png?s=32&g=1

Sergey SklyarSergey Sklyar

1,61911 gold badge1313 silver badges2424 bronze badges

As far as CSS styling is concerned the Example is better as it gives you the ability to use CSS :before and :after pseudo classes which can help.

Due to the visually rendering different to an or when styled with classes in certain situations I avoid them.

It's very worth noting the current top answer was written in 2009. IE6 isn't a concern now days so Wins styling consistency in my eyes comes out on top.

answered Jul 30 '15 at 4:33

jnowlandjnowland

1,5261515 silver badges1414 bronze badges

There is a big difference if you are using jQuery. jQuery is aware of more events on inputs than it does on buttons. On buttons, jQuery is only aware of 'click' events. On inputs, jQuery is aware of 'click', 'focus', and 'blur' events.

You could always bind events to your buttons as needed, but just be aware that the events that jQuery automatically is aware of are different. For example, if you created a function that was executed whenever there was a 'focusin' event on your page, an input would trigger the function but a button would not.

answered Dec 21 '15 at 17:12

MattCMattC

4,99811 gold badge4242 silver badges3737 bronze badges

re: KjetilNordin - We had an application that was aware of any focusin events on a page, and one occurred, an action took place. So if using an input, you could watch all of the elements for a single event. Not saying you should, but you could. The risk is that someone changes the input to a button, and then the focusin does not occur, and then your action does not occur, and then your app goes boom. That's what happened to us. :)

– MattC

May 2 '16 at 18:08

use focus events when an element is currently targeted via mouse/keyboard. they show the user where they are in the document.

– albert

May 16 '17 at 17:14

I just want to add something to the rest of the answers here. Input elements are considered empty or void elements (other empty elements are area , base , br , col , hr , img , input , link , meta , and param. You can also check here), meaning they cannot have any content. In addition to not having any content, empty elements cannot have any pseudo-elements like ::after and ::before, which I consider a major drawback.

answered Jun 19 '17 at 10:20

photo.jpg?sz=32

Roumelis GeorgeRoumelis George

5,90822 gold badges1414 silver badges3030 bronze badges

Although this is a very old question and might not be relevant anymore, please keep in mind that most of the problems that the tag used to have don't exist anymore and therefore is highly advisable to use it.

In case you cannot do so for various reasons, just keep in mind to add the attribute role=”button” in your tag as of accessibility.

This article is quite informative: https://www.deque.com/blog/accessible-aria-buttons/

answered Mar 11 '20 at 14:54

photo.jpg?sz=32

Nasia MakrygianniNasia Makrygianni

41766 silver badges1111 bronze badges

is flexible in that it can contain HTML. Moreover, it is much easier to style using CSS, and the styling actually gets applied across all browsers. However, there are some drawbacks regarding Internet Explorer (Eww! IE!). Internet Explorer does not detect the value attribute properly, using the tag's content as the value. All of the values in a form are sent to the server-side, regardless of whether or not the button is clicked. This makes using it as a tricky and a pain.

on the other hand doesn't have any value or detection issues, but you can't, however, add HTML like you can with . It's also harder to style, and the styling doesn't always respond well across all browsers. Hope this helped.

answered Jun 27 '14 at 22:51

hB8K9.jpg?s=32&g=1

Moh S.Moh S.

11122 silver badges55 bronze badges

in addition, one of the differences can come from provider of the library, and what they code. for example here i'm using cordova platform in combination with mobile angular ui, and while input/div/etc tags work well with ng-click, the button can cause Visual Studio debugger to crash, surely by differences, that the programmer caused; note that MattC answer point to the same issue, the jQuery is just a lib, and the provider didn't think of some functionality on one element, that s/he provides on another. so when you are using a library, you may face an issue with one element, which you won't face with another. and simply the popular one like input, will mostly be the fixed one, just because it's more popular.

answered Jan 2 '16 at 8:23

tftCc.jpg?s=32&g=1