css - 在HTML中使用input_tag、a_tag、div_tag和button_tag作为按钮的规则和优势

Question

在 HTML 中使用 a_tag、div_tag 和 button_tag 作为按钮有什么规则？

我是 Ruby on Rails 用户。 Rails 默认给 input_tag 和 button_tag 作为按钮。使用 button_tag 本身之外的其他标签有什么好处？我什么时候应该使用每一个？

提前致谢。

Answer 1

在不引入任何属性的情况下，有一个 HTML 按钮元素:

<button></button>

还有一个通用的表单输入元素，可以设置为呈现为按钮:

<input />

这两个元素都接受三个按钮类型的属性，让用户代理确定它们的行为(作为按钮):

<button type="button">Regular button</button>
<input type="button" value="Regular button" />

<button type="submit">Form submit button</button>
<input type="submit" value="Form submit button" />

<button type="reset">Form reset button</button>
<input type="reset" value="Form reset button" />

设置这些属性后，这两个元素的行为相同。这两个元素之间的主要区别是 button 元素可以包含 HTML，而 input 元素只能包含通过其 value 属性传入的文本(参见 <button> vs. <input type="button" />. Which to use?):

<button type="button">
    <span>This is perfectly valid</span>
</button>

<input type="button" value="No HTML permitted here" />

(作为旁注，button 元素接受任何 不是 交互式内容(例如，另一个按钮或复选框)的 phrasing content 后代。

但是，从可访问性的 Angular 来看，任何接受 role 属性的 HTML 元素都可以简单地通过声明 role="button":

<a role="button"></a>
<div role="button"></div>
<span role="button"></span>
...

这些都是完全有效的，合规的用户代理会将所有这些都视为按钮。

如何使用它们完全取决于上下文。如果您的按钮在表单中，您将要使用 input 元素；如果您的按钮在您的页面上是独立的，您将要使用 button 元素；如果您的按钮在超链接列表中找到，您也可以只使用 role 为“button”的 a 元素，但您可以只使用 button 如果你愿意，也可以在这里。请记住，type 属性的 submit、reset 和 button 值仅在 button< 上有效 和 input 元素，并且在添加到具有“按钮” Angular 色 的任何其他元素时将不起作用。