データを入力するための 2 つの画像を含むアクティビティのリスクを入力するための html フォームを作成しようとしています: a) リスクの重大度と b) リスクが発生する可能性。私は成功せずにイメージマップを使用しようとしました:
<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>
しかし、画像をクリックすると、フォームが送信されます (3 つの画像があることに注意してください。1 つはフォームの送信に使用されます)。画像を分割してラジオ ボタンとして使用することも考えましたが、各ラジオ ボタンに同じ画像を使用する必要があるようです。つまり、1、2、3、4、5 の値はすべて同じ画像になります。 .
画像は次のようになります
。ユーザーはその一部をクリックして、2 つの入力フィールドのそれぞれについて 1 から 5 の間で戻ることができる必要があります。
フォーム内の 2 つの画像でこれを行うにはどうすればよいですか?