如何将带有按钮的表单提交更改为可以通过单击操作的内容？

Question

我有以下内容：

<form action="/Account/LogOff"
   id="logoutForm"
   method="post">
   @Html.AntiForgeryToken()
   <button>Logout</button>

   <i class="fa fa-user"></i>
</form>

单击按钮时会提交表单。但是我想改变按钮 使用fontawesome图标。意思是我根本不需要按钮。只是有一个用户可以点击的fontawesome图标。

我如何更改它以便在单击图标而不是提交表单时提交表单 按钮？

Answer 1

有很多方法可以完成这项工作！

添加背景图片

要将背景图像添加到按钮本身，可以添加此CSS属性。

试试这个：

button {
  background-image: url('..url/to/image');
}

添加图像作为按钮的内容

或者这个将在按钮中添加图像而不是Logout图像，请尝试：

<button><img src="url/to/image.png" alt="photo" /></button>

使用图像提交表单

或者这个只是一个简单的图像，但是使用JS，你在单击图像时提交表单，如下所示：

<i onclick="submit()">Text or something</i>
<form id="form" method="post">
   // elements here..
</form>

在JS中，这一个：

function submit () {
   document.getElementById("form").submit();
}

注意onclick方法和函数！ :)一旦用户点击i，您就会收到提交的表单，并且会提交ID为form的表单！

Answer 2

试试这个

<button><i class="fa fa-user"></i> Logout</button> //It will add user icon before the text