如何使用不同的图像作为表单提交按钮，将不同的值传递到php页面？

我制作了一个html和一个php页面。我在html页面中放了3张图片，展示了不同类型的电影——恐怖片、幻想片、浪漫片。我希望图像作为表单提交按钮工作，应该重定向到php页面，php页面应该获得图像的类型

我已经尝试过的——我尝试了很多不同的东西，但都没有成功。 我想知道php页面如何使用$u POST方法从不同的图像中获取不同的输入

预期产量-

---

假设用户单击了“恐怖”类型的图像，那么在php页面中，$GREEP的值应该是恐怖。

这些图像应该有一个href标记，可以重定向到您的php页面。请注意，此方法意味着您应该通过$\u请求变量获取值，而不是POST或get。例如，让我们假设href='myphp.php？genre=horror'。在PHP文件$GREEN=$_请求['GREEN']中

您可以尝试以下类似的方法：

<input class='genre' type='image' src='/images/genres/horror.jpg' data-genre='horror' />
<input class='genre' type='image' src='/images/genres/sci-fi.jpg' data-genre='sci-fi' />
<input class='genre' type='image' src='/images/genres/chickflick.jpg' data-genre='chickflick' />


<script>
    Array.prototype.slice.call( document.querySelectorAll('input.genre') ).forEach( function(input){
        input.addEventListener('click', function(e){
            e.preventDefault();
            location.href='info.php?genre='+this.dataset.genre
        });
    })
</script>

您可以使用

您可以使用

$\u POST['genre']

（或按钮的

名称

属性）访问PHP中提交按钮的值

<form name='genres' method='post'>
    <input class='genre' type='image' src='/images/genres/horror.jpg' data-genre='horror' />
    <input class='genre' type='image' src='/images/genres/sci-fi.jpg' data-genre='sci-fi' />
    <input class='genre' type='image' src='/images/genres/chickflick.jpg' data-genre='chickflick' />
    <input class='genre' type='image' src='/images/genres/thriller.jpg' data-genre='thriller' />
    <input class='genre' type='image' src='/images/genres/adventure.jpg' data-genre='adventure' />
    <input class='genre' type='image' src='/images/genres/period-drama.jpg' data-genre='period-drama' />
    <input type='hidden' name='genre' />
</form>
<script>
    let form=document.forms.genres;
    let genre=form.genre;

    Array.prototype.slice.call( document.querySelectorAll('input.genre') ).forEach( function(input){
        input.addEventListener('click', function(e){
            e.preventDefault();
            /* set hidden input value */
            genre.value=this.dataset.genre;
            /* append the genre to the qction/querystring */
            form.action='?genre='+this.dataset.genre;
            /* go */
            form.submit();
        });
    })
</script>

<form method="post">
<button name="genre" value="horror" type="submit"><img src="./img/horror.jpg"></button>
<button name="genre" value="comedy" type="submit"><img src="./img/comedy.jpg"></button>
</form>