在以下情况下，如何使图标表现得像提交按钮？

Question

我有以下 HTML 代码：

<form action="xyz.php" method="post" class="navbar-form pull-right">
  <input style="width: 115px;" type="text" placeholder="Enter the zip code"> <i class="icon-map-marker icon-black"></i>
</form>

现在你可以从上面的代码中看到这一行了：

<i class="icon-map-marker icon-black"></i>

此行旨在显示引导程序中的地图标记图标。现在我想要实现的是让这个图标像提交按钮一样。也就是说，当用户在文本字段中输入一些值，然后单击此地图标记图标后，表单应该会提交。

如何做到这一点？

提前致谢。

Answer 1

您可以使用图像按钮轻松完成此操作，然后您可以随意设置样式

<form action="xyz.php" method="post" class="navbar-form pull-right" id="formId">
<input type="image" src="your_image_location" alt="Submit Form" />
</form>

Answer 2

使用此代码

<form action="xyz.php" method="post" class="navbar-form pull-right">
  <input style="width: 115px;" type="text" placeholder="Enter the zip code">
<input type="submit" value="Submit"><i class="icon-map-marker icon-black"></i></input>
</form>

这个用于提交

<input type="submit" value="Submit"><i class="icon-map-marker icon-black"></i></input>

http://urbandoor.in/