Question

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

Answer 1

使用<button>Your text here</button>可能会更好。这将在大多数浏览器中默认呈现为按钮，但您可以使用CSS覆盖它以呈现为链接。

这将取消对JavaScript的需求，并将保留提交按钮的默认浏览器行为，例如在按Enter键时自动提交表单。

Answer 2

您应该使用真实的提交按钮（<button>或<input type="submit">）并对其进行样式设置，使其看起来像链接。

如果确实由于某种原因必须在表单元素之外，至少使用the standard HTML5 attribute：

<form id="my-form">
    …
</form>
…
<input type="submit" value="Submit the form" form="my-form">

然后，您可以为不支持它的浏览器添加基于JavaScript的回退：

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);
}

Answer 3

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

编辑：

正如一些用户指出的那样，使用内联JS是不好的做法，所以我将改用jQuery。

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

jQuery的：

$(document).ready(function(){
    $("a.submit").click(function(){
        document.getElementById("myForm").submit();
    }); 
});

这是您更新的JSFiddle

Answer 4

如果您需要提交按钮看起来像链接，则仍应使用<input type="submit"/>元素或<button type="submit">元素。

这对于具有辅助导航的用户尤为重要，其中表单控件通常会对链接元素做出不同的反应。由于您有兴趣将提交按钮显示为，就像它是一个链接一样，任务应该使用CSS完成。

<子> HTML：

<form>
    ...other fields...
    <input type="submit" value="This looks like a link" class="linkish"/>
</form>

<子> CSS：

.linkish {
    background-color: transparent;
    border: 0;
    color: blue;
    cursor: pointer;
    display: inline;
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: underline;
}

您所要做的就是删除浏览器的原生提交按钮使用的样式，并添加链接样式。

demo on jsfiddle

如何提供HTML＆＃34; A＆＃34;标记充当提交按钮

4 个答案:

编辑：