使用普通链接提交表单

Posted 2023-02-22

【中文标题】使用普通链接提交表单

【英文标题】：Use a normal link to submit a form

【发布时间】：2011-05-16 05:56:24

【问题描述】：

我想提交一个表格。但我不会使用带有提交类型的输入按钮的基本方式，而是使用 a 链接。

下图说明了原因。我正在使用图像链接来保存/提交表单。因为我有图片链接的标准 css 标记，所以我不想使用输入提交按钮。

我尝试将 onClick="document.formName.submit()" 应用于 a 元素，但我更喜欢 html 方法。

有什么想法吗？

【问题讨论】：

使用按钮和css来显示图像或使用javascript，没有真正的方法可以制作简单的href来提交没有javascript的表单。

我第二个，不幸的是，这些不是一个简单的方法，没有 javascript

你这样做的理由听起来像是一种虚假的经济。最好只为提交按钮提供一个标准的 css，并按照设计使用的方式使用表单。这里描述了一堆按钮 css 技术：tripwiremagazine.com/2009/06/…

【参考方案1】：

两种方式。要么创建一个按钮并为其设置样式，使其看起来像一个带有 css 的链接，要么创建一个链接并使用onclick="this.closest('form').submit();return false;"。

【讨论】：

Aaaaaaa这里是如何将按钮样式设置为链接的参考：***.com/questions/1367409/…

请注意，form.submit() 将无法在没有 JavaScript 的情况下工作

@baptx 甚至旧智能手机也启用了javascript

@MahdiJazini 很多人默认禁用 JavaScript，这在某些情况下可能具有侵入性并影响性能。如果 JavaScript 失败，它可能会破坏整个网站（例如，使用没有本地回退的 CDN 并且第三方域被阻止）。如果出现 HTML 错误，您仍然可以使用该网站。开发者应该遵循渐进增强原则。

如果您想支持没有 javascript 的用户，请执行此答案中描述的第一个选项，将按钮样式设置为链接。例如input[type=submit].link border: none; background: none; display: inline; color: blue; text-decoration: underline; 和<input type=submit class="link" />

【参考方案2】：

据我所知，如果没有某种形式的脚本，您将无法真正做到这一点。

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

来自Here 的示例。

【讨论】：

亲爱的访客...不要忘记设置 >>> id="my_form" 它是 id 而不是名称：D

这应该是最好最明确的答案，谢谢！

【参考方案3】：

像这样为input type="submit" 设置样式对我有用：

.link-button  
     background: none;
     border: none;
     color: #1a0dab;
     text-decoration: underline;
     cursor: pointer; 

<input type="submit" class="link-button" />

在 Chrome、IE 7-9、Firefox 中测试

【讨论】：

仅作记录：您应该使用 CSS 选择器选择适当的 input 元素，而无需将类附加到 HTML 元素。

虽然您的评论是首选方式，但这并不总是可行的

为什么这是首选方式？

这是一种半成熟的编码实践，通常会留下更干净的 html……但这并不是什么大不了的事

这个答案也不依赖于javascript，这是一件少担心的事情

【参考方案4】：

您正在使用图像提交.. 所以您可以简单地使用type="image" 输入“按钮”：

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

【讨论】：

...或一个 <button> 元素，其中包含一个 <img/> 元素。

这里是 MDN 链接，以防其他人想要来源：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

【参考方案5】：

使用：

<input type="image" src=".."/>

或：

<button type="send"><img src=".."/> + any html code</button>

加上一些 CSS

【参考方案6】：

当然，纯 HTML 没有解决方案来提交带有链接 (a) 标记的表单。标准 HTML 只接受按钮或图像。正如其他一些合作者所说，可以使用按钮模拟链接的外观，但我想这不是问题的目的。

恕我直言，我认为建议和接受的解决方案不起作用。

我在表单上测试过，浏览器没有找到对表单的引用。

所以可以使用一行JavaScript来解决它，使用this对象，它引用了被点击的元素，它是表单的一个子节点，需要提交。所以this.parentNode 是表单节点。在它只是以这种形式调用submit() 方法之后。无需对整个文档进行研究即可找到正确的表格。

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

假设我用自己的名字输入：

我在表单方法属性中使用了get，因为提交后可以在加载页面的 URL 中看到正确的参数。

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

这个解决方案显然适用于任何接受onclick事件或类似事件的标签。

this 是与event variable（在所有主要浏览器和 IE9 及更高版本中可用）一起恢复上下文的绝佳选择，可直接使用或作为参数传递给函数。

在这种情况下，将带有a 标记的行替换为下面的行，使用属性target，该属性指示已启动事件的元素。

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

【讨论】：

@Nathan，我没有太多在*** 中写作的练习。我希望你的更正帮助我改进我的风格。我的英语也不好。

【参考方案7】：

你可以使用 OnClick="document.getElementById('formID_NOT_NAME').SUBMIT()"