Question

我想制作带有3个不同动作按钮的html表单。按钮是：DAY; WEEK，MONTH。当我点击例如DAY按钮时我想在某个文件夹中看到DayImage，例如ImagesFolder，当点击WEEK看WekImage时。我会在该文件夹中放入一些图像。这是我到目前为止所拥有的

@using Portal.Framework.Models;

<form id="reportParametersForm" method="GET" action="@string.Format("{0}/{1}", @Url.Content("~/Reports/View"), ViewBag.Report)">
    <fieldset style="padding: 0.2em 0 1.2em 0;height:60px">
        <legend style="margin: 0 1px 0 10px;padding: 3px 36px 3px 20px;background-color: #494949;color: white;font-size: 11pt;">
        @Html.Resource(String.Format("Report_{0}", ViewBag.Report as string))</legend>

    <table border="0" cellspacing="0" cellpadding = "0" style="font-size:x-small">        
        <tr valign="bottom" style="height:10px">
           <td width="20px" style="vertical-align: top">
            </td>
            <td width="30px" style="vertical-align: middle" align="center" nowrap="nowrap">
                <label style="font-size:small">
                    Time period</label>

                <button class="button" type="submit">
                    Day</button>

                <button class="button" type="submit">
                    Week</button>

                <button class="button" type="submit">
                    Month</button>
            </td>
        </tr>

    </table>
</fieldset>
</form>

但是当我点击某个按钮时，没有动作。我也想，稍后当我点击按钮打开一些SSRS报告。加上如何为点击按钮添加悬停动作？

Answer 1

您可以添加formction属性，为不同的按钮提供不同的操作。

<button class="button" type="submit" formaction="action-url">Day</button>

旧版浏览器不支持编码属性。对于单击按钮的悬停操作，请使用css。

Answer 2

通过在按钮上指定格式attr，可以有三个不同的操作，具有不同的操作

form button:nth-child(2):hover{background-color:blue;}
form button:nth-child(3):hover{background-color:green;}

<form action="blahblah.php" >
  <input type="text" name="blah" />
  <button formaction="send_to_num1.php">Number 1 php</button>
    <button formaction="send_to_num2.php">Number 2 php</button>
    <button formaction="send_to_num3.php">Number 3 php</button>
 </form>

看看HERE w3schools formaction 对于悬停部分，只需添加：在你的css中悬停psuedo

使用3个按钮制作表格

2 个答案: