search

Home  >  Article  >  Web Front-end  >  Beautiful form effect code implemented by jQuery_jquery

Beautiful form effect code implemented by jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:44:391334browse

The example in this article describes the beautiful form effect code implemented by jQuery. Share it with everyone for your reference. The details are as follows:

This is a beautiful form effect based on jQuery. The input box of the form is replaced by a horizontal line, a background is added, and a jQuery plug-in is introduced. The style is particularly beautiful. It is an example of jQuery form beautification worth learning from. Moreover, the layout of this form is completely based on pure CSS tags. Fieldset in CSS is used to create the form, which has good compatibility.

The operation effect is as shown below:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-table-input-style-codes/

The specific code is as follows: 

<!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>快递运单信息</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. 联系电话:</label><input class="txt" type="text" />
     </div>
     <div class="row">
     <label>4. 详细地址:</label><input class="txt" style="width:400px" type="text" />
     </div>
   </fieldset>
   <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. 联系电话:</label><input class="txt" type="text" />
     </div>
     <div class="row">
     <label>4. 详细地址:</label><input class="txt" style="width:400px" type="text" />
     </div>
   </fieldset>
   <fieldset>
   <legend>货物信息</legend>
     <div class="row">
     <label>1. 数量:</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. 运输方式:</label>
     <select>
     <option>航运</option>
     <option>火车</option>
     <option>汽车</option>
     <option>轮船</option>
     </select>
     </div>
    <div class="row">
    <label>5. 付款方式:</label>
     <p>
      <label><input type="radio" name="pay" value="单选"/>现金付款</label>
      <label><input type="radio" name="pay" value="单选"/>收件人付款</label>
      <label><input type="radio" name="pay" value="单选"/>第三方付款</label>
     </p>
    </div>
   </fieldset>
  </form>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery uses ul to simulate select to achieve form beautification_jqueryNext article：jquery uses ul to simulate select to achieve form beautification_jquery

Related articles

See more