如何给出一个“HTML”;A「;标签充当提交按钮

如何给出一个“HTML”;A「;标签充当提交按钮,html,css,Html,Css,我正在创建一个联系人表单,需要一个提交按钮,但我需要它是一个特定的外观。我需要知道是否有方法将表单操作分配给html中的a标记,以便我可以提交带有锚定标记的表单。您需要使用Javascript来完成此操作: 编辑: 正如一些用户指出的,使用内联JS是一种糟糕的做法,因此我将使用jQuery <form id="myForm"> <a class="submit" href="#">Submit</a

我正在创建一个联系人表单,需要一个提交按钮,但我需要它是一个特定的外观。我需要知道是否有方法将表单操作分配给html中的
a
标记,以便我可以提交带有锚定标记的表单。

您需要使用Javascript来完成此操作:

编辑: 正如一些用户指出的,使用内联JS是一种糟糕的做法,因此我将使用jQuery

<form id="myForm">
    <a class="submit" href="#">Submit</a>
</form>

这是您的更新版

您需要使用Javascript来执行此操作:

编辑: 正如一些用户指出的,使用内联JS是一种糟糕的做法,因此我将使用jQuery

<form id="myForm">
    <a class="submit" href="#">Submit</a>
</form>

这是您的更新版

您最好在这里使用
您的文本
。在大多数浏览器中,默认情况下,这将作为按钮呈现,但您可以使用CSS覆盖它,以作为链接呈现


这将消除对JavaScript的需求,并保留提交按钮的默认浏览器行为,如按下enter键时自动提交表单。

您最好在此处使用
文本。在大多数浏览器中,默认情况下,这将作为按钮呈现,但您可以使用CSS覆盖它,以作为链接呈现


这将消除对JavaScript的需求,并将保留提交按钮的默认浏览器行为,如按enter键时自动提交表单。

您应该使用真正的提交按钮(
)并将其样式设置为链接

如果出于某种原因,它确实必须位于表单元素之外,则至少使用:


您应该使用一个真正的提交按钮(
)并对其进行样式设置,使其看起来像一个链接

如果出于某种原因,它确实必须位于表单元素之外,则至少使用:


如果您需要提交按钮看起来像一个链接,您仍然应该使用
元素或
元素

这对于使用辅助导航的用户尤其重要,因为表单控件的反应通常与链接元素不同。当你想让提交按钮看起来像一个链接时,这个任务应该用CSS来完成

HTML: 您所要做的就是删除浏览器的原生提交按钮使用的样式,然后添加链接样式


如果您需要提交按钮看起来像一个链接,您仍然应该使用
元素或
元素

这对于使用辅助导航的用户尤其重要,因为表单控件的反应通常与链接元素不同。当你想让提交按钮看起来像一个链接时,这个任务应该用CSS来完成

HTML: 您所要做的就是删除浏览器的原生提交按钮使用的样式,然后添加链接样式



我能将此发送到php脚本吗?请不要推荐内联事件处理程序。@David,我投了反对票,因为这是个错误的建议。一个人能写的最好的javascript是无。它的数量越少,调试就越容易。在这种情况下不需要它,因此建议使用它的解决方案是一个糟糕的选择。@David,因为OP是在询问有关建议解决方案的信息,而不是他的实际问题。从长远来看,给别人他们想要的东西可能是有害的。@David,那么,既然
元素缺少
[href]
属性,并且没有
[tabindex]
属性,那么您如何期望一个使用辅助导航的用户关注您的提交按钮的恶意版本?当他们导航到下一个链接时会发生什么?您希望如何强制表单启用隐式提交?您丢失了许多您甚至没有意识到的重要本机功能。我可以将其发送到php脚本吗?请不要推荐内联事件处理程序。@David,我投了反对票,因为这是一个错误的建议。一个人能写的最好的javascript是无。它的数量越少,调试就越容易。在这种情况下不需要它,因此建议使用它的解决方案是一个糟糕的选择。@David,因为OP是在询问有关建议解决方案的信息,而不是他的实际问题。从长远来看,给别人他们想要的东西可能是有害的。@David,那么,既然
元素缺少
[href]
属性,并且没有
[tabindex]
属性,那么您如何期望一个使用辅助导航的用户关注您的提交按钮的恶意版本?当他们导航到下一个链接时会发生什么?您希望如何强制表单启用隐式提交?您缺少了许多您甚至没有意识到的重要本机功能。您正在对无法应用于提交按钮的锚应用何种样式?只需按照您的意愿设置提交输入的样式按钮必须位于
标记之外。然后使用CSS移动它,或者扩大你的
标签的范围。或者用表单包装你文档的大部分,因此提交就是其中的一部分。你对锚应用了什么样的样式而不能应用于提交按钮?只需按照你的意愿设置提交输入的样式按钮必须位于
标签之外。然后使用CSS移动它,或者扩大
标记的范围。或者用表单包装文档的更大部分,因此提交站在其中。如果使用此回退,请小心。在这种情况下它会起作用,因为只有
元素在表单之外,但是如果
元素之外还有其他字段,则需要使用更复杂的polyfill。@zzbov:当然。这只是此特定情况的一种回退。如果使用此回退,请小心。在这种情况下它会起作用,因为只有
元素在表单之外,但是如果有其他字段在
元素之外,
<form id="my-form">
    …
</form>
…
<input type="submit" value="Submit the form" form="my-form">
if (!('form' in document.createElement('input'))) {
    document.addEventListener('click', function (e) {
        var form = e.getAttribute('form');

        if (e.nodeName === 'input' && e.type === 'submit' && form) {
            document.getElementById(form).submit();
            e.preventDefault();
        }
    }, false);
}
<form>
    ...other fields...
    <input type="submit" value="This looks like a link" class="linkish"/>
</form>
.linkish {
    background-color: transparent;
    border: 0;
    color: blue;
    cursor: pointer;
    display: inline;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: underline;
}