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

我喜欢这篇文章 "How to create Skype-like buttons using jQuery"如何使用css按钮在表单中发布方法？

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

如何使用提交方法将此代码转换为表单？

<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');">

更新... yehey！ :)

谢谢你PCALCAO的链接How best to make a link submit a form

在那里，我发现克里斯的回答很helfpful &现在它的工作...

正确答案：

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

来源

2011-10-22 Corleone2K

你的问题不清楚。 – xmarcos

抱歉，因为我在网页设计和编程方面很新颖。 :) – Corleone2K

我不知道你想要做什么有......但是！

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

看了这个，你会有点了解的形式和提交按钮。

当你的身影简单的HTML部分出来，开始思考CSS和JQuery。

CNC中你真的应该重新阅读这篇文章！对于初学者来说，它是：

<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>

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

来源

2011-10-22 07:42:46 pcalcao

感谢您的回复，但我想为我的表单使用这个很酷的CSS按钮... :) – Corleone2K

我相信你这样做！尽管如此，CSS只是等式的一部分，你仍然需要适当的HTML（你可以从我发送的链接中找出它）。如果之后，你想要一个花式schmancy CSS3按钮... http://css3button.net/在这里你走！（我建议你阅读关于所有这些“魔法”如何运作的教程，但这应该让你走上正确的轨道）。 – pcalcao

我还是无法弄清楚...可能请您检查文章吗？再次感谢... :) – Corleone2K

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

演示代码：

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

来源

2011-10-22 07:46:22 Akos

谢谢，但我想用文章中的按钮到我的窗体... :( – Corleone2K

我没有得到你正确的，但如果你想将图像设置为提交按钮的背景下，修改CSS来：

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

和HTML表单将是：

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

来源

2011-10-22 07:57:14 Nitish

谢谢，但我想使用从文章中的按钮到我的窗体... :( – Corleone2K

试试下面的jQuery代码，如果你想在sbmit按钮应用CSS：

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

来源

2011-10-22 08:17:32

你的答案看起来很有希望，但你可以请检查文章及如何在窗体中实现它？谢谢... :) – Corleone2K

只需使用jqury再次调用图像悬停如：$（“：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“}）; – 2011-10-22 08:56:12

看到上面更新的答案 – 2011-10-22 08:58:43

谢谢你PCALCAO的链接How best to make a link submit a form

在那里，我发现克里斯的回答很helfpful &现在它正在工作...

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

来源

2011-10-24 06:47:36 Corleone2K

不客气，但......为什么我的答案没有得到解决？：P – pcalcao

我不知道...... hehehe ......谢谢。:) – Corleone2K

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

回答

相关问题