本文實(shí)例講述了jQuery實(shí)現(xiàn)的漂亮表單效果代碼。分享給大家供大家參考。具體如下：
這是一款基于jQuery的漂亮的表單效果，將表單的輸入框換成了橫線，加入了背景，引入了jQuery插件，樣式上特別漂亮，是一個(gè)值得借鑒的jQuery表單美化實(shí)例，而且本表單在布局上完全是基于純CSS標(biāo)簽來實(shí)現(xiàn)，使用了CSS中的fieldset來制作表單，兼容性好。
運(yùn)行效果如下圖所示：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-table-input-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>noteform</title><script src="jquery-1.6.2.min.js"></script><script>$(function(){ $("div").click(function(){$(this).addClass("select"); });})</script><style><!--body{ background-image:url(wood-bg2.jpg);}.exlist{ background-color:#F9EE70; margin:30px auto; padding:5px; width:680px; min-height:200px; height:auto; font-family:"微軟雅黑"; -webkit-box-shadow:4px 4px 5px #333;/*webkit*/ -moz-box-shadow:4px 4px 5px #333;/*firefox*/ box-shadow:4px 4px 5px #333;/*opera或ie9*/ }#title{ width:200px; margin:20px auto;}#title legend{ font-size:26px;}div.exlist_title{ background-color:#F9EE70; width:680px; height:20px;}div.exlist_title img{ float:right; margin:-15px 10px;}/*-----------form-----------*/fieldset{ width:90%; border:1px dashed #666; margin:40px auto;}legend{ background-color:#F9EE70; height:120px; height:30px; color:#630; font-weight:bolder; font-size:20px; line-height:30px; margin:-20px 10px 10px; padding:0 10px;}div.row{ margin:10px; padding:5px;}div.row label{ height:20px; font-size:16px; line-height:20px; margin:0 10px;}input.txt{ background-color:#F9EE70; color:#333; width:150px; height:20px; margin:0 10px; font-size:16px; line-height:20px; border:none; border-bottom:1px solid #565656;}input.txt:focus{ color:#333; background-color: #FF0; border-bottom:1px solid #F00;}select{ width:100px;}option{ text-align:center;}input.btn{ width:50px; height:20px; color:#000008B; background-color: transparent; border:0; padding:0;}--></style></head><body><div class="exlist"> <div class="exlist_title"></div> <div id="title"><legend>快遞運(yùn)單信息</legend></div> <form method="post" action=""> <fieldset> <legend>收件信息</legend> <div class="row"> <label>1. 收貨人:</label> <input style="width:100px" class="txt" type="text" /> <label>2. 目的地:</label> <select> <option>北京</option> <option>上海</option> <option>武漢</option> <option>烏魯木齊</option> </select> </div> <div class="row"> <label>3. 聯(lián)系電話:</label><input class="txt" type="text" /> </div> <div class="row"> <label>4. 詳細(xì)地址:</label><input class="txt" style="width:400px" type="text" /> </div> </fieldset> <fieldset> <legend>發(fā)件信息</legend> <div class="row"> <label>1. 發(fā)貨人:</label> <input style="width:100px" class="txt" type="text" /> <label>2. 始發(fā)地:</label> <select> <option>北京</option> <option>上海</option> <option>武漢</option> <option>烏魯木齊</option> </select> </div> <div class="row"> <label>3. 聯(lián)系電話:</label><input class="txt" type="text" /> </div> <div class="row"> <label>4. 詳細(xì)地址:</label><input class="txt" style="width:400px" type="text" /> </div> </fieldset> <fieldset> <legend>貨物信息</legend> <div class="row"> <label>1. 數(shù)量:</label><input class="txt" style="width:30px" maxlength="2" type="text" /> <label>（1-99件）</label> <label>2. 體積:</label><input class="txt" style="width:30px" maxlength="3" type="text" /> <label>3. 重量:</label><input class="txt" style="width:30px" maxlength="3" type="text" /> <label>（Kg）</label> </div> <div class="row"> <label>4. 運(yùn)輸方式:</label> <select> <option>航運(yùn)</option> <option>火車</option> <option>汽車</option> <option>輪船</option> </select> </div> <div class="row"> <label>5. 付款方式:</label> <p> <label><input type="radio" name="pay" value="單選"/>現(xiàn)金付款</label> <label><input type="radio" name="pay" value="單選"/>收件人付款</label> <label><input type="radio" name="pay" value="單選"/>第三方付款</label> </p> </div> </fieldset> </form></div></body></html>希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
