jQuery实现的漂亮表单效果代码


Posted in Javascript onAugust 18, 2015

本文实例讲述了jQuery实现的漂亮表单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery的漂亮的表单效果,将表单的输入框换成了横线,加入了背景,引入了jQuery插件,样式上特别漂亮,是一个值得借鉴的jQuery表单美化实例,而且本表单在布局上完全是基于纯CSS标签来实现,使用了CSS中的fieldset来制作表单,兼容性好。

运行效果如下图所示:

jQuery实现的漂亮表单效果代码

在线演示地址如下:

具体代码如下:

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

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
js更优雅的兼容
Aug 12 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 #Javascript
js实现Select头像选择实时预览代码
Aug 17 #Javascript
基于jquery实现放大镜效果
Aug 17 #Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
You might like
PHP 时间日期操作实战
2011/08/26 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP加密解密函数详解
2015/10/28 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
setTimeout学习小结
2017/02/08 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
物流经理自我评价
2013/09/23 职场文书
大学生简历中个人的自我评价
2013/10/06 职场文书
小学生新学期寄语
2014/01/19 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
广告创意求职信
2014/03/17 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
个人求职信格式范文
2015/03/20 职场文书
围城读书笔记
2015/06/26 职场文书
高中体育课教学反思
2016/02/16 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Python 阶乘详解
2021/10/05 Python