Question

使用Bootstrap 3.3.6和FontAwesome 4.6的网站

我有一个搜索表单，其中包含文本字段和按钮。我想要做的就是使用FontAwesome图标fa-search（http://fontawesome.io/icon/search/）作为按钮。

我的标记就是这个。这种呈现的方式看起来很完美，但点击时按钮不提交表单：

<form method="post" action="/somewhere">
<div class="col-lg-4 pull-right">    
            <div class="input-group">
                <input type="text" name="keywords" id="keywords" class="form-control" maxlength="100" autocomplete="off" placeholder="Search...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
              </span>
            </div>
        </div>
</form>

为什么这不起作用？是否无法在提交按钮或其他东西上使用FontAwesome？

Answer 1

您需要将button类型更改为submit而不是button，因为这有助于触发表单submit事件。所以，你的HTML看起来应该是这样的 -

<button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>

干杯！

Answer 2

您也可以尝试这样做而不是按钮标记

<label for="submitBtn" class="btn btn-default"><i class="fa fa-search"></i></label>
    <input id="submitBtn" type="submit" class="hidden" />

使用FontAwesome图标作为提交按钮

2 个答案: