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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
网页常用特效代码整理
2006/06/23 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python 默认参数相关知识详解
2019/09/18 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python如何安装第三方模块
2020/05/28 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
企业总经理助理岗位职责
2014/09/12 职场文书
实习计划书范文
2015/01/16 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
财务年终工作总结大全
2019/06/20 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技