Поиск перед фоновым изображением перенаправляет на домашнюю страницу при клике

Question

У меня есть изображение заголовка, где также есть поле поиска.

Однако, когда я нажимаю на вход для поиска, меня перенаправляют на домашнюю страницу, потому что мой поиск находится внутри тега.

Как я могу предотвратить это, когда я хочу выполнить поиск внутри заголовок с фоновым изображением.

Я хочу, чтобы функция поиска НЕ ​​go возвращалась на домашнюю страницу, но я хочу, чтобы фоновое изображение go возвращалось на домашнюю страницу.

Вот мой код:

<header>
    <h1>
        <a href="/">
            <span class="texte-cache">Sel gras</span>
            <section class="section-recherche">
                <?php
                // define variables and set to empty values
                $rechercheErr = "";
                $recherche  = "";
                $rechercheValid = false;
                ?>

                <form method="get" action="../pages/recherche.php">
                    <div class="recherche">
                        <input type="search" name="recherche" id="recherche" placeholder="Rechercher..." value="<?php echo $recherche; ?>" />
                        <span class="error"> <?php echo $rechercheErr; ?></span>
                        <button title="Rechercher" class="button-recherche" id="buttonRecherche" name="submit"><i class="material-icons-white">search</i></button>
                    </div>
                </form>
            </section>
        </a>
    </h1>
    <link rel="stylesheet" type="text/css" href="/css/styles.css" media="all" />
</header>

Если есть способ, которым я могу изменить свой html, чтобы визуально я мог его получить, я был бы очень счастлив (см. изображение)

Любая помощь будет принята с благодарностью. Также я не могу использовать jquery, javascript .....

Answer 1

Я понял, вот мой новый html

<header>
    <h1>
        <a href="/">
            <span class="texte-cache">Sel gras</span>
        </a>


     <section class="section-recherche">
                <?php
                // define variables and set to empty values
                $rechercheErr = "";
                $recherche  = "";
                $rechercheValid = false;
                ?>

                <form method="get" action="../pages/recherche.php">
                    <div class="recherche">
                        <input type="search" name="recherche" id="recherche" placeholder="Rechercher..." value="<?php echo $recherche; ?>" />
                        <span class="error"> <?php echo $rechercheErr; ?></span>
                        <button title="Rechercher" class="button-recherche" id="buttonRecherche" name="submit"><i class="material-icons-white">search</i></button>
                    </div>
                </form>
            </section>

    </h1>
    <link rel="stylesheet" type="text/css" href="/css/styles.css" media="all" />


</header>

И вот что я сделал в css Я дал поисковой форме абсолютную позицию.

.section-recherche{
  position: absolute;
  top: 220px;
  padding-left: 20px;
  width: 80%;
}