用 3 个按钮创建一个表单

Question

我想用 3 个不同的操作按钮制作 html 表单。这些按钮是：日；周，月。例如，当我单击 DAY 按钮时，我想在某个文件夹（例如 ImagesFolder）中看到 DayImage，当单击 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

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

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

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

Answer 2

通过像这样在按钮上指定formaction 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

中添加 :hover psuedo

用 3 个按钮创建一个表单

Make a form with 3 buttons

html

css

button