应用错误收集

除了生成的标记和外观之外，没有任何功能差异。 <h:commandButton>生成HTML <input type="submit">元素，<h:commandLink>生成HTML <a>元素，该元素使用JavaScript提交表单。两者都将用于提交表格。其他样式与功能无关。

如果您需要提交按钮，请使用<h:commandButton>，如果您需要提交链接，请使用<h:commandLink>。如果这对您没有感觉意义，那么我不知道。如果您无法决定使用哪一个，只需选择在UI透视图中最有意义的那个。询问网页设计师是否不确定。

<h:commandLink>和<h:outputLink>之间的差异更有趣。这已在此处详细解答：When should I use h:outputLink instead of h:commandLink?

对于表单，我更喜欢h：commandbutton

h：commandbutton就像HTML中的一个按钮，您可以在其中设置辅助bean的操作。 h：commandlink就像HTML中的链接（标签a），你也可以设置支持bean的动作

要在JSF中使用css样式，可以使用属性'styleClass'。

简而言之，我的建议是主要（默认）提交按钮的<h:commandButton type="submit">和任何其他按钮的<h:commandLink>混合（例如过滤，排序，查找，预览，生成密码，。 ..）。

冗长的解释如下：

首先，一些背景知识：人们应该也应该知道不同的<h:commandButton> type属性。（type属性直接转换为生成的<input type="">属性。）我没有在任何地方明确说明这一点，但有些测试显示：

type="submit" （如果省略则默认为此）执行表单的正常“提交”行为（即POST表单）以及action和/或actionListener。
type="reset"执行正常的“重置”行为（即清除/重置表单字段），无需调用任何action和/或actionListener。< / LI>
type="button"生成一个按钮（显然<input type="button">比<button>代码更有限）没有调用任何action和/或actionListener秒。

除了重置字段外，后两者似乎只对激活例如的JavaScript。他们不会发布表格。

所以回答问题：在表单上下文中：

<h:commandButton>（相当于<h:commandButton type="submit">，请记住）通常是最有用的，特别是当大多数浏览器现在实现激活按。这可能会改善您的表单的用户体验

E.g。记录起来有点快：

用户名 标签 密码 输入

而不是

用户名 标签 密码 ...将手从键盘移动到鼠标，搜索指针和按钮上的位置，然后单击。

还要记住，任何<input>按钮（可选择CSS样式）仍然可以通过键盘通过 Tab 到达<a>（CSS样式为按钮）有焦点，然后空格键。

但是，对于表单上应该执行其他操作而不是提交（或“只是”清除字段）的其他按钮，<h:commandLink>会更合适。这仍然可以通过键盘通过 Tab 进行，直到<a>（CSS样式为按钮）具有焦点，然后 Enter 。注意这与使用<h:commandButton>生成的按钮不一致，<h:commandButton type="submit">可能是CSS样式，看起来相同，但浏览器处理不同（ Tab .. 空格键）。

这是一般性解释，但是您可能需要注意一些问题......

当用户按下 Enter 表单时，表单上没有<h:commandLink>按钮，只有action{Listener}按钮（甚至根本没有按钮）仍然提交，但没有onSubmit运行的好处。这可能不是一个太大的问题，因为表单值存储在支持bean中并在页面加载时再次显示，因此除了服务器往返之外，用户通常不会注意到任何错误。但这可能不是你想要的方式 Enter 被处理....我现在想到的唯一方法是绕过那个，就是在表格上放一个<h:commandLink>事件。通过Javascript激活您的默认A.mystyle按钮.... Arghhhh !!

您还应该确保您的CSS样式选择器是合理的。

<h:commandLink>适用于INPUT[type=submit].mystyle;
<h:commandButton type="submit">至INPUT[type=reset].mystyle;
<h:commandButton type="reset">至INPUT[type=button].mystyle;
<h:commandButton type="button">至A;

这些当然可以用逗号连接作为单个样式定义的选择器。或者，如果您想冒一些其他东西被设置为 mystyle 按钮的风险，您可以省略INPUT / SPAN.mystyle说明符。但是，我已按上面的方式设置了按钮，因此我也可以使用它：

disabled定义链接或按钮何时被禁用（例如，通过:before属性） - 这允许您为禁用的按钮提供淡化（灰色）外观。

我也遇到了一些高度差异（按钮上的行高与链接上的内容高度 - 如果您的按钮包含背景图像作为图标而不是文本，则可能会出现问题），以及{处理{1}} / :after个伪类。我只是说：在<h:commandButton>和<h:commandLink>上测试并重新测试你的CSS，以确保它们看起来（基本上）相同！

这是我的摘要备忘单：

JSF                  <h:commandButton <h:commandButton <h:commandButton <h:commandLink>
                      type="submit">   type="reset">    type="button">

Translates to        <input           <input           <input           <a>
                      type="submit">   type="reset">    type="button">
Submit form             POST             no, clears flds  no              POST
Javascript events       YES              YES              YES             YES
action{Listener}        YES              no               no              YES
Enter on form activates YES              no               no              no
Tab...+Enter activates  YES(*)           YES              YES             YES
Tab...+Space activates  YES(*)           YES              YES             no
Highlight on Tab-focus:
- Firefox 32            YES              no               no              no
- Chrome 41             YES              YES              YES             YES
- Internet Explorer 11  YES              YES              YES             YES
- Opera 28              YES              YES              YES             no(*)

(*=Opera 28 seems not to allow tabbing (or Alt+Arrow) to  hyperlinks to activate them.)

如果我错了，请纠正我，但这两者之间的第一个区别在于<h:commandButton>并不需要在浏览器中启用JavaScript。如果您的网页是JS重，那么您可以使用<h:commandLink>，否则最好保持JS免费，以防您的用户想要使用像Tor浏览器这样的东西，你可以使用它。第二个是这两个在网页中的表现。 <h:commandLink>将执行它应该执行的操作，或者有时也会从具有@PostConstruct注释的辅助bean触发方法。虽然<h:commandButton>也可以触发内联JavaScripts，这可能会导致从支持bean触发其他方法。但是它也会自动刷新视图。

h：commandbutton vs h：commandlink

4 个答案: