通过输入和图像按钮提交搜索表单？答案

【问题标题】：Search form submit by enter and image button?通过输入和图像按钮提交搜索表单？
【发布时间】：2012-04-08 01:25:11
【问题描述】：

我正在自定义 Wordpress 的 21 'SearchForm'/'searchform.php' --

我想保留 Enter-to-Search 功能；但我想为用户添加我的自定义图像按钮，使其也具有传统的点击按钮提交。

但是； 当我将功能默认值上使用的 ID、类和名称拖到新的图像按钮时 - 我的图像不显示。但是，当我没有使用这些类等时。它会渲染吗？

下面是我目前使用代码的地方。（有什么建议吗？）

<?php
/**
 * The template for displaying search forms in Twenty Eleven
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>

<form method="get" id="searchform" name="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="assistive-text"><?php _e( 'Search', 'twentyeleven' ); ?></label>
<input type="text" class="field" name="s" id="s" value="Search, title, author, keyword" onfocus="ClearForm();" style="width: 225px;">
<input type="submit" src="http://#/wp-content/uploads/2012/03/searchnav_btn.gif" style="position:absolute;" value="<?php esc_attr_e( 'Search' ); ?>" class="submit" name="submit" id="searchsubmit"/>

<input type="image" src="#/wp-content/uploads/2012/03/searchnav_btn.gif" style="position:absolute;" value="<?php esc_attr_e( 'Search' ); ?>" class="submit" name="submit" id="searchsubmit"/>

</form>

<script language="javascript">
<!--
function ClearForm() {
  document.searchform.submit.value= "";
}

//-->
</script>

【问题讨论】：

提交按钮上设置的 id 和 classes 可能附加了 css。 id 应该是唯一的，因此页面上只有一个元素应该具有特定的 id。在不知道应用于 id 和 class 的样式的情况下，很难说出图像的放置位置。尽管由于它们都处于绝对位置，因此您的图像可能在另一个之后。
忠告：使用子主题 codex.wordpress.org/Child_Themes 你只覆盖你需要覆盖的文件

标签： php jquery html forms wordpress

【解决方案1】：

您可以尝试在图像样式中添加 z-index 以查看它是否会出现在顶部。

【讨论】：

但是，我想这是我得到的最好的。接受。