【问题标题】:HTML/CSS - Buttons - When to use whatHTML/CSS - 按钮 - 什么时候使用什么
【发布时间】:2012-08-10 10:16:23
【问题描述】:

我有一个关于 HTML 页面上的按钮的非常基本的问题。

我们知道,创建它们有多种可能性。可以在a 上设置display: block;,因此可以为其指定颜色、宽度和高度。但也有 HTML 元素 button 和元素 submit

什么时候用什么?例如,在创建表单时,如果我没记错的话,我需要一个submit 元素。但是当我在表单之外有一个按钮时,我可以使用普通的a。但是,我仍然不知道使用button

你能帮我解决这个问题吗?

【问题讨论】:

    标签: html css button


    【解决方案1】:

    锚点 (<a>) 应在 链接 而非表单提交时使用。

    搜索引擎爬虫无法追踪inputbutton提交的链接,只能追踪a。因此,出于 SEO 的目的,最好使用锚点作为链接。

    如果是表单,您应该始终使用buttoninput,因为它们可以在按下回车按钮时提交表单(与链接不同),并且通常更便于访问。

    我不会详细说明是使用button 还是input,因为已经有一篇关于此的深入帖子:

    <button> vs. <input type="button" />. Which to use?

    【讨论】:

      【解决方案2】:

      &lt;button&gt;

      按钮(&lt;button&gt;) HTML 元素代表一个可点击的按钮。

      &lt;a&gt;

      HTML 锚元素 (&lt;a&gt;) 定义超链接、超链接的指定目标目标,或两者兼而有之。

      【讨论】:

        【解决方案3】:

        在表单中你应该使用适当的元素。

        'a' 在表格中并不合适。

        例如,看看 W3C 上元素的主要目标。

        因为你可以使用任何元素,并且使用 CSS 或 JS 你可以改变行为和目的......这太糟糕了。 (用法、可访问性、理解)

        【讨论】:

          【解决方案4】:

          根据w3Schools.com

          定义和用法

          &lt;button&gt; 标签定义了一个可点击的按钮。

          &lt;button&gt; 元素中,您可以放置​​内容,例如文本或图像。 这是此元素与使用创建的按钮之间的区别 &lt;input&gt; 元素。

          提示:始终为&lt;button&gt; 元素指定类型属性。 不同的浏览器对&lt;button&gt; 使用不同的默认类型 元素。

          还有:

          提示和注意事项

          注意:如果您在 HTML 表单中使用 &lt;button&gt; 元素,则不同 浏览器可能会提交不同的值。使用&lt;input&gt; 在 HTML 表单。

          就我所见,&lt;button&gt; 标签旨在表单之外使用,&lt;input type="button"&gt; 在内部使用。

          默认情况下,两者都被设置为您的浏览器习惯于设置&lt;input type="button"&gt; 的样式,这与&lt;a&gt; 标签不同。

          【讨论】:

          • 请不要将 w3schools 用作notoriously poor at ensuring their content is correct/up to date的可靠信息来源
          • 抱歉,我不知道 w3school 已被 Web 开发人员积极弃用。下次如果没有其他参考资料,我会尽量不参考它们。但是,并不是因为上面有一些误导性的内容,所以一切都会自动出错,对吧?
          【解决方案5】:

          如果感觉将事件处理程序附加到按钮而不是锚元素是正确的,我最近一直在使用按钮作为 JavaScript 钩子。

          锚标签代表一个位置,而按钮对我来说更像是一种行为。我一直使用按钮作为幻灯片导航、显示/隐藏内容和执行 ajax 请求。 :D

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-09-28
            • 2022-11-10
            相关资源
            最近更新 更多