如何更改表单输入按钮以锚定href？答案

【问题标题】：How to change form input button to anchor a href?如何更改表单输入按钮以锚定href？
【发布时间】：2020-02-05 00:26:09
【问题描述】：

我想使用 html/css 模板更改我的网站设计。我的站点代码使用表单输入作为注销按钮（提交表单发布方法），但我使用锚点作为按钮的模板。我如何仍然可以使用模板样式但仍然可以使用按钮？

我尝试将<input> 更改为<button>，但风格仍然不同放置“方法”和“动作”似乎对锚无效。

下面是我的代码

<form method="POST" enctype="multipart/form-data" action="{{ route('logout') }}">
<input type="submit" value="Logout">
</form>

这是模板中的代码

<a href="#" class="dropdown-item has-icon text-danger">
<i class="fas fa-sign-out-alt"></i> Logout
</a>

我希望href也可以做action post方法。

【问题讨论】：

任何你不希望搜索引擎触发的东西都不应该是一个链接，你希望你的注销按钮看起来像一个链接，然后只需使用 CSS 使 <button> 元素看起来像<a> 元素。
<button type="submit" class="dropdown-item has-icon text-danger"> <i class="fas fa-sign-out-alt"></i> Logout </button>
链接只能触发 GET 请求，不能触发 POST 请求。您必须通过 JavaScript 触发发布请求，或者将按钮设置为看起来像文本链接，例如<button type="submit" class="dropdown-item has-icon text-danger"><i class="fas fa-sign-out-alt"></i> Logout</button>（您可能还需要覆盖一些按钮默认样式）
我完全清楚我不能使用<a> 来请求POST 方法。但我仍然想使用与模板类似的样式。

标签： html css laravel-blade

【解决方案1】：

你可以试试这个：

<a href="#" class="dropdown-item has-icon text-danger">
<i class="fas fa-sign-out-alt"></i> <form method="POST" enctype="multipart/form-data" action="{{ route('logout') }}">
<input type="submit" value="Logout">
</form>
</a>

【讨论】：

结果仍然显示按钮，与模板样式不同。

【解决方案2】：

我刚刚在查看 Laravel 默认 app.blade.php 时找到了答案。为了解决这个问题，我必须修改我的代码并添加一些 javascript 来变成这样

          <a class="dropdown-item has-icon text-danger" href="{{ route('logout') }}" onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
            <i class="fas fa-sign-out-alt"></i> Logout
          </a>
          <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
          </form>

【讨论】：