如何使用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按鈕在表單中發佈方法？

回答

相關問題