样式化提交按钮——Rails 应用程序答案

【问题标题】：Styling submit buttons -- Rails app样式化提交按钮——Rails 应用程序
【发布时间】：2015-04-30 18:39:15
【问题描述】：

我一直在尝试在提交按钮中放置一个很棒的字体或字形图标（甚至是图像）。这很快就崩溃了，我需要实现另一个选项。我已经看到了一些这样做的方法，但我不知道哪种方法是“正确的”或更好的方法。

我见过的三个竞争者是：

div
链接
按钮

在“提交”按钮中获取图像/图标的最佳方式是什么？

这三个不是都需要一个 JS 组件吗？

【问题讨论】：

应该改为“程序员交流”吗？
好的。我想有些人说过，“如果你做一个链接提交表单，它对不运行 JS 的客户不起作用。”
检查 bootstrap 如何将 glyphicon 添加到按钮元素 getbootstrap.com/components/#glyphicons-examples
@Jeff - 不，这不属于程序员，因为它更多的是关于实现问题

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

这是 bootstrap 如何将 glyphicon 添加到按钮对象：

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Bootstrap button with glyphicon

【讨论】：

你必须使用 JS 来提交这样的按钮，对吧？这样做可以吗？
无需JS提交。将引导 css 复制到您的项目中以模仿这种按钮样式，我认为它会完成这项工作。
我目前正在使用此代码，按钮什么也不做。
将 type="button" 替换为 type="submit"

【解决方案2】：

按钮选项不需要JS。我已经对其进行了测试，您可以在此处https://jsfiddle.net/mikhailjan/sf9s28et/5/ 看到一个使用 Font Awesome 的工作示例，或者只需查看以下代码：

<form action="add_person.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>

  <button type="submit" class="button">
    <i class="fa fa-user-plus"></i> Add Person
  </button>

</form>

Jonathan Anctil 是正确的，按钮需要有type="submit" 才能使表单正常工作。

【讨论】：