如何使用CSS按钮在表单中发布方法？

Question

我喜欢这篇文章 "如何使用 jQuery 创建类似 Skype 的按钮”

但是评论列表已经关闭，所以我需要你们的帮助！

如何使用提交方法将此代码写入表单？

<a class="button" href="#"> 
<img src="*.png" alt="" />Add to cart</a>

这是我的表单示例，我希望在其中插入 css 按钮：

<form action="http://ww6.aitsafe.com/cf/addmulti.cfm" name="mal" method="post">
<input type="hidden" name="userid" value="">
<input type="hidden" name="return" value="">    
<input type="hidden" name="nocart">
<input type="hidden" name="qty1" value="1">
<input type="hidden" name="product1" value="">
<input type="hidden" name="price1" value="150.00">

<input type=submit value="Add to Cart" onclick="alert('Added to cart\n\nThis page will refresh');">

更新...耶嘿！ :)

感谢 PCALCAO 提供的链接 如何最好地制作链接提交表格

在那里我发现克里斯的回答非常有帮助&现在它正在工作......

正确答案：

<a class="button" href="#" onclick="document.mal.submit(); return false;"> 
<img src="*.png" alt="" />Add to cart</a>

:)

Answer 1

我不知道你想在那里做什么......但是！

这里是：
http://www.w3schools.com/html/html_forms.asp

阅读此内容，然后您将了解一些有关表单和提交按钮的知识。

当您弄清楚简单的 html 部分时，开始考虑 CSS 和 JQuery。

-编辑-
你真的应该重新阅读那篇文章！
对于初学者来说，它是：

<a class="button" href="#">
<img src="button.png" alt="" />Send info</a>
or <a href="#">cancel</a>

而不是：

<class="button" a href="#"> 
<img src="*.png" alt="" />Add to cart</a>    

“class”是 HTML 元素的属性，而不是元素本身。这里的元素是“a”（锚点）。

Answer 2

我没有正确地理解你，但是如果你想设置一个图像作为提交按钮背景，请将CSS修改为：

.button input[type="submit"]
    {
        background:url(*.png);
        color:#fff;
        width:80px;
    }

并且html表单将是：

<div class="button">
<input type="submit" value="SUBMIT" />
</div>

Answer 3

我不知道你上面的代码是什么。
我认为你应该看看 HTML 表单。

演示代码：

<form method="get" action="post.php">
<input type="text" name="text">
<input type="submit" name="submit" value="Submit!">
</form>

Answer 4

如果您想在 sbmit 按钮上应用 css，请尝试下面的 jquery 代码：

function setCss()
{
$(document).ready (function() {

$(":input[type=submit]" ).addClass("bigbutton");
 });
}

setCss();

使用下面的按钮样式：

.button{
         border:0;
     background:url(images/yourimage.gif);
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:12px;
     text-align:center;
     color:#FFFFFF;
     cursor:pointer;
     height:22px;
     width:80px;
     }

它将适用于所有浏览器。

如果你想要动画，那么使用 jquery 函数更改悬停时的图像/样式：

$( ":input[type=submit]" ).css( {"background": 'no-repeat url("'+baseurl+'/public/images/blue_btn1.gif")', "color": "#ffffff","width":"80px","height":"25px", "font-weight": "bold","font-family":"Verdana, Arial, Helvetica, sans-serif","font-size":"12px","background":"none","border":"0"} );