提交链接 - 无 Javascript：缺点？

发布于 2024-08-05 16:02:03 字数 815 浏览 8 评论 0原文

前几天我得到了一个启示。当尝试使用图像创建提交按钮时，我遇到了一个问题：图像未显示，但 value 文本显示。当时，这不是我想要的，但现在，当我回顾时，我看到了一些潜在的用途。

如果您需要将数据发送到另一个页面，但不需要用户输入，您可以通过 GET 在链接（或表单）中发送数据，或者通过 POST 通过表单发送数据代码>.问题是前者创建了丑陋的 URL，而后者需要一个看起来不合适的 submit 按钮。当然，我可以想出一个图像，但如果我只想要可选择的文本怎么办？

因此，我开始尝试了一下，Firefox 似乎按照我的意愿呈现了以下内容，作为提交表单的可点击链接。您所要做的就是从 input type='image' 标记中删除 src 属性：

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='[email protected]' />
  <input type='image' value='E-mail User' />
</form>

此解决方案适用于其他浏览器吗？这样做有什么缺点（除了你的链接 CSS 没有正确应用这一明显事实之外）？

原文

I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.

If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.

So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='[email protected]' />
  <input type='image' value='E-mail User' />
</form>

Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

早茶月光 2024-08-12 16:02:03

不需要使用图像输入，为什么不只使用常规的提交按钮并应用一些粗暴的样式以使其看起来像常规文本呢？

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

回复收藏 0 原文

温折酒 2024-08-12 16:02:03

我喜欢一个使用实际链接（隐藏）的解决方案，该链接通过 javascript 与 noscript 标记内的按钮结合公开。

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="[email protected]" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="[email protected]" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

回复收藏 0 原文