锚点按钮组_锚点，输入和按钮之间的区别

锚点按钮组

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.

我喜欢CSS的一件事是使一个元素看起来像另一个元素是多么容易。 在上面的示例中，第一个元素是锚点，第二个元素是按钮，第三个元素是输入。 我已经覆盖了所有三个的click行为，因此它们执行相同的操作。

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.

使用哪个元素的问题归结为语义 ，即使用反映内容含义的标记。 使用语义HTML可以使您的内容明确，从而为您提供更好的浏览器兼容性，可访问性和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.

锚点 ( <a>元素)表示超链接。 什么是超链接？ 超链接是一个人可以浏览到或在浏览器中下载的资源。 如果要允许用户移动到新页面或下载文件，请使用锚点。

输入项 (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属性告诉浏览器输入控制的数据类型。 有五种与按钮相关的输入类型。

• <input type="submit">: This is the most common button input. It's a button that, when clicked, submits a form.

  <input type="submit"> ：这是最常见的按钮输入。 单击该按钮即可提交表单。

• <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="image"> ：像<input type="submit"> ，此输入提交表单。 但是，它也具有src属性，并显示为图像。

• <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="file"> ：此控件用于上传文件，并显示为标签和按钮。 没有一种好的跨浏览器方式来设置文件输入的样式，因此通常将其display设置为hidden然后使用第二个按钮触发它。

• <input type="reset">: This is a button that resets a form.

  <input type="reset"> ：这是一个重置表单的按钮。

• <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.

  <input type="button"> ：这是一个没有默认行为的按钮。 您可以使用JavaScript向表单添加非标准行为。

纽扣 (Buttons)

The <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.

<button>元素代表一个按钮！ 按钮的功能与上述输入相同 。 在HTML中引入了按钮，以替代易于设计的输入。 与输入不同，按钮的标签由其内容确定。 这意味着您可以将元素嵌套在button ，例如图像，段落或标题。 按钮也可以包含::before和::after伪元素。

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.

像输入一样，按钮也具有type属性。 该属性可以设置为submit ， reset或button ，并且与输入的类型具有相同的作用。 默认情况下， type为submit 。 如果将按钮放置在表单中而不设置其type ，则单击该按钮时，它将提交该表单！ 如果您不希望出现这种情况，请将type设置为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.

输入和按钮的一个漂亮功能是它们支持disabled属性。 这样可以轻松打开和关闭它们。 可悲的是，锚不具备此功能。

哪一个？ (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!

那么您应该使用锚点，输入还是按钮？ 当您将用户导航到页面或资源时，请使用锚点。 否则，输入和按钮均有效。 就我个人而言，我更喜欢使用输入来提交和重置表单以及用于自定义行为的按钮，因为我认为这样做可以使意图更清晰。 但是，您使用的元素完全取决于您。 发疯！

翻译自: https://davidwalsh.name/html5-buttons

锚点按钮组