使用图像分级的HTML表单输入

我试图创建一个html表单来输入活动的风险，其中包括两个用于输入数据的图像：a）风险的严重性和b）风险发生的可能性。我尝试过使用imagemaps，但没有成功：

<form method="post">
    <map name="image_map">
        <area shape="rect" coords="0,0,10,25" alt="1" />
        <area shape="rect" coords="10,0,20,25" alt="2" />
        <area shape="rect" coords="20,0,30,25" alt="3" />
        <area shape="rect" coords="30,0,40,25" alt="4" />
        <area shape="rect" coords="40,0,50,25" alt="5" />
    </map>
    <input name="severity" type="image" width="50" height="25" src="images/rating.png" usemap="#image_map" /> 
    <input name="liklihood" type="image" width="50" height="25" src="images/rating.png" usemap="#image_map" />
    <input type="image" src="images/document_add.png" name="add" width="32" height="32">
</form>

但是当我点击一个图像时，它会提交表单（注意有三个图像，一个用于提交表单）。 我还考虑过分割图像并将其用作单选按钮，但似乎每个单选按钮都必须使用相同的图像，即1、2、3、4和5的值都是相同的图像

图像如下所示：。用户应该能够单击其中的一部分，并为两个输入字段中的每个字段返回1到5

---

如何使用表单中的两个图像执行此操作？

使用此工具，帮助很大！工具：谢谢，但是这对我的问题没有帮助。我不确定使用imagemap是否是正确的方法。