将提交按钮的 HTML 转换为链接 HTML？答案

【问题标题】：Convert a HTML for submit button into a link HTML?将提交按钮的 HTML 转换为链接 HTML？
【发布时间】：2012-07-26 16:25:49
【问题描述】：

我在 HTML 中有以下提交按钮：

<input name="submit" type="submit" value="Sign In" />

我想用这个方法把它转换成 HTML 链接：

<a  href="#" onclick="document.getElementById('formname').submit()">Sign In</a>

但是表单没有提交。

谢谢。

完整代码如下：

<form id="form_freeuser" action="login.php" method="post" name="form_freeuser">
            <div class="label"><label>Free User</label></div><input id="name" name="name" readonly="readonly" type="text" value="test" />
            <input id="user_email" name="email" readonly="readonly" type="password" value="test" />
            <input name="submit" type="submit" value="Sign In" />

        </form>

【问题讨论】：

你的
标签中有它吗？
你为什么要这样做？ JS 方法不适用于禁用 JS 的用户。另一方面，您可以随意设置输入样式 - 甚至可以模仿 <a>
另外你可能不想使用链接。您可以使用 span 标签并以任何您想要的方式设置样式。
请问我该怎么做？谢谢。

标签： javascript html

【解决方案1】：

使用Jquery你可以这样做

$(document).ready(function(){
    $('a').click(function(e){
        $('form').submit();
    });
});

【讨论】：

【解决方案2】：

确保将id 属性设置为您发送给getElementById() 的任何内容。

<form id="formname" action="/foo" method="get">
    <a  href="#" onclick="document.getElementById('formname').submit()">Sign In</a>
</form>

这将修复您的代码，这就是您要问的问题。不过，作为一个元点，我不建议使用链接来提交表单。用户期望一个按钮来提交一个表单，而不是一个链接。不要乱用这样的语义。你会迷惑和惹恼用户。

您还可以使用 CSS 来设置按钮的样式，使其看起来像超链接。它有同样的打破惯例的问题。

【讨论】：

最好不要使用 JavaScript 来执行此操作。请参阅我的新答案。
最初发帖人的问题不是“最好的方法是什么？”它是（释义）“这是我的代码，为什么它没有按照我的预期做？”这回答了这个问题。
确实如此。但是对于出于某种原因不需要明确要求 JS 方法的任何人，HTML 方法提供了更多的好处。这不是明确要求的，而是暗示的。这两个答案都是有用的，具体取决于目的。如果您愿意，可以随意将它们组合成一个答案。

【解决方案3】：

通过单击链接，您的浏览器会尝试将您从该页面带走，因此您会丢失所有数据。你可以：

<a  href="#" onclick="document.getElementById('formname').submit();return false">Sign In</a>

“formname”也是表单的id还是表单的名称？

要使该代码正常工作，您需要：

<form id="formname">

代替

<form name="formname">

否则你可以使用

document.formname

还有

【讨论】：

【解决方案4】：

在这篇文章中：How to make button look like a link?
@odedbd 提供了一个很好的解决方案：http://jsfiddle.net/zYCN9/1/

他的代码将一个按钮变成了一个看起来很正常的超链接。
JS 解决方案的好处是，您没有使用 JS。因此，禁用 JS 的用户仍然可以使用您的表单。这似乎是一种更优雅且符合 HTML 的方式来执行此操作。

我已经复制了下面的代码以防链接失效：

<button> your button that looks like a link</button>

button {
    background:none!important;
     border:none; 
     padding:0!important;

    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#069;
     cursor:pointer;
}
button:hover{
         text-decoration:underline;
}

此外，您不希望 -all- 提交按钮具有这种样式。所以我建议这样做：

<input type="submit" class="submit_hyperlink" value="submit this form"/>

input.submit_hyperlink {
    background:none!important;
     border:none; 
     padding:0!important;

    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#069;
     cursor:pointer;
}

input.submit_hyperlink:hover{
         text-decoration:underline;
}

【讨论】：