锚标签可以作为提交按钮吗？

Question

我正在将一个现有的网站转换为使用MVC和Entity Framework。

布局/样式都应该保持不变，为了遵循这个指南，我需要使用<a>标签提交我的登录表单，因为它有一个自定义图像作为按钮。

这是我的表单：

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    <label>
        <span>Username
        </span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password
        </span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" onclick="login();" class="login-button"></a>
    </div>
}

你可以看到，<a>标签以前使用JavaScript提交登录信息。这不是我想要实现的目标。

我应该如何更改该标签以将表单提交到我的控制器操作？

- keeehlan

---

你的规格说明明确指出不能将锚标签更改为按钮标签吗？因为我的意思是，按钮也允许使用图像。这可能只需要对CSS进行微小的调整，而不需要使用JavaScript来提交表单。 - rossisdead

Answer 1

我做了一些小修改

HTML

<form action="test.aspx" type="POST">
    <label>
        <span>Username</span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" class="login-button">Login</a>
    </div>
</form>

jQuery

$(document).ready(function(){
   $(document).on("click",".login-button",function(){
     var form = $(this).closest("form");
     //console.log(form);
     form.submit();
   });
});

JSFiddle

- Gökhan Girgin

Answer 2

通常情况下，您不应该在html标签中放置大量javascript代码。但如果这只在您的解决方案中出现一次，则可以接受。但是，如果有很多需要使用Gokan的解决方案进行发布的锚点标签，则将具有标记类和一些javascript放在一个公共位置更好。

将锚点标签更改为以下内容：

<a href="javascript:$('form').submit();" class="login-button"></a>

- Jay

---

谢谢！通常情况下，您不希望在HTML标签中放置大量的JavaScript代码，但如果这只在您的解决方案中发生一次，那么这将是可以接受的。然而，如果有许多需要使用Gokan的解决方案进行发布的锚点标签，则最好使用标记类和一些公共位置的JavaScript。 - Jay

这是将基于JavaScript的行为附加到标签的最糟糕的方法。 - tereško

@tereško 我不同意。为了一个单独的边角情况而在各个地方运行不连贯的代码可能会引起更多问题，这并不值得。即使这可能不是最被接受的方式，有时候最简单的方式也是最易维护的。但如果你有其他解决方案，请支持它，要有建设性，而不仅仅说它很糟糕。 - Jay

Answer 3

只需要更改单行代码，为了优化，我认为这是最好的方法。

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    // your HTML code
    <div class="spacer">
        <a href="" onclick='$("#login").submit()' class="login-button"></a>
    </div>
}

- Smit Patel