input type="button"和button区别

刺骨的言语ヽ痛彻心扉 2022-08-21 13:56 213阅读 0赞

转自 https://davidwalsh.name/html5-buttons

One of the things I love about CSS is how easy it is to make one element look like another. In the example above, the first element is an anchor, the second is a button and the third is an input. I've overridden the `click` behavior of all three so they do the same thing.

If all three elements look and behave the same, does it matter which one you use? In this article, I'll explain the difference between anchors, inputs and buttons, and I'll show you when to use each one.

## Semantics ##

The question of which element to use boils down to [semantics][], which is using markup that reflects the meaning of the content. Using semantic HTML makes your content explicit, which gives you better browser compatibility, accessibility and SEO.

### Anchors ###

[Anchors][] (the `<a>` element) represent hyperlinks. What's a hyperlink? A [hyperlink][] is a resource 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.

### Inputs ###

An [input][] (`<input>`) represents a data field. The `type` attribute tells the browser which type of data the input controls. There are five input types related to buttons.

*  `<input type="submit">`: This is the most common button input. It's a button that, when clicked, submits a form.
 *  `<input type="image">`: Like an `<input type="submit">`, this input submits a form. However, it also takes a `src` attribute and is displayed as an image.
 *  `<input type="file">`: This control is used to upload files and is shown as a label and a button. There's no good cross-browser way to style file inputs, so you'll usually set its`display` to `hidden` and use a second button to trigger it.
 *  `<input type="reset">`: This is a button that resets a form.
 *  `<input type="button">`: This is a button with no default behavior. You can use to it add non-standard behavior to a form using JavaScript.

### Buttons ###

The [`<button>`][button] element represents a button! Buttons do the same things as the inputs mentioned above. Buttons were introduced into HTML as an alternative to inputs that are much easier to style. Unlike inputs, a button's label is determined by its content. This means you can nest elements within a `button`, such as images, paragraphs, or headers. Buttons can also contain `::before` and `::after` pseudo-elements.

Like an input, a button has a `type` attribute. This attribute can be set to `submit`, `reset` or`button` and does the same thing as the input's type. By default, the `type` is `submit`. If you place a button in a form and don't set its `type`, when it's clicked it will submit that form! If you don't want this behavior, set the `type` to `button`.

One nifty feature of inputs and buttons is they support the `disabled` attribute. This makes it easy to turn them on and off. Sadly, anchors don't have this capability.

## Which one? ##

So should you use an anchor, input or button? When you're navigating the user to a page or resource, use an anchor. Otherwise, both inputs and buttons are valid. Personally, I prefer to use inputs for submitting and resetting forms and buttons for custom behavior because I think it makes the intent clearer. However, the element you use is entirely up to you. Go nuts!

[semantics]: http://en.wikipedia.org/wiki/Semantic_HTML
[Anchors]: http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
[hyperlink]: http://www.w3.org/TR/html5/links.html#hyperlink
[input]: http://www.w3.org/TR/html5/forms.html#the-input-element
[button]: http://www.w3.org/TR/html5/forms.html#the-button-element